jQuery学习笔记（简介，选择器）

jQuery优势

1. 强大的选择器。jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。

2. 出色的DOM操作封装

3. 可靠的事件处理机制

4. 完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.Ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

5. 出色的浏览器兼容性。jQuery2.0版本以后已经不再支持IE 6/7/8版本。

6. 链式操作方式

7. 隐式迭代。当使用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。

8. 行为层与结构层的分离。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种行为层与结构层分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。

DOM对象与jQuery对象的相互转换

建议变量命名风格，如果是jQuery对象的变量，建议以$打头。如：

var $variable = jQuery对象

如果是正常的DOM对象，则不用，正常命名即可。如：

var variable = DOM对象

1. jQuery对象转换为DOM对象

jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。示范代码分别如下：

var $cr = $("#cr");
var cr = $cr[0];
alert(cr.checked);

var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked);

2. 将DOM对象转换为jQuery对象

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

var cr = document.getElementById("cr");
var $cr = $(cr);

jQuery选择器

需要注意，$("#tt")获取的永远是对象，即使是网页上没有此元素。只能通过此对象的长度来判断元素是否真实存在。比如：

if($("#tt")) {
    // do something, wrong
}

if($("#tt").length > 0) {
    // do something, correct
}

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

1. 基本选择器

基本选择器通过id、class的标签我等来查找DOM元素。

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$("#test")选取id为test的元素
.class	根据给定的类名匹配元素	集合元素	$(".test")选取所有class为test的元素
element	根据给定的元素名匹配元素	集合元素	$("p")选取所有的<p>元素
*	匹配所有元素	集合元素	$("*")选取所有的元素
selector1,selector2, ......,selectorN	将每一个选择器匹配到的元素合并后一起返回	集合元素	$("div,span,p.myClass")选取所有<div>， <span>和拥有class为myClass的p>标签的一组元素

2. 层次选择器

层次选择通过DOM元素之间的层次关系来获取特定元素。例如：后代元素、子元素、相邻元素和同辈元素等。

选择器	描述	返回	示例
$("ancestor descendant")	选取ancestor元素里的所有descendant（后代）元素	集合元素	$("div span")选取<div>里的所有的<span>元素
$("parent > child")	选取parent元素下的child（子）元素， 与$("ancestor descendant")有区别， $("ancestor descendant")选择的是后代元素	集合元素	$("div > span")选取<div>元素下元素名是span>的子元素
$("prev + next")	选择紧接在prev元素后面的next元素	集合元素	$(".one + div")选取class为one的下一个<div>同辈元素
$("prev ~ siblings")	选取prev元素之后的所有siblings元素	集合元素	$("#two ~ div")选取id为two的元素后面的所有<div>同辈元素

可以使用next()方法来代替$("prev + next")选择器；也可以用nextAll()方法来代替$("prev ~ siblings")选择器。示范：

//选取#prev之后的所有同辈div元素
$("#prev ~ div").css("background","#bbffaa");
//同上
$("#prev").nextAll("div").css("background","#bbffaa");
//选取#prev所有的同辈元素，无论前后位置
$("#prev").siblings("div").css("background","#bbffaa");

3. 过滤选择器

过滤选择器主要是通过特定的过滤规则筛选出所需的DOM元素，过滤规则与CSS中的伪类选择语法相同，以一个冒号（:）开头。 按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

3.1 基本过滤选择器

选择器	描述	返回	示例
:first	选取第一个元素	单个元素	$("div:first")选取所有<div>元素中第一个<div>元素
:last	选取最后一个元素	单个元素	$("div:last")选取所有<div>元素中最后一个<div>元素
:not(selector)	去除所有与给定选择器材匹配的元素	集合元素	$("input:not(.myClass)")选取class不是myClass的<input>元素
:even	选取索引是偶数的所有元素，索引从0开始	集合元素	$("input:even")选取索引是偶数的<input>元素
:odd	选取索引是奇数的所有元素，索引从0开始	集合元素	$("input:odd")选取索引是奇数的<input>元素
:eq(index)	选取索引等于index的所有元素（index从0开始）	集合元素	$("input:eq(1)") 选取索引等于1的<input>元素
:gt(index)	选取索引大于index的所有元素（index从0开始）	集合元素	$("input:gt(1)") 选取索引大于1的<input>元素
:lt(index)	选取索引小于index的所有元素（index从0开始）	集合元素	$("input:lt(1)") 选取索引小于1的<input>元素
:header	选取所有标题元素，例如：h1,h2,h3,......	集合元素	$("header")选取网页中所有的<h1>,<h2>,......
:animated	选取当前正在执行动画的所有元素	集合元素	$("div:animated")选取正在执行动画的<div>元素
:focus	选取当前获取焦点的所有元素	集合元素	$("focus")选取当前获取焦点的元素

