jQuery

jQuery 的基本设计思想和主要用法：“选择某个网页元素，然后对其进行某种操作”。

[ jQuery 1.12.1 速查手册？！ ] 这是它区别于其他 JS 库的根本特点。

引入 jQuery文件 + 复制代码而已（引入插件的文件、添加加载事件 ... ）

[ ~~jQueryUI~~ ] 引入 jQueryUI 样式文件 _ 引入 jQuery _ 引入 jQueryUI 的 JS 文件 _ 使用 jQueryUI 的功能

选择元素（选择器）

使用 jQuery 的第一步，往往是将一个选择表达式放进构造函数 jQuery() 中，简写为 $()，从而得到被选中的元素。

[1] 模拟 CSS 选择器

$(document)    // 选择整个文档对象
$('#myId')     // id选择器
$('.myClass')    // 类选择器
$('input[name=first]')    // 属性选择器
$("#div li") 或 $("ul li")  或  $(".cls li")   // 后代选择器
$("#div>span") 或 $("ul>li")  或  $(".cls>li")     // 子选择器

$(document) // 选择整个文档对象

$('#myId') // id选择器

$('.myClass') // 类选择器

$('input[name=first]') // 属性选择器

$("#div li") 或 $("ul li") 或 $(".cls li") // 后代选择器

$("#div>span") 或 $("ul>li") 或 $(".cls>li") // 子选择器

[2] 特有表达式选择

$('a:first')      // 选择网页中第一个a元素
$('tr:odd')     // 选择表格的奇数行
$('#myForm :input')     // 选择表单中的input元素
$('div:visible')      // 选择可见的div元素
$('div:animated')      //  选择当前处于动画状态的div元素

// 索引选择器（）
$('div:eq(3)')   // 获取索引的元素
$('div:gt(3)')   // 索引大于3的所有元素
$('div:lt(3)')   // 索引小于3的所有元素

$('a:first') // 选择网页中第一个a元素

$('tr:odd') // 选择表格的奇数行

$('#myForm :input') // 选择表单中的input元素

$('div:visible') // 选择可见的div元素

$('div:animated') // 选择当前处于动画状态的div元素

// 索引选择器（）

$('div:eq(3)') // 获取索引的元素

$('div:gt(3)') // 索引大于3的所有元素

$('div:lt(3)') // 索引小于3的所有元素

[3] 多种筛选方法

$('div').has('p');      // 选择包含p元素的div元素
$('div').not('.myClass');     // 选择class不等于myClass的div元素
$('div').filter('.myClass');     // 选择class等于myClass的div元素
$('div').first();     // 选择第1个div元素
$('div').eq(5);     // 选择第6个div元素（索引为5，从0开始）

$('div').has('p'); // 选择包含p元素的div元素

$('div').not('.myClass'); // 选择class不等于myClass的div元素

$('div').filter('.myClass'); // 选择class等于myClass的div元素

$('div').first(); // 选择第1个div元素

$('div').eq(5); // 选择第6个div元素（索引为5，从0开始）

写法

[1] 方法函数化：原生 JS 中，赋值操作符用的比较多。而，在 jQuery 中，多使用函数传参的方式，即方法函数化。

// 原生      window.onload = function(){};
// jQuery    $(function(){});

// 原生       div.onclick = function(){};
// jQuery    div.click(function(){});

// 原生       div.innerHTML = '123';
// jQuery    div.html('123');

// 原生 window.onload = function(){};

// jQuery $(function(){});

// 原生 div.onclick = function(){};

// jQuery div.click(function(){});

// 原生 div.innerHTML = '123';

// jQuery div.html('123');

[2] 链式操作：选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来。

它的原理在于：每一步的 jQuery 操作，返回的都是一个 jQuery 对象，所以不同操作可以连在一起。

也就是说，多行代码合并为一行代码，前提是要认清此行代码发挥的是不是对象，是对象才能进行链式编程。

$('div').find('h3').eq(2).html('Hello'); 分解开来，就是下面这样： $('div') //找到div元素 .find('h3') //选择其中的h3元素 .eq(2) //选择第3个h3元素 .html('Hello'); //将它的内容改为Hello

1
2
3
4
5
6
7

$('div').find('h3').eq(2).html('Hello');

