jQuery 学习之路(2):选择器与过滤器
2014-05-09 14:33
453 查看
一、基本选择器
基本选择器完全根据 CSS 选择器的规范而来,对于了解 CSS 的用户非常容易掌握。
二、层次选择器
子选择器和后代选择器的区别:子选择器是后代选择器的子集,前者只筛选出符合条件的直接子元素,后者筛选出符合条件的所有子孙元素。
单一兄弟选择器与所有兄弟选择器类似,前者只筛选出符合条件的下一个同辈元素,后者筛选出符合条件的后面的所有的同辈元素。
简单例子如下:
三、属性选择器
属性选择器可以筛选出包含特定属性的元素,或者根据属性的值的格式来筛选出元素。
其中,[name != "value"] 的实现效率较低,可以使用 :not([attr = 'value']) 的形式。
简单例子如下:
四、基本过滤器
有些过滤器的实现并不高效,原因参见官网,对于这部分过滤器,建议使用 .filter(selector) 来调用,如 $('div').filter(':hidden') ,后面所有的这类过滤器都以红色特殊标出。
五、子元素过滤器
六、内容过滤器
七、表单过滤器
八、可见性过滤器
标签选择器: $('button') ID选择器: $('#id1') 类选择器: $('.class1') 多重选择器: $('#id1,.class1,button') 全体选择器: $('*')
基本选择器完全根据 CSS 选择器的规范而来,对于了解 CSS 的用户非常容易掌握。
二、层次选择器
子选择器: $('parent > child') 后代选择器: $('ancester descendant') 单一兄弟选择器: $('prev + next') 所有兄弟选择器: $('prev ~ siblings')
子选择器和后代选择器的区别:子选择器是后代选择器的子集,前者只筛选出符合条件的直接子元素,后者筛选出符合条件的所有子孙元素。
单一兄弟选择器与所有兄弟选择器类似,前者只筛选出符合条件的下一个同辈元素,后者筛选出符合条件的后面的所有的同辈元素。
简单例子如下:
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $("#btn1").click(function(){ $('body > div').each(function(index, element) { alert($(this).html()); }); }); $("#btn2").click(function(){ $('body div').each(function(index, element) { alert($(this).html()); }); }); $("#btn3").click(function(){ $('#btn1 + button').each(function(index, element) { alert($(this).html()); }); }); $("#btn4").click(function(){ $('#btn1 ~ button').each(function(index, element) { alert($(this).html()); }); }); }); </script> </head> <body> <button id='btn1'>click1</button> <button id='btn2'>click2</button> <button id='btn3'>click3</button> <button id='btn4'>click4</button> <div> <div id='div1'>div1</div> <div id='div2'>div2</div> </div> </body> </html>
三、属性选择器
属性选择器可以筛选出包含特定属性的元素,或者根据属性的值的格式来筛选出元素。
属性包含: [attr] 属性值为指定字符串: [attr = "value"] 属性值不为指定字符串: [attr != "value"] 属性值以指定字符串开始: [attr ^= "value"] 属性值以指定字符串结束: [attr $= "value"] 属性值包含指定字符串: [attr *= "value"] 多属性筛选: [attr1 *= "value1"][attr2 = "value2"]
其中,[name != "value"] 的实现效率较低,可以使用 :not([attr = 'value']) 的形式。
简单例子如下:
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $("#btn1").click(function(){ $('[id]').each(function(index, element) { alert($(this).html()); }); }); $("#btn2").click(function(){ $('button[id]').each(function(index, element) { alert($(this).html()); }); }); $("#btn3").click(function(){ $('[id $= "1"]').each(function(index, element) { alert($(this).html()); }); }); $("#btn4").click(function(){ $('button[id $= "1"]').each(function(index, element) { alert($(this).html()); }); }); $("#btn5").click(function(){ $('button[id][name]').each(function(index, element) { alert($(this).html()); }); }); }); </script> </head> <body> <button id='btn1'>click1</button> <button id='btn2'>click2</button> <button id='btn3'>click3</button> <button id='btn4'>click4</button> <button id='btn5' name='name5'>click5</button> <div> <div id='div1'>div1</div> <div id='div2'>div2</div> </div> </body> </html>
四、基本过滤器
有些过滤器的实现并不高效,原因参见官网,对于这部分过滤器,建议使用 .filter(selector) 来调用,如 $('div').filter(':hidden') ,后面所有的这类过滤器都以红色特殊标出。
:animated 当前执行动画的元素 :eq(index) 取出指定索引的元素(jQuery 对象是集合,索引从0开始) :gt(index) 取出索引大于指定值的元素 :lt(index) 取出索引小于指定值的元素 :first 取出第一个元素,即索引为0的元素 :last 取出最后一个元素,即索引为 size()-1 的元素 :even 取出索引为偶数的元素 :odd 取出索引为奇数的元素 :header 取出所有标题元素,如 h1,h2,h3 等 :root 取出根元素 :not(selector) 取出所有不匹配指定过滤器的元素 :focus 当前得到焦点的元素
五、子元素过滤器
:first-child 是其父元素的第一个子元素 :last-child 是其父元素的最后一个元素 :first-of-type 是同辈同类元素中的第一个元素 :last-of-type 是同辈同类元素中的最后一个元素 :only-child 是其父元素的唯一子元素 :only-of-type 在同辈元素中,没有同类元素的元素,即此元素是同辈元素中唯一的该类型元素 :nth-child(index) 其父元素的第 index 元素,该 index 从 1 开始 :nth-last-child(index) 其父元素的倒数第 index 元素,该 index 从 1 开始 :nth-of-type(index) 是同辈的同类元素中的第 index 元素,该 index 从 1 开始 :nth-last-of-type(index) 是同辈的同类元素中倒数第 index 元素,该 index 从 1 开始
六、内容过滤器
:contains(text) 包含指定字符串的元素 :empty 没有子元素的元素 :has(selector) 包含至少一个指定的选择器匹配的元素 :parent 包含至少一个子节点的(一个元素或文本)元素
七、表单过滤器
:input :text :password :button :reset :submit :radio :checkbox :checked :selected :file :image :focus :enabled :disabled
八、可见性过滤器
:hidden 当前隐藏的元素 :visible 当前显示的元素
相关文章推荐
- jQuery学习之路(二) 基本选择器
- jQuery学习笔录2(jQuery学习笔记——选择器(2)&过滤器)
- jQuery 学习日记(二):选择器与过滤器
- 前端学习笔记-jquery-10-(过滤选择器)过滤器:内容过滤器
- JQUERY1.9学习笔记 之内容过滤器(二) 空元素选择器
- 前端学习笔记-jquery-11-(过滤选择器)过滤器:可见性过滤器
- 前端学习笔记-jquery-12-(过滤选择器)过滤器:子元素过滤器
- JQUERY1.9学习笔记 之内容过滤器(三) has选择器
- JQUERY1.9学习笔记 之基本过滤器(十一) 奇数选择器
- jquery学习(3)--高级选择器
- jQuery源码学习记录(1)基本结构和选择器
- 【5】jQuery学习——入门jQuery选择器之过滤选择器-基本过滤选择器
- JQuery学习日志1-选择器
- jQuery学习之基本选择器
- 【6】jQuery学习——入门jQuery选择器之过滤选择器-内容过滤选择器
- Jquery选择器的概念以及选择器的学习一(基本、层级、简单,另有简单动画效果代码)
- 【7】jQuery学习——入门jQuery选择器之过滤选择器-可见性过滤选择器
- 【8】jQuery学习——入门jQuery选择器之过滤选择器-子元素过滤选择器
- JavaScript学习笔记8-jQuery表单选择器
- jQuery学习笔记——选择器