jQuery 之 选择器总结(上篇)
jQuery的选择器非常的像CSS的选择器.他们两者都有一个非常大的优点,就是将对象和行为给区分开了,充分体现了内容和操作的完全的分离,就好像我们提倡的OOA,OOP一样,HTML中的元素就是静态的,在JS中,可以动态的取得HTML中的对象进行行为的添加,样式的添加,这样可以非常容易修改.
jQuery做为一个JavaScript库,封装了JavaScript的操作,提倡write less do more的理念,相对传统的JavaScript代码而言,最大的好处在于以后不用考虑JavaScript的兼容性了,我们可以放心的使用jQuery而不用管浏览器是否会支持这些选择器.除此之外,jQuery具有简洁的写法,完善的处理机制.
jQuery分为基本的选择器,层次选择器,过滤选择器还有表单选择器,该篇主要举今天下午练习的基本选择器,层次选择器,过滤选择器的用法,都将以上内容写到一个例子中,如下:
supermos的一个测试jQuery过滤器的例子 id为one,class为one的div class为mini id为two,class为one,title为test的div class为mini,title为other class为mini,title为test class为mini class为mini class为mini class为mini class为mini class为mini class为mini,title为tesst class为"div"的div 包含input的type为"hidden"的div 正在执行动画的span元素 |
=====================以上代码20090910下午======================================
jQuery的基本选择器:
1)有通过给定的id来选取一个jQuery对象----->$('#id')
2)有通过给定的类名来选取一个jQuery对象的集合--->$('.class')
3)有通过给定的元素来选取一个jQuery对象的集合--->$('element')
4)有通过通配符*号来选取该网页中的所有的jQuery对象的集合--->$('*')
5)有通过多个选择器匹配之后进行选择合并而得到jQuery对象的集合-->$('selector1,selector2..')
实际开发中,基本选择器完成了绝大多数的工作.
jQuery层次选择器:
1)可以选取某一个元素的所有的后代元素,得到一个jQuery对象的集合--->$('prev descendant')
2)可以选取某一个元素的子辈的所有的元素,得到一个jQuery对象的集合-->$('prev>son')
3)可以选取某个元素节点之后的元素,得到一个jQuery对象的集合-->$('prev+next') 或者$('prev').next(' ')
4)可以选取某一个元素对象之后的所有的同胞元素-->$('prev~siblings)或者$('prev').nextAll(' ')
5)可以选取某一个元素对象的所有的同胞元素,不管是在前面的还是在后面的-->$('prev').siblings(' ')
jQuery的过滤选择器
jQuery的过滤选择器又分为多种,其中包含基本的过滤选择器,内容过滤浏览器,可见性过滤浏览器,属性过滤浏览器,子元素过滤浏览器,和表单对象属性浏览器(jQuery 之 选择器总结 下篇 附加表单选择器内容)
一.基本过滤选择器的内容
1)我们可以选取第一个元素----->:first------>$('div:first')
2)我们可以选取最后一个元素----->:last-------->$('div:last')
3)可以去除所有与给定选择器匹配的元素--->:not(selector)---->$('div:not(.class)')
4)可以选取所有下标为偶数的元素----->:even----->$('div:even')
5)可以选取所有小标为奇数的元素----->:odd------>$('div:odd')
6)可以选取索引下标等于给定的值的元素------>:eq(index)------>$('div:eq(10)')
7)可以选取索引下标小于给定值的元素--------------->:lt(index)---->$('div:lt(10)')
8)可以选取索引下标大于给定值的元素------------->:gt(index)----->$('div:gt(10)')
9)可以选择所有的标题的元素,比如说h1,h2,h3...等等------>:header------>$(':header')
10)可以选择当前正在活动的元素(执行动画的元素)----->:animated----->$('div:animated')
二.内容过滤选择器
1)可以选取含有文本为指定值的元素---->:contains(text)---------->$('div:contains(nihao)')
2)可以选取不包含子元素或者文本的空元素---->:empty-------->$('div:empty')
3)可以选取含有选择器所匹配的元素的元素----------------->:has(selector)----------->$('div:has(p)')
4)可以选择符合只有一个孩子(文本元素也算),就是有内容的元素--------->:parent--------->$('div:parent')
三.可见性过滤选择器
1)可以选取不可见的元素----------------->:hidden------------->$('div:hidden')
2)可以选取可见的元素------------------------->:visible------------>$('div:visible')
四.属性过滤选择器
1)可以选取拥有此属性的元素--------------->[attribute]------------>$('')
2)可以选择属性等于指定属性值的元素----------------->[attribute=value]------------>$('div[title=nihao]')
3)可以选择属性不等于指定值的元素---------------->[attribute!=value]------------->$('div[title!=nihao]')
4)可以选择属性值以指定值开始的元素---------------->[attribute^=value]--------->$('div[title^=ni]')
5)可以选择属性值以指定值结尾的元素----------------->[attribute$=value]---------------->$('div[title$=hao]')
6)可以选择属性值中含有指定值的元素--------------->[attribute*=value]---------------->$('div[title*=ih]')
7)可以使用属性选择器进行多次选择满足多个条件----->[selector][selector]------------->$('div[id][title*=ih]')
五.子元素过滤选择器
1)可以选取每个父元素下面第几个子元素,或者是奇偶元素---->:nth-child(index/even/odd)---->这个是从1开始计算的!
2)可以选取每一个父元素下面的第一个子元素------------>:first-child
3)可以选取每一个父元素的最后一个子元素----------->:last-child
4)如果每个元素是它父元素中唯一的子元素,那么会被匹配,否者都无--->:only-child