分解开来，就是下面这样：
    $('div') //找到div元素
      .find('h3') //选择其中的h3元素
        .eq(2) //选择第3个h3元素
          .html('Hello'); //将它的内容改为Hello

jQuery 还提供了 .end() 方法，使得结果集可以后退一步。

$('div') .find('h3') .eq(2) .html('Hello') .end() // 退回到选中所有的h3元素的那一步 .eq(0) // 选中第一个h3元素 .html('World'); // 将它的内容改为World

1
2
3
4
5
6
7

$('div')
.find('h3')
.eq(2)
.html('Hello')
.end()    // 退回到选中所有的h3元素的那一步
.eq(0)    // 选中第一个h3元素
.html('World');    // 将它的内容改为World

[3] 取赋值合体：操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。jQuery 使用同一个函数来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。

$('h1').html();     // html()没有参数，表示取出h1的值
$('h1').html('Hello');      // html()有参数Hello，表示对h1进行赋值

$('h1').html(); // html()没有参数，表示取出h1的值

$('h1').html('Hello'); // html()有参数Hello，表示对h1进行赋值

常见的取值和赋值函数如下：

.html() 取出或设置html内容 .text() 取出或设置text内容 .attr() 取出或设置某个属性的值 .width() 取出或设置某个元素的宽度 .height() 取出或设置某个元素的高度 .val() 取出某个表单元素的值

1
2
3
4
5
6
7

.html()        取出或设置html内容
.text()          取出或设置text内容
.attr()          取出或设置某个属性的值
.width()       取出或设置某个元素的宽度
.height()      取出或设置某个元素的高度
.val()           取出某个表单元素的值

需注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值。.text() 例外，它取出所有元素的 text 内容。

[ JS 库 ] 一个普通的 JS 文件，里面封装了很多兼容性的函数，可以在不同的浏览器下运用、执行。

普通 JS 的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。

因此，出现了很多 JS 的封装库。如，Prototype、YUI、Dojo、ExtJS、jQuery 等。

这些库对 JS 进行了封装，简化了开发。也就是说，这些库是对 JS 的封装，内部都是用 JS 来实现的。

1. Prototype 网址 http://www.prototypejs.org 2. YUI 网址 http://developer.yahoo.com/yui 3. Ext JS 网址 http://www.extjs.com http://extjs.org.cn 4. Moo Tool 网址 http://mootools.net 5. jQuery 网址 http://jquery.com

1
2
3
4
5

1. Prototype  网址  http://www.prototypejs.org
2. YUI        网址  http://developer.yahoo.com/yui
3. Ext JS     网址  http://www.extjs.com  http://extjs.org.cn
4. Moo Tool   网址  http://mootools.net
5. jQuery     网址  http://jquery.com

jQuery 简介

现阶段，jQuery 可能已经不再是人们话题的焦点，人们更多的是在讨论 Vue、React、Angular。但，jQuery 的使用量依然十分的广泛，据统计，它仍然是目前使用率最高的 JS 库。它简化了 JS 的复杂操作，不需要再去关心兼容性，提供了大量的实用方法。jQuery 的简单易用，使其常常成为人们在过去不学习原生 JS 的一个借口 ...

[1] 定义：jQuery 是 JS 语法写的一些函数类，内部仍调用 JS 实现，所以并不是替代 JS（而是进阶、辅助工具）。

使用 jQuery 编写 jQuery 的扩展插件等仍然需要 JS 技术，jQuery 本身就是一堆 JS 函数。

jQuery 是 JS 库（封装了很多 JS 代码的一个 JS 文件，就是一个库）中的一种。

即，jQuery 是用 JS 编写的函数库，有些功能 jQuery 没有封装，则还需要通过自己写 JS 来实现。

[2] 为什么要学习 jQuery ？

DOM 中的一个简单的功能可能需要大量的代码；

DOM 中兼容的问题很多；

DOM 中代码的容错性很差；

DOM 中 window.onload 只能有一个；

......

[ 好处 ] jQuery 的特点？ Write Less, Do More.

很好的解决了不同浏览器的 JS 兼容问题（IE 6.0+、FF 2+、Safari 3.0+、Opera 9.0+、Chrome）；CSS 还是有问题的；对于不同控件具有统一的操作方式。

