jQuery选择器

jQuery的强大,很大程度上得益于它更能全面而又简单易用的选择器。无论是进行简单的文本动画显示效果,还是操作DOM元素,甚至进行Ajax交互,都离不开jQuery选择器。jQuery选择器可以说是完全继承了各个版本CSS的优点,和CSS选择器的语法如出一辙。

 

1.基本选择器

#ID       $("#id")    

.CLASS  $(".class")      

标签       $("span")    

*           $("#id *")       这里是选择了某id下的所有元素(不只是子元素)

$("#id,.class,span")     还可以使用,操作符 来对指定的多个目标操作

简单例子:  单击某个元素使得一些元素增加getred类的样式

   此处不加""

$(document).ready(function(){

$("#id").click(function(){

$("#id .class,.class #2.1,#id span").addClass("getred");

});

})

可以看出jQuery中函数的命名与标准javascript中函数的命名一样都遵守了"骆驼命名法"--第一个单词小写,以后每个单词首字母大写,知道了这些后会较少出错的写出一些API函数。

 

2.层次选择器

$("1 2")      上面的$("#id *")就是这种选择器的一种(还是,应用于父元素1下的所有满足条件的元素2)

$("1>2")     1最好不要是#ID (应用于所有父元素是1的元素2) 

$("1+2")     一般用于2和后面的3..4..等是同样的元素时只想应用于2时(应用于1后面紧邻的兄弟元素2)

$("1~2")     这里的2不一定只是一个元素(应用于1后面所有与1平级的元素2)

 

3.基本滤镜选择器

①位置控制滤镜选择器(:first :last :even :odd :eq(index) :gt(index) :lt(index))

根据元素的位置规则进行元素选取

$(document).ready(function(){

$("#id").click(function(){

$("1:first").addClass("blue");

});

})

1一般是一些样式重复(标签重复或类重复等)的元素

:first    用于选择这些元素中的第一个元素

:last    用于选择这些元素中的最后一个元素

:even  用于选择这些元素中的偶数元素

:odd    用于选择这些元素中的奇数元素

:eq(index)  用于选择这些元素中的第index个元素     从0开始

:gt(index)   用于选择这些元素中的大于index的元素

:lt(index)    用于选择这些元素中的小于index的元素

②隐藏显示滤镜选择器(:empty :parent :hidden :visible)

用来选取、控制、以及操作对用户来说可见或者不可见元素

$(document).ready(function(){

$("#id").click(function(){

$("1:empty").addClass("blue");

});

})

1一般是一些样式重复(标签重复或类重复等)的元素

:empty   用于选择这些元素中不包含子元素或文本的空元素

:parent  用于选择这些元素中包含子元素或文本的空元素

:hidden  用于选择这些元素中不可见的元素

:visible   用于选择这些元素中可见的元素

特别强调一下:hidden的运用

$(document).ready(function(){

$("#id").click(function(){

$("1:hidden").show().addClass("blue");

});

})

加了一个show()函数,此函数将原来隐藏的内容显示(隐藏元素最好用的是style="display:none;"或input设成hidden而visible="false"貌似不行)

③内容限制过滤选择器(:contains(text) :has(selector) :not(selector) :header :animated)

用来对匹配规则添加更加严格的限制来缩小匹配范围

$(document).ready(function(){

$("#id").click(function(){

$("div.1:contians('why')").addClass("blue");

});

})

选择文本中含有why且class为1的div元素

:contains(text)    用于选择文本中包含指定文本的元素

:has(selector)     用于选择含有指定选择器(可以是类选择器、ID选择器、标签选择器等)的元素

:not(selector)      用于选择不含有指定选择器(可以是类选择器、ID选择器、标签选择器等)的元素

:header              用于选择所有标题元素(如h1、h2、h3......)

:animated          用于选择所有正在执行动画的元素

$(document).ready(function(){

$("#id").click(function(){

$("div:has(#spankkk)").addClass("blue");

});

})

选择含有id为spankkk的元素的元素

 

4.子元素滤镜选择器

用于对匹配规则的元素的子元素进行选择    以下E代表子元素(如div p:nth-child(3n+1) 选择一些p元素,这些p元素的父                                                             元素是div,并且这些p元素在div里的顺序是3n+1 n=0,1,2....  注意变量只能是n)

E:nth-child(index/even/odd/equation)  选择一些子元素,他们在其父元素里的顺序是index(这里从1开始)even(偶                                                                数)odd(奇数)equation(表达式，如上面的例子) 它可以实现以下3种任何一个

E:first-child      选择一些子元素,他们在其父元素里的是第一个子元素

E:last-child      选择一些子元素,他们在其父元素里的是最后一个子元素

E:only-child     选择一些子元素,他们在其父元素里的是唯一的子元素

 

$(document).ready(function(){

$("#id").click(function(){

$("ul li:nth-child(2n+1)").addClass("blue");

});

})

选择所有ul下的li  并且这些li在其父元素里的顺序是2n+1(其实就是奇数,等价于$("ul li:nth-child(odd)")

 

5.表单滤镜选择器

①表单内容滤镜选择器

这些选择器由于"名副其实",所以不一一介绍了  $("1:input")  1是标签或类选择器

:input 该选择器的范围很大,可以选择input、textarea、select、button等元素

:text  :password  :radio  :checkbox  :submit  :image  :reset  :button  :file

②表单功能滤镜选择器

主要是根据表单元素当前状态等信息对表单元素进行选择  也是"名副其实"的,所以不予以介绍

:enabled  :disabled  :checked  :selected

如$("input:enable")  选择所有状态为enable的input

   $("select option:selected")  选择所有被选中的option

 

6.属性滤镜选择器

用来根据标签的固有或用户设置的属性来进行对元素的选择

[attribute]                  选择拥有某属性的元素     如:$("input[class]")  选择拥有class属性的input元素

[attribute=value]       选择某属性的值为value的元素

[attribute!=value]      选择某属性的值不为value的元素

[attribute^=value]     选择某属性的值以value为开始的元素  这里的开始是指字符串的开始

[attribute$=value]     选择某属性的值以value为结束的元素

[attribute*=value]     选择某属性的值为包含value的元素

如$("input[class=home][name*=myfamily]")  选择class属性为home且name属性包含myfamily的input元素