3.2 内容过滤选择器

选择器	描述	返回	示例
:contains(text)	选取含有文本text的元素	集合元素	$("div:contains('我')")选取含有文本“我”的<div>元素
:empty	选取不包含子元素或者文本为空的元素	集合元素	$("div:empty")选取不包含子元素（包括文本元素）的<div>空元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$("div:has(p)")选取含有<p>的<div>元素
:parent	选择含有子元素或者文本的元素	集合元素	$("div:parent")选取含有子元素（包括文本元素）的<div>元素

3.3 可见性过滤选择器

选择器	描述	返回	示例
:hidden	根据给定的id匹配一个元素	集合元素	$(":hidden")选取所有不可见的元素。 包括<input type="hidden"/>， <div style="dislay:none;">， <div style="visibility:hidden;">等元素
:visible	根据给定的类名匹配元素	集合元素	$(div":visible")选取所有可见<div>元素

3.4 属性过滤选择器

选择器	描述	返回	示例
[attribute]	选取拥有此属性的元素	集合元素	$("div[id]")选取拥有属性idi的<div>元素
[attribute=value]	选取属性的值为value的元素	集合元素	$("div[title=test]")选取属性title为“test”的<div>元素
[attribute!=value]	选取属性的值不等于value的元素	集合元素	$("div[title=test]")选取属性title不等于的<div>元素 （注意：没有属性title的元素也会被选取）
[attribute^=value]	选取属性的值以value开始的元素	集合元素	$("div[title^=test]")选取属性title以“test”开始的<div>元素
[attribute$=value]	选取属性的值以value结尾的元素	集合元素	$("div[title￥=test]")选取属性title以“test”结尾的<div>元素
[attribute*=value]	选取属性的值含有value的元素	集合元素	$("div[title^=test]")选取属性title含有“test”的<div>元素
[attribute|=value]	选取属性等于给定字符串或以该字符串为前缀的元素（-）	集合元素	$("div[title|='en']")选取属性title等于en或以en为前缀的元素。如：en-books。
[attribute~=value]	选取属性用空格分隔的值中包含一个给定值的元素	集合元素	$("div[title~='uk'")选取属性title用空格分隔的值中包含字符uk的元素。
[attribute1][attribute2] [attributeN]	用属性选择器合并成一个复合属性选择器，满足多个条件。 每选择一次，缩小一次范围。	集合元素	$("div[id][title$='test']")选取拥有属性id，并且属性title以“test”结尾的<div>元素

3.5 子元素过滤选择器

选择器	描述	返回	示例
:nth-child (index/even/odd/equation)	选取每个父元素下的第index个子元素或者奇偶元素。（index从1开始）	集合元素	$("div.one :nth-child(2)")选取class为one的<div>父元素下的第2个子元素
:first-child	选取每个父元素的第1个子元素	集合元素	$("div.one :first-child")选取class为one的<div>父元素下的第1个子元素
:last-child	选取每个父元素的最后一个子元素	集合元素	$("div.one :last-child")选取class为one的<div>父元素下的第最后一个子元素
:only-child	选择每个父元素的独子元素（非独子、空集不算）	集合元素	$("div.one :only-child")选取class为one的<div>父元素下仅有一个元素的元素

4. 表单选择器

选择器	描述	返回	示例
:enabled	选取所有可用元素	集合元素	$("#form1 :enabled")选取id为“form1”的表单内的所有可用元素
:disabled	选取所有不可用元素	集合元素	$("#form1 :disabled")选取id为“form1”的表单内的所有不可用元素
:checked	选取所有被选中的元素（单选框、复选框）	集合元素	$("input :checked")选取所有被选中的<input>元素
:selected	选择所有被选中的选项元素（下拉列表）	集合元素	$("select option:selected")选取所有被选中的选项元素