Jquery学习笔记--选择器

jquery的过滤器

1.基本过滤选择器
:first 例:${"div:first"}     取得div标签中的第一个元素
:last  例:${"div:last"}      取得div标签中的最后一个元素
:not(selector) 例:${"div:not(.div)"} 取得所有没有.div样式的div元素
:even 例:${"div:even"}       取得索引为偶数的所有div元素 索引从0开始 (以下关于索引 都从0开始)
:odd  例:${"div:odd"}        取得索引为奇数的所有div元素
:eq(index) 例:${"div:eq(1)"} 取得索引值为1的div元素
:gt(index) 例:${"div:gt(2)"} 取得索引值大于2的div元素
:lt(index) 例:${"div:lt(3)"} 取得索引值小于3的div元素
:header    例:${":header"}   取得所有标题元素<h1>,<h2>
:animated  例:${"div:animated"}取得所有执行动画的div元素

2.内容过滤选择器
:contains(text) 例:$("div:contains('java')") 取得div文本含有java的元素集合
:empty 例:$("div:empty") 取得没有子元素或文本为空的div元素集合
:has(selector) $("div:has(p)") 取得div中包含p标签的div元素 书中例子是取得包含这个样式的div元素 我没实现.. 也许是翻译错误 有异议请指教
:parent 例:$("div:parent") 取得包含子元素的div元素集合

3.可见性过滤选择器
:hidden 例:$(":hidden") 选取所有不可见元素 如果指定元素类型的话 例:$("input:hidden")
:visbile 例:$("div:visbile") 选取所有可见的元素集合

4.属性过滤选择器
[attribute] 例:$("div[id]")取得含有id属性的div元素
[attribute=value] 例:$("div[title=test]")选取title值为test的元素集合
[attribute!=value] 例:$("div[title!=test]")选择title值不为test的元素集合
[attribute^=value] 例:$("div[title^=test]")选择title值以test开始的元素集合
[attribute$=value] 例:$("div[title$=test]")选择title值以test结尾的元素集合
[attribute*=value] 例:$("div[title*=test]")选择title值包含test的元素集合
[selector1][selector2][selectorN]例:$("div[id][title=test][class=d]") 获取包含id属性并且title值为test并且样式为d的div元素集合

5.子元素过滤选择器
:nth-child(index/even/odd/eq)  这个需要再研究 记录下....
:first-child $(div:first-child)选取每个父元素的第一个子元素 注：eq(index)是从0开始的 而first-child(index)从1开始
:last-child $(div:last-child) 选择每个父元素的最后一个子元素
:only-child $(div:only-child) 选择每个父元素中唯一的子元素(只包含1个子元素才有效)

6.表单对象属性过滤选择器
:enabled $("#form1 :enabled") 选取id为form1并且表单对象可用的元素
:disabled $("#form2 :disabled") 选择id为form2并且表单对象不可用的元素
:checked $("input:checked") 选取所有被选中的input元素(复选框)
:selected $("select :selected") 选取所有被选中的下拉框元素

7.层次选择器
获取指定元素的上1个div元素 例:$("#id").prev("div");
指定元素的上1个元素 例:$("#id").prev();
获取指定元素的下1个元素 例:$("#id").next("div");
指定元素的下1个元素 例:$("#id").next();

获取指定元素后面的所有指定同辈兄弟元素 例:$("#id~div");等价于$("#id").nextAll("div");
获取指定元素 下1个div元素 例:$("#id + div");等价于$("#id").next("div");

获取指定元素的所有子元素 其中也包括子元素的子元素 例:$("div span");span中span元素也会被获得
获取指定元素的子元素 不包含子元素中的子元素 例:$("div > span");span中的span元素未获得
例:
<ul class="myList">
<li><a href="http://jquery.com">jQuery Supports!</a>
<ul>
<li><a href="css1">css1</a></li>
<li><a href="css2">css2</a></li>
<li><a href="css3">css3</a></li>
<li><a href="css4">css4</a></li>
</ul>
</li>
<li>Jquery Supports!
<ul>
<li>css5</li>
<li>css6</li>
</ul>
</li>
</ul>

获得指向jQuery网站的链接 $('ul.myList>li>a');
包含样式myList的ul元素的直接子元素li(不包含li里的子元素li)的直接子元素a(不包含li的子元素中的a元素),这样既可直接获得jQuery的链接.

8.一个实用的函数
andSelf()
例:$('div').find('p').andSelf().addClass('border');
html:代码
<div>
   <p>First Paragraph</p>
   <p>Second Paragraph</p>
</div>
结果:
<div class="border">
    <p class="border">First Paragraph</p>
    <p class="border">Second Paragraph</p>
</div>

9.选择器补充
获取超链接并且id为test的元素
以前的写法 $(a[id=test])
jQuery提供了简便的写法 $(a#test)就可以获得这个元素.