第1章jquery选择器

一.jquery等价于$

jquery选择器继承了css选择器的风格。

$("#ID")代替了document.getElementById()函数，即通过id获取元素。

$("tagName")代替document.getElementsByTagName()函数，通过标签名获取html元素

$()获取的永远是对象，即使网页上没有此元素，因此当要用jquery检查某个元素在网页上是否存在时，不用使用判断语句

if($("#tt")){   }

而是应该根据获取到元素的长度来判断：if($("#tt").length>0){   }

或者转化成dom对象来判断：

if($("#tt")[0]){    }

二.选择器

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

（1）.基本选择器

 最常用的选择器，通过id class 和标签名等来查找dom元素。

$("#test")    $(".test")  $("p")   $("*")

       $("div,span,p.myClass")选取所有的div span和拥有class为myclass的p标签的一组元素。

（2）.层次选择器

  通过dom元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和兄弟元素等，

 例子：$("div span")选取div里的所有的span元素

   $("div > span")   div元素下元素名为span的子元素

           $('.one+div')class为one的下一个div元素    经常被next（）方法代替

     $(".one").next("div")

    $('#two~div')id为two的元素后面的所有div兄弟元素

$("#two").nextAll("div")

            siblings( )方法与前后位置无关，只要是同辈节点就都能匹配

（3）.过滤选择器

通过特定的过滤规则来筛选出所需的dom元素，过滤规则可分为基本过滤，内容过滤，可见性过滤，子元素过滤盒表单对象属性过滤

1.基本过滤选择器

:first第一个元素

:last最后一个元素

:not(selector)取出所有与给定选择器匹配的元素

:even选取索引时偶数的所有元素，从0开始

:odd同上奇数

:eq(index)索引等于index的元素

:gt(index)大于index的元素

:lt(index)小于.......

:header所有标题元素，h1,h2,h3等等

:animated 当前正在执行动画的所有元素

       2.内容过滤选择器

体现在它所包含的子元素或文本内容上。

:contains(text)   含有文本内容为text的元素    例子：$("div:contains('我')")  含有文本“我”的div元素

:empty    不包含子元素或文本的空元素     $("div:empty")不包含子元素的div空元素

:has(selector)含有选择器所匹配的元素的元素   $("div:has(p)")含有p元素的div元素

:parent含有子元素或文本的元素  $("div:parent")拥有子元素的div元素

3.可见性过滤选择器

    根据元素的可见和不可见状态来选择相应的元素。

:hidden    选取所有不可见的元素   需要注意不仅包括样式属性display为none的元素，也包括文本隐藏域<input type="hidden">和visibility:hidden之类的元素

:visible    选取所有可见的元素

    4.属性过滤选择器

通过元素的属性来获取相应的元素

$("div[id]")选取拥有属性id的元素

$("div[title=test]")   选取属性title为test的div元素

$("div[title!=test]")   不等于

$("div[title^=test]")   以test开头的

$("div[title$=test]")   以test结束的

$("div[title*=test]")含有test的..

[selector1][selector2][selectorN]复合选择器   例如：$("div[id][title$='test']")   拥有属性id并且属性title以test结束 的div元素   

5.子元素过滤选择器

       :nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素

例子：$('div.one:nth-child(2)')选择每个class为one的div父元素下的第2个子元素的背景色

                  :nth-child(3n)每个父元素下的索引值是3的倍数的元素

  :nth-child(3n+1)索引值是3n+1的 元素

       :first-child每个父元素的第一个子元素  

:last-child  ..........最后一个子元素

:only-child   一个父元素仅有一个子元素  则选择这个子元素

6.表单对象属性过滤选择器

:enabled   所有可用的元素

:disabled   所有不可用元素

:checked  所有被选中的元素  单选框   复选框   input元素

:selected  所有被选中的选项元素   下拉列表    选项元素

（4）表单选择器

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file  所有的上传域

:hidden

例子：想得到表单内表单元素的个数$("#form1:input").length

5.选择器的注意事项