jQuery简介、jQuery基础、jQuery选择器及选取方法

jQuery是什么

jQuery是第三方开发的执行DOM操作的极简化的JavaScript函数库。

这里需要注意的是：

1. 第三方：第三方意味着使用jQuery需要下载。
2. 执行DOM操作：学习jQuery还是在学习DOM，jQuery还是在执行DOM的增删改查+事件绑定操作。
3. 极简化：jQuery是对DOM操作的终极简化。

jQuery的原理

jQuery类库的关键原理是查询。一个典型的jQuery查询使用CSS选择器来识别一组文档元素，并返回一个对象来表示这些元素。返回的对象提供了大量有用的方法来批量操作匹配元素。这些方法尽可能返回调用对象的本身，这使得简洁的链式调用成为可能。

关于jQuery底层原理的理解

第一种说法

jQuery类库定义了一个全局函数：jQuery()。因为这个函数使用频繁，因此在类库中给它定义了一个快捷别名：$。这个 jQuery在全局定义的唯一两个变量。

这个拥有两个名字的全局方法就是jQuery的核心查询方法。该方法返回的值表示零个或多个DOM元素，这个返回值就是jQuery对象。注意jQuery是工厂函数，不是构造函数，它返回一个新创建的对象，但并没有和new关键字一起使用。

jQuery对象中定义了很多方法，用来操作他们所表示的元素。

在jQuery中，jQuery对象中的方法返回的也是jQuery对象，因此在调用了一个jQuery对象的方法后可以紧接着调用下一个jQuery对象的方法，这种调用被称为链式调用。在jQuery中，链式调用非常普遍。

另一种说法

引入jQuery后，会在内存中创建一个新的类型：jQuery。这个类型包括构造函数和原型对象。

1. 构造函数：构建jQuery对象。
2. 原型对象：保存jQuery对象的方法。

jQuery术语

jQuery函数

在《JavaScript权威指南（第6版）》中，对jQuery函数有两种解释。

• 指jQuery()或$()。该函数用来创建jQuery对象，用来注册DOM就绪时需要调用的处理程序，还用来做jQuery的命名空间。当jQuery函数指的是jQuery()或$()时，jQuery函数也可以被称为“全局jQuery对象”。
• 指定义在jQuery命名空间中函数，当jQuery函数用作此意义时，jQuery函数也可以被成为“静态方法”。

jQuery对象

jQuery对象是由jQuery函数返回的对象。一个jQuery对象表示一组文档元素，也叫做jQuery结果、jQuery集或包装集。

选中元素

当传递CSS选择器给jQuery函数时，它返回的jQuery对象表示匹配该选择器的文档元素集，即当前jQuery对象所匹配的元素。

jQuery方法

jQuery方法是由jQuery函数返回的jQuery对象的方法。

jQuery的优点

JavaScript的核心API设计的很简单，但由于浏览器之间的严重不兼容性，导致客户端的API过于复杂。使用JavaScript框架或工具类库（jQuery）能简化通用操作，隐藏浏览器之间的差异。

jQuery的缺点

1. 没有彻底的简化DOM操作，代码步骤并没有减少。
2. 没有移动端，jQuery只能用于PC端。

jQuery基础

获取jQuery

jQuery类库是免费软件，可以从jQuery官网下载该软件。下载后，像下面这样通过<script>元素在web页面中引入：

<script src="jquery-1.4.2.min.js"></script>

文件名中的“min”表示引入的是压缩版本的类库，压缩版本去除了不必要的注释和空格，变量名等内部标识符也替换成了更短的名字。

同时jQuery也支持使用CDN方式引入，CDN即内容分发网络，所以使用CDN网络引入就是使用URL地址引入jQuery，常见的URL如下所示：

http://code.jquery.com/jquery-1.4.2.min.js
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

对应的CDN方式如下：

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- 上述三个引用任何一个都可以 -->

jQuery选择器

jQuery选择器语法分为三层结构。简单选择器、组合选择器、选择器组。

简单选择器

简单选择器的开头部分（显式或隐式地）是标签类型的声明。如果选取的元素和标签类型无关，则使用通配符“*”来代替。如果选择器没有以标签名或通配符开头，则默认含有一个通配符。

