jQuery基础之二 -- 选择器

在Dom编程中我们只能使用有限的函数根据id或者TagName获取Dom对象. 在jQuery中则完全不同,jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery包装集的形式返回.

性能优化： 相比于通过 ClassName 来选择，应该优先考虑用 TagName 搭配 ClassName 来选择，或是在页面只有少量对象时用唯一性的 ID 来选择，而且要尽量避免不必要的调用

1.基本选择器：通过元素id、class和标签名等来查找DOM元素

$("#id")    选取id为“id”的元素
$(".class") 选取所有class为“class”的元素
$("p")      选取所有的<p>元素
$("*")      选取页面所有的元素
$("div, span, p.myClass")   选取所有的<div>,<span>和拥有class为myClass的元素

2.层次选择器： 通过DOM元素之间的层次关系来获取特定元素

后代元素： $("ancestor descendant")  $("div span")选取所有<div>里的所有的元素名是<span>后代元素
子元素：   $("parent > child")       $("div > span")选取所有<div>元素下元素名是<span>的子元素
相邻元素： $("prev + next")          $(".one + div")选取class为"one"的元素的下一个<div>元素 等价于$(".one").next("div")
兄弟元素： $("prev ~ siblings")      $("#two ~ div")选取id为"two"的元素后面的所有<div>兄弟元素 等价于$("#two").nextAll("div")
$("#prev").siblings("div")选取#prev所有的同辈/兄弟元素，无论前后位置

3.过滤选择器：通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪选择器语法相同，以一个冒号（：）开头

基本过滤：
：first          $("div:first")选取所有<div>元素中第一个<div>元素
：last           $("div:last")选取所有<div>元素中最后一个<div>元素
：not(selector)  $("input:not(.myClass)")选取class不是myClass的<input>元素
:even            $("input:even")选取索引是偶数的<input>元素，索引从0开始
:odd             $("input:odd")选取索引是奇数的<input>元素，索引从0开始
:eq(index)       $("input:eq(1)")选取索引等于1的<input>元素
:gt(index)       $("input:gt(1)")选取索引大于1（不包括1）的<input>元素
:lt(index)       $("input:lt(1)")选取索引小于1（不包括1）的<input>元素
:header          $(":header")选取网页中所有的<h1>,<h2>,<h3>...
:animated        $("div:animated")选取正在执行动画的<div>元素

内容过滤：
:contains(text)  $("div:contains('我')")选取含有文本‘我’的<div>元素
:empty           $("div:empty")选取不包含子元素（包括文本元素）的<div>空元素
:has(selector)   $("div:has(p)")选取含有<p>元素的<div>元素
:parent          $("div:parent")选取拥有子元素（包括文本元素）的<div>元素

可见性过滤：
：hidden         $(":hidden")选取所有不可见的元素，包括<input type="hidden"/>, <div style="display:none;"/>和<div style="visibility:hidden;"/>等元素
$("input:hidden")选取所有不可见的<input>元素
：visible        $("div：visible")选取所有可见的<div>元素

属性过滤：
[attribute]         $("div[id]")选取拥有属性id的<div>元素
[attribute=value]   $("div[title=test]")选取属性title等于"test"的<div>元素
[attribute!=value]  $("div[title=test]")选取属性titlei不等于"test"（包括没有title属性的元素）的<div>元素
[attribute^=value]  $("div[title^=test]")选取属性title以"test"开头的<div>元素
[attribute$=value]  $("div[title$=test]")选取属性title以"test"结尾的<div>元素
[attribute*=value]  $("div[title*=test]")选取属性title包含"test"的<div>元素
[selector1][selector2]...  $("div[id][title$=test]")选取拥有属性id,并且属性title以"test"结尾的<div>元素

子元素过滤：
:nth-child(index/enen/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素（index从1开始算），：eq(index)是从0开始算的，且只匹配一个元素
:nth-child(enen)选取每个父元素下的索引值是偶数的元素
:nth-child(odd)选取每个父元素下的索引值是奇数的元素
:nth-child(2)选取每个父元素下的索引值等于2的元素
:nth-child(3n)选取每个父元素下的索引值是3的倍数的元素（n从0开始）
:nth-child(3n+1)选取每个父元素下的索引值是（3n+1） 的元素（n从0开始）
:first-child      $("ul li:first-child")选取每个<ul>中第1个<li>元素
:last-child       $("ul li:last-child")选取每个<ul>中最后1个<li>元素
:only-child       $("ul li:only-child")在<ul>中选取是惟一子元素的<li>元素

表单对象属性过滤：
:enabled          $("#form1:enabled")选取id为"form1"的表单内的所有可用元素
:disabled         $("#form2:disabled")选取id为"form2"的表单内的所有不可用元素
:checked          $("input:checked")选取所有被选中的<input>元素
:selected         $("select :selected")选取所有被选中的选项元素

4.表单选择器：

:input      $(":input")选取所有<input>、<textarea>、<select>、<button>元素
:text       $(":text")选取所有的单行文本框
:password   $(":password")选取所有的密码框
:radio      $(":radio")选取所有的单选框
:checkbox   $(":checkbox")选取所有的复选框
:button     $(":button")选取所有的按钮
:submit     $(":submit")选取所有的提交按钮
:reset      $(":reset")选取所有的重置按钮
:image      $(":image")选取所有的图像按钮
:file       $(":file")选取所有的上传域
:hidden     $(":hidden")选取所有不可见的元素

jQuery选择器注意：

1.选择器中含有 “.”, "#", "(", "]"等特殊字符要进行转义，如$('#id\\#b'); 选取id为id#b的元素

2.选择器中含有空格问题

var a=$('.test :hidden'); 带空格的是后代选择器，选取class为‘test’的元素里面的隐藏元素

var b=$('.test:hidden'); 不带空格的是过滤选择器，选取隐藏的class为‘test’的元素