JavaScriptjQuery

Posted 嘉禾世兴

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScriptjQuery相关的知识，希望对你有一定的参考价值。

No1：

jQuery能帮我们干这些事情：

  • 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；

  • 简洁的操作DOM的方法：写$(\'#test\')肯定比document.getElementById(\'test\')来得简洁；

  • 轻松实现动画、修改CSS等各种操作。

 目前jQuery有1.x和2.x两个主要版本，区别在于2.x移除了对古老的IE 6、7、8的支持，因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8。

No2：

引入jQuery

<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    ...
</head>
<body>
    ...
</body>
</html>

No3:

【选择器】

jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。

// 查找<div id="abc">:
var div = $(\'#abc\');

注意，#abc以#开头。返回的对象是jQuery对象；jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象。

返回jQuery对象如下

[<div id="abc">...</div>]

如果不存在，返回

[]
var div = $(\'#abc\'); // jQuery对象
var divDom = div.get(0); // 假设存在div，获取第1个DOM元素
var another = $(divDom); // 重新把DOM包装为jQuery对象

【按tag查找】按tag查找只需要写上tag名称就可以了：

var ps = $(\'p\'); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点

【按class查找】按class查找注意在class名称前加一个.：

var a = $(\'.red\'); // 所有节点包含`class="red"`都将返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>

查找同时包含red和green的节点

var a = $(\'.red.green\'); // 注意没有空格！
// 符合条件的节点：
// <div class="red green">...</div>
// <div class="blue green red">...</div>

使用前缀查找或者后缀查找

var icons = $(\'[name^=icon]\'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $(\'[name$=with]\'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"

【多项选择器】

多个选择器用,组合起来一块选

$(\'p,div\'); // 把<p>和<div>都选出来
$(\'p.red,p.green\'); // 把<p class="red">和<p class="green">都选出来

【层级选择器】

如果两个DOM元素具有层级关系，就可以用$(\'ancestor descendant\')来选择，层级之间用空格隔开

<!-- HTML结构 -->
<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>

要选出JavaScript，可以用层级选择器：

$(\'ul.lang li.lang-javascript\'); // [<li class="lang-javascript">JavaScript</li>]
$(\'div.testing li.lang-javascript\'); // [<li class="lang-javascript">JavaScript</li>]

【子选择器】子选择器$(\'parent>child\')类似层级选择器，但是限定了层级关系必须是父子关系，就是<child>节点必须是<parent>节点的直属子节点

$(\'ul.lang>li.lang-javascript\'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$(\'div.testing>li.lang-javascript\'); // [], 无法选出，因为<div>和<li>不构成父子关系

【过滤器】

$(\'ul.lang li\'); // 选出JavaScript、Python和Lua 3个节点

$(\'ul.lang li:first-child\'); // 仅选出JavaScript
$(\'ul.lang li:last-child\'); // 仅选出Lua
$(\'ul.lang li:nth-child(2)\'); // 选出第N个元素，N从1开始
$(\'ul.lang li:nth-child(even)\'); // 选出序号为偶数的元素
$(\'ul.lang li:nth-child(odd)\'); // 选出序号为奇数的元素

【表单相关】

  • :input：可以选择<input>，<textarea>，<select>和<button>；

  • :file：可以选择<input type="file">，和input[type=file]一样；

  • :checkbox：可以选择复选框，和input[type=checkbox]一样；

  • :radio：可以选择单选框，和input[type=radio]一样；

  • :focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$(\'input:focus\')就可以选出；

  • :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$(\'input[type=radio]:checked\')；

  • :enabled：可以选择可以正常输入的<input>、<select> 等，也就是没有灰掉的输入；

  • :disabled：和:enabled正好相反，选择那些不能输入的。

$(\'div:visible\'); // 所有可见的div
$(\'div:hidden\'); // 所有隐藏的div

No4：

【查找】

<!-- HTML结构 -->
<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>

用find()查找

var ul = $(\'ul.lang\'); // 获得<ul>
var dy = ul.find(\'.dy\'); // 获得JavaScript, Python, Scheme
var swf = ul.find(\'#swift\'); // 获得Swift
var hsk = ul.find(\'[name=haskell]\'); // 获得Haskell

如果要从当前节点开始向上查找，使用parent()方法

var swf = $(\'#swift\'); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent(\'.red\'); // 获得Swift的上层节点<ul>，同时传入过滤条件。如果ul不符合条件，返回空jQuery对象

可以通过next()和prev()方法

var swift = $(\'#swift\');

swift.next(); // Scheme
swift.next(\'[name=haskell]\'); // 空的jQuery对象，因为Swift的下一个元素Scheme不符合条件[name=haskell]

swift.prev(); // Python
swift.prev(\'.dy\'); // Python，因为Python同时符合过滤器条件.dy

No5：

【过滤】

filter()方法可以过滤掉不符合选择器条件的节点：

var langs = $(\'ul.lang li\'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter(\'.dy\'); // 拿到JavaScript, Python, Scheme

No6：

【操作DOM】

<!-- HTML结构 -->
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>
$(\'#test-ul li[name=book]\').text(); // \'Java & JavaScript\'
$(\'#test-ul li[name=book]\').html(); // \'Java &amp; JavaScript\'

【修改CSS】jQuery对象有“批量操作”的特点

<!-- HTML结构 -->
<ul id="test-css">
    <li class="lang dy"><span>JavaScript</span></li>
    <li class="lang"><span>Java</span></li>
    <li class="lang dy"><span>Python</span></li>
    <li class="lang"><span>Swift</span></li>
    <li class="lang dy"><span>Scheme</span></li>
</ul>
$(\'#test-css li.dy>span\').css(\'background-color\', \'#ffd351\').css(\'color\', \'red\');

运行结果

显示和隐藏DOM

var a = $(\'a[target=_blank]\');
a.hide(); // 隐藏
a.show(); // 显示

获取DOM信息

// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600

// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

// 某个div的大小:
var div = $(\'#test-div\');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height(\'200px\'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效
// <div id="test-div" name="Test" start="1">...</div>
var div = $(\'#test-div\');
div.attr(\'data\'); // undefined, 属性不存在
div.attr(\'name\'); // \'Test\'
div.attr(\'name\', \'Hello\'); // div的name属性变为\'Hello\'
div.removeAttr(\'name\'); // 删除name属性
div.attr(\'name\'); // undefined

 jQuery对象统一提供val()方法获取和设置对应的value属性

/*
    <input id="test-input" name="email" value="">
    <select id="test-select" name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="SZ">Shenzhen</option>
    </select>
    <textarea id="test-textarea">Hello</textarea>
*/
var
    input = $(\'#test-input\'),
    select = $(\'#test-select\'),
    textarea = $(\'#test-textarea\');

input.val(); // \'test\'
input.val(\'abc@example.com\'); // 文本框的内容已变为abc@example.com

select.val(); // \'BJ\'
select.val(\'SH\'); // 选择框已变为Shanghai

textarea.val(); // \'Hello\'
textarea.val(\'Hi\'); // 文本区域已更新为\'Hi\'

【添加DOM】

// 创建DOM对象:
var ps = document.createElement(\'li\');
ps.innerHTML = \'<span>Pascal</span>\';
// 添加DOM对象:
ul.append(ps);

// 添加jQuery对象:
ul.append($(\'#scheme\'));

// 添加函数对象:
ul.append(function (index, html) {
    return \'<li><span>Language - \' + index + \'</span></li>\';
});

【删除DOM】 

var li = $(\'#test-div>ul>li\');
li.remove(); // 所有<li>全被删除

No7：

【点击事件】

/* HTML:
 *
 * <a id="test-link" href="#0">点我试试</a>
 *
 */

// 获取超链接的jQuery对象:
var a = $(\'#test-link\');
a.on(\'click\', function () {
    alert(\'Hello!\');
});

或

a.click(function () {
    alert(\'Hello!\');
});

【鼠标事件】

click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

【键盘事件】

键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。

keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。

【其他事件】

focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。

【取消绑定】

一个已被绑定的事件可以解除绑定，通过off(\'click\', function)实现

function hello() {
    alert(\'hello!\');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off(\'click\', hello);
}, 10000);

监控文本框的内容改动

var input = $(\'#test-input\');
input.change(function () {
    console.log(\'changed...\');
});

No8：

【动画】

toggle()方法则根据当前状态决定是show()还是hide()。

var div = $(\'#test-show-hide\');
div.hide(3000); // 在3秒钟内逐渐消失

show()和hide()是从左上角逐渐展开或收缩的，而slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的。

var div = $(\'#test-slide\');
div.slideUp(3000); // 在3秒钟内逐渐向上消失

slideToggle()则根据元素是否可见来决定下一步动作

fadeIn()和fadeOut()的动画效果是淡入淡出，也就是通过不断设置DOM元素的opacity属性来实现，而fadeToggle()则根据元素是否可见来决定下一步动作

【自定义动画animate】

var div = $(\'#test-animate\');
div.animate({
    opacity: 0.25,
    width: \'256px\',
    height: \'256px\'
}, 3000, function () {
    console.log(\'动画已结束\');
    // 恢复至初始状态:
    $(this).css(\'opacity\', \'1.0\').css(\'width\', \'128px\').css(\'height\', \'128px\');
});

【串行动画】

var div = $(\'#test-animates\');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000)
   .delay(1000)
   .animate({
       width: \'256px\',
       height: \'256px\'
   }, 2000)
   .delay(1000)
   .animate({
       width: \'128px\',
       height: \'128px\'
   }, 2000);
}
</script>

No9：

【AJAX】

ajax(url, settings)函数需要接收一个URL和一个可选的settings对象，常用的选项如下：

  • async：是否异步执行AJAX请求，默认为true，千万不要指定为false；

  • method：发送的Method，缺省为\'GET\'，可指定为\'POST\'、\'PUT\'等；

  • contentType：发送POST请求的格式，默认值为\'application/x-www-form-urlencoded; charset=UTF-8\'，也可以指定为text/plain、application/json；

  • data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；

  • headers：发送的额外的HTTP头，必须是一个object；

  • dataType：接收的数据格式，可以指定为\'html\'、\'xml\'、\'json\'、\'text\'等，缺省情况下根据响应的Content-Type猜测。

\'use strict\';

function ajaxLog(s) {
    var txt = $(\'#test-response-text\');
    txt.val(txt.val() + \'\\n\' + s);
}

$(\'#test-response-text\').val(\'\');
var jqxhr = $.ajax(\'/api/categories\', {
    dataType: \'json\'
}).done(function (data) {
    ajaxLog(\'成功, 收到的数据: \' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog(\'失败: \' + xhr.status + \', 原因: \' + status);
}).always(function () {
    ajaxLog(\'请求完成: 无论成功或失败都会调用\');
});

【get】

var jqxhr = $.get(\'/path/to/resource\', {
    name: \'Bob Lee\',
    check: 1
});

【post】

var jqxhr = $.post(\'/path/to/resource\', {
    name: \'Bob Lee\',
    check: 1
});

【getJSON】

var jqxhr = $.getJSON(\'/path/to/resource\', {
    name: \'Bob Lee\',
    check: 1
}).done(function (data) {
    // data已经被解析为JSON对象了
});

No10:

【jQuery插件】

$.fn.highlight1 = function () {
    // this已绑定为当前jQuery对象:
    this.css(\'backgroundColor\', \'#fffceb\').css(\'color\', \'#d85030\');
    return this;
}
$.fn.highlight2 = function (options) {
    // 要考虑到各种情况:
    // options为undefined
    // options只有部分key
    var bgcolor = options && options.backgroundColor || \'#fffceb\';
    var color = options && options.color || \'#d85030\';
    this.css(\'backgroundColor\', bgcolor).css(\'color\', color);
    return this;
}

综上最终版

$.fn.highlight = function (options) {
    // 合并默认值和用户设定值:
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css(\'backgroundColor\', opts.backgroundColor).css(\'color\', opts.color);
    return this;
}

// 设定默认值:
$.fn.highlight.defaults = {
    color: \'#d85030\',
    backgroundColor: \'#fff8de\'
}

编写一个jQuery插件的原则：

  1. 给$.fn绑定函数，实现插件的代码逻辑；
  2. 插件函数最后要return this;以支持链式调用；
  3. 插件函数要有默认值，绑定在$.fn.<pluginName>.defaults上；
  4. 用户在调用时可传入设定值以便覆盖默认值。

No11：

【针对特定元素的扩展】

$(\'#main a\').external();
$.fn.external = function () {
    // return返回的each()返回结果，支持链式调用:
    return this.filter(\'a\').each(function () {
        // 注意: each()内部的回调函数的this绑定为DOM本身!
        var a = $(this);
        var url = a.attr(\'href\');
        if (url && (url.indexOf(\'http://\')===0 || url.indexOf(\'https://\')===0)) {
            a.attr(\'href\', \'#0\')
             .removeAttr(\'target\')
             .append(\' <i class="uk-icon-external-link"></i>\')
             .click(function () {
                if(confirm(\'你确定要前往\' + url + \'？\')) {
                    window.open(url);
                }
            });
        }
    });
}

 

以上是关于JavaScriptjQuery的主要内容，如果未能解决你的问题，请参考以下文章

JavaScriptjQuery杂记

JavaScriptjQuery（获取选择器）

简单分享javascriptjquery实用demo

javascriptjquery获取网页的高度和宽度

javascriptJQuery动态添加元素

JavaScriptjQuery操作页面