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’的元素