jquery从零开始学----选择器

 (2011-01-10 21:21:28)

转载▼

标签：  jquery选择器   使用   帮助   万能选择器   使用说明   it

分类： jquery使用和插件

1.基本选择器

 

$("标签名"),如$("p")是选取了所有的p标签节点 

$("#id名"),如$("#test")是选取了id为test的标签节点 

$(".class名"),如$(".test")是选取了所有class为test的标签节点 

上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt等等.

*：匹配所有元素

 

2.组选择器: 

下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. 

$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 

 

3.层次选择器

 

3.1后代选择器: 

$("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test的标签) 

 

3.2.子选择器: 

$("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: 

$("div>.test") 

<div><p class="test"></p></div>对这里的p段落标签有效.但对 

<div><p><p class="test"></p></p></div>对这里的p段落标签无效,这里要用 

$("div .test) 

 

3.3.临近选择器: 

$("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点. 

<div></div><p id="test"></p>在$("div + #test")中能取到p段落节点 

<div></div><p></p><p id="test"></p>则不能取到 

 

3.4~

匹配 prev 元素之后的所有 siblings 元素

 

4.过滤选择器（也叫简单选择器）

4.1 :first 匹配找到的第一个元素

4.2 :last 匹配找到的最后一个元素

4.3  :not

去除所有与给定选择器匹配的元素

在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）

$("input:not(:checked)") 

4.4  :even

匹配所有索引值为偶数的元素，从 0 开始计数

4.5  :odd

匹配所有索引值为奇数的元素，从 0 开始计数

4.6  :eq(index)

匹配一个给定索引值的元素

4.7   :gt(index)

匹配所有大于给定索引值的元素

4.8    :lt(index)

匹配所有小于给定索引值的元素

4.9     :header

匹配如 h1, h2, h3之类的标题元素  $(":header").css("background", "#EEE"); 

4.10    :animated

匹配所有正在执行动画效果的元素

 

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

  $("div:not(:animated)").animate({ left: "+=20" }, 1000);

}); 

 

5.内容过滤选择器

 

5.1  :contains(text)   匹配包含给定文本的元素

5.2  :empty         匹配所有不包含子元素或者文本的空元素

5.3  :has(selector)    匹配含有选择器所匹配的元素的元素

5.4  :parent          匹配含有子元素或者文本的元素

 

 

6.可见性过滤选择器

 

6.1  :hidden

匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

6.2   :visible

匹配所有的可见元素

 

7.属性过滤选择器

 

7.1 [attribute]

匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

 

7.2  [attribute=value]

匹配给定的属性是某个特定值的元素

7.3  [attribute!=value]

匹配所有含有指定的属性，但属性不等于特定值的元素。

在jQuery 1.3之前是这样的："匹配那些没有指定的属性的元素，或者指定的属性不等于特定值的元素。"，这等价于:not([attr=value])

 

7.4  [attribute^=value]

匹配给定的属性是以某些值开始的元素

 

7.5   [attribute$=value]

匹配给定的属性是以某些值结尾的元素

 

7.6   [attribute*=value]

匹配给定的属性是以包含某些值的元素

7.7   [selector1][selector2][selectorN]

复合属性选择器，需要同时满足多个条件时使用。

 

8.子元素过滤选择器

8.1  :nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

8.2  :first-child

匹配第一个子元素

8.3  :last-child

匹配最后一个子元素

8.4  :only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

 

9.表单对象过滤选择器

9.1  :input

查找所有的input元素

9.2  :text

查找所有的text元素

9.3  :password

查找所有的password元素

9.4  :radio

查找所有的radio元素

9.5  :checkbox

查找所有的checkbox元素

9.6  :submit

查找所有的submit元素

9.7  :reset

查找所有的reset元素

9.8  :buttom

查找所有的buttom元素

9.9  :file

查找所有的file元素

9.10  :hidden

查找所有的hidden元素

10.表单对象属性

10.1  :enabled

匹配所有可用元素

10.2  :disabled

匹配所有不可用元素

10.3  :checked

匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

10.4  :selected

匹配所有选中的option元素

 

我的更多文章：

• 2010最佳jquery插件(2011-01-13 21:07:43)
• 用jquery来做异步（get,post,ajax方法）(2011-01-12 20:31:17)
• jquery validate 详解一(2010-03-11 17:39:49)
• jquery-autocomplete 使用手册(2009-12-23 10:37:44)