体积小（几十 KB）、使用简单方便、链式编程、隐式迭代、插件丰富（缺什么，找什么）、开源、免费。

让编写 JS 程序更简单、更强大！学习 jQuery 不必过多考虑兼容问题。

[ 拓展 - jQuery 版本 ]

jQuery 从 2.0 版本开始不再支持 IE8- 浏览器，且去掉了一些过时的 API，从而使体积更小，运行速率更高。

所以，如果有兼容 IE8- 浏览器的需求，需要使用 jQuery1.* 版本。

jQuery 的引入方式

在 HTML 中引入 jQuery 插件的方法有以下两种：

[1] CDN 引入：在 head 标签中加入下列代码。

<head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> </head>

1
2
3

<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>

[2] 本地引入（要求本地有 jquery.js，官网 www.jquery.com；另，min 版在功能上没有区别，只是体积更小）

<head> <script src="./jquery.js"></script> </head>

1
2
3

<head>
<script src="./jquery.js"></script>
</head>

jQuery 中的顶级对象

BOM 中的顶级对象：window，浏览器和页面中的所有东西都是 window 的；

DOM 中的顶级对象：document。

[1] jQuery 中的顶级对象：jQuery，一般用 $ 符号来代替。

如果想要使用 jQuery 中的属性和方法，那么需要通过 jQuery.属性或 jQuery.方法来实现。

简单写法：$.属性或 $.方法

大多数情况下，jQuery中几乎都是方法，属性很少。 jQuery中几乎把DOM中的事件都封装成了一个方法，在jQuery中几乎是把on去掉，就变成方法了。 // DOM中的注册事件 document.getElementById("id属性值").onclick=匿名函数; // jQuery中注册事件 $("#id属性值").click(匿名函数);

1
2
3
4
5
6
7
8

大多数情况下，jQuery中几乎都是方法，属性很少。
jQuery中几乎把DOM中的事件都封装成了一个方法，在jQuery中几乎是把on去掉，就变成方法了。

// DOM中的注册事件
document.getElementById("id属性值").onclick=匿名函数;

// jQuery中注册事件
$("#id属性值").click(匿名函数);

与 jQuery 对象相对应的就是 DOM 对象，DOM 对象其实就是 DOM 元素节点对象。

如果通过 DOM 获取，则为 DOM 对象；如果通过 $ 或 jQuery 方式获取，则为 jQuery 对象。

需要注意的是，jQuery 对象无法使用 DOM 对象的方法，DOM 对象也无法使用 jQuery 对象的方法。

[ 判断共存 ] 一般的，DOM 对象在使用之前需要判断存在，防止出错。

if(document.getElementById('#test')){ document.getElementById('#test').style.color = 'red'; }

1
2
3

if(document.getElementById('#test')){
    document.getElementById('#test').style.color = 'red';
}

对于 jQuery 对象来说，因为 $() 获取到的永远是对象，即使网页上没有该元素。~~所以不能采用下面方式判断~~：

if($(#test)){ // }

1
2
3

if($(#test)){
    //
}

而应该根据获取到元素的长度来判断或转换成 DOM 对象来判断：

if($(#test).length){ // } 或 if($(#test)[0]){ // }

1
2
3
4
5
6
7
8
9

if($(#test).length){
    //
}

或

if($(#test)[0]){
    //
}

[2] jQuery 对象与 DOM 对象的相互转换

DOM 转 jQuery 对象

对于一个 jQuery 对象，只需要用 $() 把DOM对象包装起来，就可以获得一个 jQuery 对象。

jQuery 转 DOM 对象

jQuery 是一个类数组对象，可以通过 [index] 或 get(index) 的方法得到相应的 DOM 对象。

console.log(document === $(document)[0]); // true console.log(document === $(document).get(0)); // true

1
2

console.log(document === $(document)[0]); // true
console.log(document === $(document).get(0)); // true

为什么把 DOM 对象转 jQuery 对象，又为什么把 jQuery 对象转 DOM 对象？

DOM 操作较麻烦（兼容，一个功能需要大量代码） — 转 jQuery对象，操作简单，不需要写兼容。

jQuery 操作中，有些兼容未封装在 jQuery 中 — 转 DOM 对象，通过原生的 JS 代码实现功能；若之后都解决了，想简单的写代码操作内容，再转回 jQuery 对象。