jQuery 选择器 学习文档 学习笔记

简介jQuery 可以像 CSS 一样选择页面内的元素。

比如：$('p')会选中所有的段落。

使用$(document).ready()就可以添加文档载入完毕之后执行的代码。

使用$.fn.func = function(){}的方式可以扩展 jQuery。

选择器简单示例：<scripttype="text/JavaScript">$(document).ready(function(){ //选中所有的段落： $('p').css('color','red'); //选中设置了 title 属性的段落： $('p[title]').css('color','blue'); //选中 href 属性中包含 bbs 的段落： $('a[href*=bbs]').css('fontWeight','bold'); //选中，含有链接的 li 元素 $('li:has(a)').css('border','1px //选中作为第一个子节点的 p 元素： $('p:first-child').css('backgroundColor','pink'); //选中可见的 p 元素 $('p:visible').css('fontSize','20px'); }); </script> 属性选择器 solid black');p[title]只选择设置了 title 属性的 p 元素。

p[title=foo]titletitle 属性等于 foo 的。

p[title^=foo]title 属性以 foo 开头的。

p[title$=foo]title 属性以 foo 结束的。

p[title*=foo]title 属性含有 foo 的。

例如：$('p[title]').css('color','blue');选中了设置 title 属性的 p，并且将其颜色设置为 blue。

包含选择器 li:has(a)表示含有 a 的 li 元素。

例如：$('li:has(a)').css('border','1pxsolid black');选中含有 a 的里元素，并且设置其 style 的 border 属性。

位置选择器 p:first-child选中作为第一个子元素的 p 元素。

例如：$('p:first-child').css('backgroundColor','pink');类似的还有p:nth-child(n)例如：$('p:nth-child(3)').css('backgroundColor','yellow');选中第三段。

这些表示子节点位置的都是从 1 开始计数的。

:odd选中位置排序是奇数的元素。

even选择偶数位置的元素。

eq(n)选中第 n 个元素。

这些都是从 0 开始计数的。

以上为书上的分类方式。

所有选择器按照官方的选择器分类，而不是书上的表。

基本选择器： 基本选择器 1. 2. 3. 4. 5. #id element .class * selector1, selector2, selectorN层次选择器： 层次选择器 1. ancestor descendant div p 选中 p，且 p 必须在 div 中。

可以是隔代的关系 2. parent > child div>p 选中 p，且 p 必须是 div 的子元素，不包括隔代。

3. prev + next div+p 紧跟着 div 的 p 4. prev ~ siblings div~p 选中 p，且 p 前面必须是 div。

基本过滤器： 基本过滤器 1. :first p:first 匹配第一个 p 元素 2. :last p:last 匹配最后一个 p 元素 3. :not(selector) 过滤掉 selector 选中的元素 4. :even 偶数元素，0 开始的索引。

5. :odd 奇数元素，0 开始的索引。

6. :eq(index) 根据 index 返回一个元素。

7. :gt(index) 索引大于 index 的元素。

8. :lt(index) 索引小于 index 的元素。

9. :header 标题元素，h1 到 h6。

10. :animated 当前正在动画状态的元素。

内容过滤器： 内容过滤器 1. :contains(text) 匹配文本中包含 text 的元素。

2. :empty 匹配没有任何子节点的元素。

(有文本节点算作有节点) 3. :has(selector) 在 selector 匹配的元素中，至少要包含一个才可以匹配。

4. :parent 匹配所有作为父元素的元素。

可见性过滤器： 可见性过滤器 1. :hidden 所有可见元素 2. :visible 匹配所有不可见元素。

属性过滤器： 属性过滤器 1. [attribute] 设置了指定属性的元素。

2. [attribute=value] 属性 attribute 的值等于 value 3. [attribute!=value] 属性 attribute 的值不等于 value，或者没有指定该属性。

4. [attribute^=value] 属性 attribute 的值以 value 开始。

5. [attribute$=value] 属性 attribute 的值以 value 结束。

6. [attribute*=value] 属性 attribute 的值含有 value。

7. [attributeFilter1][attributeFilter2][attributeFilterN] 匹配满足所有属性过滤器的元素。

子节点过滤器： 子节点过滤器 1. :nth-child(index/even/odd/equation) 匹配元素是它们父亲元素的第 n 个子节点、或者是奇数偶数节点。

2. :first-child 作为第一个子节点的元素。

3. :last-child 作为最后一个子节点的元素。

4. :only-child 作为唯一的子节点的元素。

表单选择器： 表单选择器 1. :input 匹配 input, textarea, select 以及 button 元素。

2. 3. 4. 5. 6. 7. 8. 9. :text :password :radio :checkbox :submit :image :reset :button10. :file11. :hidden 匹配不可见的元素以及 input hidden 表单过滤器： 表单过滤器 1. 2. 3. 4. :enabled :disabled :checked :selected管理选择结果访问结果长度$('p').size() size 方法获取某个元素$('p')[0] $('p').get(0)将结果转换为数组get 方法如果没有参数就会将 var arr = $('p').get()取得当前节点的索引$('#foo').index($('div')) 取得 id 为 foo 的 div 在所有 div 内的索引。

向结果中添加元素$('p').add('a').fadeOut().fadeIn(); 和$('p,a').fadeOut().fadeIn();是完全等同的。

从结果中删除元素$('div').not('#foo').fadeOut().fadeIn();从$('div')中去掉'#foo'。

注意 not 不再接受标签。

不能写 not('div#foo')从结果中过滤元素$('div').filter('#foo').fadeOut().fadeIn(); 从 div 中再过滤一遍 id 等于 foo 的。

再如： $('p').filter('[title]').fadeOut().fadeIn(); filter 与 not 一样不再接受标签，而且过滤的时候没有=只有^=、*=、$=。

filter 中 也可以使用函数过滤器，返回 true 的选中。

$('div').filter(function(){ return true}) 极端情况： $('div').filter(function(){ return false}).fadeOut().fadeIn(); 一个也不选中。

$('div').filter(function(){ return true}).fadeOut().fadeIn(); 全部选中。

在结果范围内寻找元素$('ul').find('a').fadeOut().fadeIn(); 在 ul 的范围内再寻找 a。

jQuery 链end 方法 返回上一层操作的元素。

$('div').find('a').end().fadeOut().fadeIn(); end 又回到了$('div')。

andSelf 方法 $('div').find('a').andSelf().fadeOut().fadeIn(); 包含$('div')以及.find('a')的结果。

操作元素each 方法each 方法可以遍历所有的选中的元素，并且使用一个函数来对其进行操作。

$('p').each(function(index){$(this).prepend(index+'.')}); 选中所有的 p，并且在前面加上索引号。