标签名或通配符制定了备选文档元素的一个初始集。在简单选择器中，标签类型之后的部分由零个或多个过滤器组成。过滤器从左到右应用，每一个过滤去都会缩小选中元素集。

jQuery选择过滤器

过滤器	含义
#id	匹配id属性为id的元素
.class	匹配class属性含有class单词的所有元素
[attr]	匹配拥有attr属性（和值无关）的所有元素
[attr=val]	匹配拥有attr属性且值为val的所有元素
[attr!=val]	匹配没有attr属性、或attr属性的值不为val的所有元素
[attr^=val]	匹配attr属性值以val开头的元素
[attr$=val]	匹配attr属性值以val结尾的元素
[attr*=val]	匹配attr属性值含有val的元素
[attr~=val]	当attr属性解释为一个由空格分隔的单词列表时，匹配其中包含单词val的元素
[attr|=val]	匹配arrt属性值以val开头且其后没有其他字符，或其他字符是以连字符开头的元素
:animated	匹配正在动画中的元素，该动画是由jQuery产生的
:button	匹配<button type="button">和<input type="button">的元素
:checkbox	匹配<inpur type="checkbox">的元素
:checked	匹配选中的input元素
:contains(text)	匹配含有指定text文本的元素（textContent和innerText属性的值）
:disabled	匹配禁用的元素
:empty	匹配没有子节点、没有文本内容的元素
:enabled	匹配没有禁用的元素
:eq(n)	匹配基于文档顺序、序号从开始的选中列表中的第n个元素
:even	匹配列表中偶数序号的元素。因为第一个元素的序号是0，所以实际选中为1、3、5
:flie	匹配<input type="file">元素
:first	匹配列表中的第一个元素
:first-child	匹配的元素是其父节点的第一个元素
:gt(n)	匹配基于文档顺序，序号从0开始的选中列表中序号大于n的元素
:has(sel)	匹配的元素拥有匹配内嵌选择器sel的子孙元素
:header	匹配所有头元素：<h1>~<h6>
:hidden	匹配所有在屏幕上不可见的元素
:image	匹配<input type="image">元素
:input	匹配用户输入元素：<input>、<textarea>、<select>和<button>
:last	匹配选中列表中的最后一个元素
:last-child	匹配的元素是其父节点的最后一个子元素
:lt(n)	匹配基于文档顺序、序号从0开始的选中列表中序号小于n的元素
:not(sel)	匹配的元素不匹配内嵌选择器sel
:nth(n)	与“eq(n)”相同
:nth-child(n)	匹配的元素是其父节点的第n个子元素。n可以是数值、单词even和单词odd或计算公式
:odd	匹配列表中奇数序号的元素
:only-child	匹配那些是其父节点唯一子节点的元素
:parent	匹配是父节点的元素，这与“empty”相反
:password	匹配<input type="password">元素
:radio	匹配<input type="radio">元素
:reset	匹配<input type="reset">和<button type="reset"元素>
:selected	匹配<option>元素
:submit	匹配<input type="submit">和<button type="submit">元素
:text	匹配<input type=""text>元素
:visible	匹配所有当前可见的元素

组合选择器

使用特殊操作符或“组合符”可以将简单选择器组合起来，表达文档树中元素之间的关系。

jQuery组合选择器

组合方式	含义
A    B	从匹配选择器A的元素的子孙元素中，选取匹配选择器B的文档元素
A    >    B	从匹配选择A的元素的子元素中，选取匹配选择器B的文档元素
A    +    B	从匹配选择器A的元素的下一个兄弟元素中，选择匹配选择器B的文档元素
A    ~    B	从匹配选择器A的元素后面的兄弟元素中，选取匹配选择器B的文档元素

组合选择器并不限于组合两个选择器，三个甚至更多也是被允许的。

选择器组

传递给$()函数的选择器就是选择器组，这是一个逗号分隔的列表，由一个或多个简单选择器或组合选择器构成。选择器组匹配的元素只要匹配该选择器组中的任何一个选择器就行。

选取方法

除了$()函数支持的选择器语法，jQuery还定义了一些选取方法。大部分jQuery方法都是在选中元素中执行某种操作。选取方法不一样：它们会修改选中的元素集。

