jQuery选择器

1 基本选择器

• id选择器
  根据id来匹配元素，示例：$(id)或者$(“#id")。

• 类选择器
  根据class来匹配元素数组，示例：$(“.class")。

• 属性选择器
  根据属性来匹配选择器：
  $(“[attr]")：匹配所有有attr属性的选择器
  $(“[attr=val]")：匹配所有attr属性=val的选择器
  $(“[attr!=val]")：匹配所有attr属性不=val的选择器
  $(“[attr^=val]")：匹配所有attr属性的值以val开头的选择器
  $(“[attr$=val]")：匹配所有attr属性的值以val结尾的选择器
  $(“[attr*=val]")：匹配所有attr属性的值含有val的选择器
  $(“[attr~=val]")：匹配所有attr属性（此时该属性解析为单词数组）的值有val完整单词的选择器

• type选择器
  匹配所有input的type值的情况，如$(":text")。

• DOM节点选择器
  :empty：没有任何子节点（包括元素和文本节点）的元素
  :eq(n)/:gt(n)/:lt(n)/:nth(n)：匹配选中列表中，等于/大于/小于/等于 序号n的元素
  :even/:odd：匹配偶数/奇数序号的元素
  :first/:last：匹配选中列表 第一个/最后一个 元素
  :first-child/:last-child：匹配其父元素和所有兄弟元素的第一个/最后一个 同类型元素
  :nth-child(n)：匹配选中列表中，第n个元素（其中n可以是数值，even，odd,形如an+b的表达式。此时的n从1开始）
  :only-child：匹配只有一个子节点的元素
  :parent：匹配是父节点的元素

• 其他扩展选择器
  :animated：匹配由jQuery产生的正在动画的元素
  :enabled/:disabled：匹配（未）被禁用的元素
  :selected：匹配下拉选中的元素
  :visible/:hidden：匹配所有占位置/不占位置的元素
  :has(sel)/:not(sel)：匹配有/没有 选择器sel元素 的元素。
  :header：匹配所有 < h1> < h2>等等的h标签。
  :input：匹配所有的input。

说明：
1、在DOM节点选择器中，除nth-child(n)所有的n都是从0开始计数的。
2、:hidden只匹配type=hidden或者display:none的元素。不匹配visibility:hidden的元素。
3、:visible匹配所有非:hidden的元素
4、同一选择器多次过滤，注意不要加空格，否则就变成在子孙节点中过滤。

//匹配type=text且class以x开头的元素
console.log($("input[type=text][class^=x]"));

5、选择器的扩展：

$.expr[":"].x = function (e) {
    return e.type === 'button’;//函数要求返回布尔值，只记录函数计算为true的元素
};
//使用
console.log($(“:x”));

---

2 组合选择器

将基本选择器进行组合构建的选择器。

组合方式	说明
A B	在A的子孙元素中选取匹配B选择器的元素。注意AB间有空格。
A>B	在A的子元素中选取匹配B选择器的元素。
A+B	匹配A的下一个元素（忽略文本、注释节点）,选取匹配B的元素，若下一个元素不匹配，则没有。
A~B	匹配A后面的所有兄弟元素，选取匹配B的元素

---

选择器组

用逗号将选择器隔开，返回组合的结果（并集），并按照文档顺序排序。

console.log($(".x00,.x04,:button"));//返回所有含有class=x00或者class=x04或者type=button的文档元素

---

DOM选取方法

方法名	示例	说明
.first()/.last()	$("input").first() $("input").last()	当前选中列表的第一个/最后一个元素
.eq(n)	$("input").eq(1)	当前选中列表的第n个元素（n从0开始）
.slice()	$("input").slice(1,3) $("input").slice(1)	类似数组的slice方法。从下表a开始到下表b的区间元素。[a,b)
.fliter()	$("input").filter($(".x01")) $("input").filter(".x01") $("input").filter(function (i) {return i==1;})	在当前所选区间的过滤。 传入jQ对象或者选择器效果一样。 传入函数时，过滤的结果为true的元素。
.not()	$("input").not(".x01")	在当前所选列表中不包含选择器的所有元素
.has()	$("div").has(".x01")	在当前所选列表中，其子孙元素包含选择器的所有元素。该方法只针对当前所选列表的子孙元素过滤，但返回当前所选元素。
.add()	$("input").add("#ss") $("input").add($("#ss"))	在当前所选列表中，添加元素。并按照文档顺序排列。
.find()	$("div").find(".x00")	在当前所选列表的子孙元素中，查找选择器对应的元素，并返回该子孙元素。等价于($”div .x00”)。
.children()/.content()	$("#ss").children() $("#ss").contents()	返回当前所选列表的所有子元素节点/子节点（包含文本）。
.parent()/.closest(“”)	$("#span12").parent() $("#span12").closest(".test")	返回当前所选元素的直接父节点返回当前所选元素的匹配选择器（必填）的最近的父节点
.next()/.prev()	$("#ssss").prev() $("#ssss").next()	返回当前节点的前一个/后一个兄弟节点
.nextAll()/.prevAll()	$(".x04").prevAll() $(".x04").nextAll()	返回当前节点的前面所有/后面所有的兄弟节点
.parents()/.parentsUntil()	$(".x04").parents("div") $(".x04").parentsUntil("div") 等价于 $(".x04").closest("div"). children().first()	在当前节点的父节点中，所有的匹配选择器元素 在当前节点的父节点中，向上主机匹配，直到匹配到选择器，但不包含最近的元素的父元素。

补充：
1、$(“XXX").end()：（不接受参数）
jQuery的链式调用，实际创建了一个jQuery的链式表或者栈。而每次调用end()，则弹出一次栈。end()只针对改变了jQuery最终选中元素的链式调用，其他链式方法（如css等）全部忽视。

$(".x04").closest("div").children().first().end();//返回children的结果
$(".x04").closest("div").children().first().end().end();//返回closest的结果

2、andSelf()：（jQuery1.8以后改名为addBack()）（不接受参数）
在jQuery的链式堆栈中加入最后一次改变结果的调用对象。

$(".x04").closest("div").children().first().addBack();//返回first和children的并集结果（不重复）