jQuery学习笔记——各类选择器
2010-03-31 16:12
597 查看
$()工厂函数很强大,令其强大的是各种选择器。以下是个人对其中选择器的学习笔记。
1、标签选择器
如:$("tbody") 找寻所有表格中的tbody元素
2、id选择器
如:$("#div1") 找寻id为div1的元素
3、class选择器
如:$(".style1") 找寻class为style1的元素
4、层次选择器
此选择器通过dom元素之间的关系来确定所寻找的元素
如:$("div span") 找寻div元素中所有的span元素
$("div > span") 找寻div元素的名为span的子元素(此和上一个例子区别在于一个所有,包括子元素,孙元素。后者只是子元素)。
$("div + span") 找寻div元素后第一个span元素(等同于("div").next())
$("div ~ siblings") 找寻div元素后所有的span元素(等同于$("div").nextAll())
5、过滤选择器
此选择器可以通过特定的规则,过滤出所需的元素
如:$("div : first") 找寻所有div元素中第一个div元素
$("div : last") 找寻所有div元素中最后一个div元素
$("div : not(.style1)") 找寻所有div元素中class不为style1的div元素
$("div : even") 找寻div元素中所有偶数的div元素(索引从0开始)
$("div : odd") 找寻div元素中所有奇数的div元素(索引从0开始)
$("div : eq(1)") 找寻div元素中索引为1的div元素(索引从0开始)
$("div : gt(1)") 找寻div元素中索引大于1的div元素(索引从0开始)
$("div : lt(1)") 找寻div元素中索引小于1的div元素(索引从0开始)
$("div : contain('我')") 找寻div元素中含有文本“我”的div元素
$("div : empty") 找寻div元素中不包含任何子元素和文本的div元素
$("div : has(span)") 找寻div元素中含有p元素的div元素
$("div : parent") 找寻div元素中含有子元素或者文本的div元素
$("div : hidden") 找寻div元素中所有隐藏的div元素
$("div : visible") 找寻div元素中所有显示的div元素
$("div : first-child") 找寻每个div元素中第一个子元素(first只返回一个,此处返回每一个父元素下匹配的子元素)
$("div : last-child") 找寻每个div元素中最后一个子元素(区别同上)
$("div : nth-child(1)") 找寻div元素中第一个的子元素(eq索引从0开始,这里索引从1开始)
6、属性选择器
如:$("div [id='div1']") 找寻id为div1的div元素
其中的=可以换成以下的符号
!= id不为div1的div元素
^= id以div1开头的div元素
*= id中包含div1的div元素
$= id以div1结尾的div元素
以上是自己运用过的选择器,留下笔记以备复习
1、标签选择器
如:$("tbody") 找寻所有表格中的tbody元素
2、id选择器
如:$("#div1") 找寻id为div1的元素
3、class选择器
如:$(".style1") 找寻class为style1的元素
4、层次选择器
此选择器通过dom元素之间的关系来确定所寻找的元素
如:$("div span") 找寻div元素中所有的span元素
$("div > span") 找寻div元素的名为span的子元素(此和上一个例子区别在于一个所有,包括子元素,孙元素。后者只是子元素)。
$("div + span") 找寻div元素后第一个span元素(等同于("div").next())
$("div ~ siblings") 找寻div元素后所有的span元素(等同于$("div").nextAll())
5、过滤选择器
此选择器可以通过特定的规则,过滤出所需的元素
如:$("div : first") 找寻所有div元素中第一个div元素
$("div : last") 找寻所有div元素中最后一个div元素
$("div : not(.style1)") 找寻所有div元素中class不为style1的div元素
$("div : even") 找寻div元素中所有偶数的div元素(索引从0开始)
$("div : odd") 找寻div元素中所有奇数的div元素(索引从0开始)
$("div : eq(1)") 找寻div元素中索引为1的div元素(索引从0开始)
$("div : gt(1)") 找寻div元素中索引大于1的div元素(索引从0开始)
$("div : lt(1)") 找寻div元素中索引小于1的div元素(索引从0开始)
$("div : contain('我')") 找寻div元素中含有文本“我”的div元素
$("div : empty") 找寻div元素中不包含任何子元素和文本的div元素
$("div : has(span)") 找寻div元素中含有p元素的div元素
$("div : parent") 找寻div元素中含有子元素或者文本的div元素
$("div : hidden") 找寻div元素中所有隐藏的div元素
$("div : visible") 找寻div元素中所有显示的div元素
$("div : first-child") 找寻每个div元素中第一个子元素(first只返回一个,此处返回每一个父元素下匹配的子元素)
$("div : last-child") 找寻每个div元素中最后一个子元素(区别同上)
$("div : nth-child(1)") 找寻div元素中第一个的子元素(eq索引从0开始,这里索引从1开始)
6、属性选择器
如:$("div [id='div1']") 找寻id为div1的div元素
其中的=可以换成以下的符号
!= id不为div1的div元素
^= id以div1开头的div元素
*= id中包含div1的div元素
$= id以div1结尾的div元素
以上是自己运用过的选择器,留下笔记以备复习
相关文章推荐
- 前端学习笔记-jquery-10-(过滤选择器)过滤器:内容过滤器
- 前端学习笔记-jquery-12-(过滤选择器)过滤器:子元素过滤器
- jQuery学习笔记之选择器
- jQuery学习笔记2 —— jQuery选择器
- jQuery学习笔录1(jQuery学习笔记—选择器(1 准备知识))
- jQuery学习笔记之jQuery选择器的使用
- jQuery学习笔记二:选择器
- JQuery 学习笔记 选择器之六
- jQuery学习笔记2:选择器
- jQuery学习笔记(三):选择器总结
- 【JQuery学习笔记一】理解JQuery对象含义和JQuery选择器的使用!
- 学习笔记---css3选择器与jquery选择器大促
- {传智播客} (学习笔记)--JQuery需要掌握的是9种选择器的用法
- jQuery学习笔记(三):选择器总结
- JQuery 学习笔记 选择器之四
- JQuery学习笔记5:选择器之五
- JQuery学习笔记之过滤性选择器
- [原]Java程序员的JavaScript学习笔记(12——jQuery-扩展选择器)
- JQuery学习笔记-基本选择器
- JQuery学习笔记-基本过滤选择器