first()

返回一个新的jQuery对象，仅包含旧jQuery对象选中元素中的第一个元素。

实例1-1：

       HTML代码：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

      JavaScript代码：

// 选中所有的li元素
var lis = $("ul li");

// 使用first()方法选中第一个li元素并打印其中的内容
console.log(lis.first().html());    //结果：1

last()

返回一个新的jQuery对象，仅包含旧jQuery对象选中元素中的最后一个元素。

修改实例1-1中的JavaScript代码：

// 选中所有的li元素
var lis = $("ul li");

// 使用first()方法选中第一个li元素并打印其中的内容
console.log(lis.last().html());    //结果：5

eq(n)

返回一个新的jQuery对象，只包含旧jQuery对象选中元素中的第n个元素，这里的序号n从0开始数起。

实例1-2：

       HTML代码：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

      JavaScript代码：

// 获取所有的li元素
var lis = $("ul li");

// 获取li元素中序号为3的元素（实际上是第4个元素）
console.log(lis.eq(3).html());   // 结果：4

slice(a,b)

sclice()方法接收两个参数a和b，参数a是开始的序号，参数b是结束的序号。sclice()方法返回一个新的对象，新对象的元素集是旧元素中从序号a到序号b之间所有的元素组成的元素集（包含a但不包含b）。

实例1-3：

      HTML代码：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

    JavaScript代码：

// 获取所有的li元素
var lis = $("ul li");

// 打印slice(2,4)的结果
console.log(lis.slice(2, 4))

// 使用循环打印slice(2,4)的结果
for (var i = 0; i < lis.slice(2, 4).length; i++) {
    console.log(lis.slice(2, 4)[i]); // 结果：<li>3</li>  <li>4<li>
    console.log(lis.slice(2, 4)[i].html()); // 结果：报错 
    console.log(lis.slice(2, 4).eq(i).html()); // 结果：3   4
}

观察上述代码可以发现，slice()返回的新对象中，元素在元素集的序号就是对应元素的键。但是由序号和对应元素生成的键值对中并不包含jQuery方法，因此实例1-3中console.log(lis.slice(2, 4)[i].html())语句会报错。打印lis.slice(2, 4)会得到以下结果：

slice(2,4)打印结果

filter()

filter()的参数有三种，选择器字符串、jQuery对象、判断函数。filter()函数返回调用它的jQuery对象与传入的元素集的交集。

not()

not()和filter()的用法相同，但含义相反，返回调用它的jQuery对象的元素集中除去传入元素集。

has()

has()接收一个选择器，返回一个新的jQuery对象，仅包含子孙元素与has()接收的选择器相匹配的元素。

add()

返回一个jQuery对象，包含原来的元素集以及传入add()方法的元素集。add()方法会对生成的jQuery对象进行去重和排序。

find()

匹配当前元素集中元素的子孙元素中，符合条件的子孙元素集。

children()

返回每一个选中元素的直接子元素。

contents()

返回每一个选中节点的所有子节点，包含文本节点。如果元素集中包含<iframe>元素，则还会返回该<iframe>内容的文档对象。

next()

返回每一个选中元素的下一个兄弟元素。

prev()

返回每一个选中元素的上一个兄弟元素。

nextAll()

返回每一个选中元素后面所有兄弟元素。

prevAll()

返回每一个选中元素前面所有兄弟元素。

siblings()

返回每一个选中元素的所有兄弟元素。

nextUntil()

接收一个选择器参数，按照顺序查找后面的兄弟元素，直到找到匹配到的兄弟选择器。

prevUntil()

接收一个选择器参数，按照顺序查找前面的兄弟元素，直到找到匹配到的兄弟选择器。

parent()

返回每一个选中元素的父节点。

parents()

返回每一个元素的祖先节点，直到找到<html>为止。

parentsUntil()

返回每一个选中元素的祖先元素，直到出现匹配指定选择器的第一个祖先元素。

closest()

必须传入一个选择器字符串，会返回每一个选中元素的祖先元素中匹配该选择器的最近的一个祖先元素（如果有的话）。

end()

还原匹配元素集。