jQuery 之选择器总结(上篇)

现在的位置: 首页 > 综合 > 正文

jQuery 之选择器总结(上篇)

2013年10月22日 ⁄ 综合 ⁄ 共 14417字 ⁄ 字号小中大 ⁄ 评论关闭

jQuery的选择器非常的像CSS的选择器.他们两者都有一个非常大的优点,就是将对象和行为给区分开了,充分体现了内容和操作的完全的分离,就好像我们提倡的OOA,OOP一样,HTML中的元素就是静态的,在JS中,可以动态的取得HTML中的对象进行行为的添加,样式的添加,这样可以非常容易修改.

jQuery做为一个JavaScript库,封装了JavaScript的操作,提倡write less do more的理念,相对传统的JavaScript代码而言,最大的好处在于以后不用考虑JavaScript的兼容性了,我们可以放心的使用jQuery而不用管浏览器是否会支持这些选择器.除此之外,jQuery具有简洁的写法,完善的处理机制.

jQuery分为基本的选择器,层次选择器,过滤选择器还有表单选择器,该篇主要举今天下午练习的基本选择器,层次选择器,过滤选择器的用法,都将以上内容写到一个例子中,如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> <title>Untitled Document</title><br /> <mce:script type="text/javascript" src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script><br /> <mce:script type="text/javascript"></mce:script><br /> </head><br /> <body><br /> <mce:style></mce:style><style mce_bogus="1"> div,span,p{<br /> width:140px;<br /> height:140px;<br /> margin:5px;<br /> background:#aaa;<br /> border:#000 1px solid;<br /> float:left;<br /> font-size:17px;<br /> font-family:Verdana;<br /> }<br /> div .mini{<br /> width:55px;<br /> height:55px;<br /> background-color:#aaa;<br /> font-size:12px;<br /> }<br /> div .hide{<br /> display:none;<br /> }<br /> </style><br /> <table><tr><td><br /> <h2>supermos的一个测试jQuery过滤器的例子</h2><br /> <div class="one" id="one"><br /> id为one,class为one的div<br /> <div class="mini">class为mini</div><br /> </div><br /> <div class="one" id="two" title="test"><br /> id为two,class为one,title为test的div<br /> <div class="mini" title="other">class为mini,title为other</div><br /> <div class="mini" title="test">class为mini,title为test</div><br /> </div><br /> <div class="one"><br /> <div class="mini">class为mini</div><br /> <div class="mini">class为mini</div><br /> <div class="mini">class为mini</div><br /> <div class="mini"></div><br /> </div><br /> <div class="one"><br /> <div class="mini">class为mini</div><br /> <div class="mini">class为mini</div><br /> <div class="mini">class为mini</div><br /> <div class="mini" title="tesst">class为mini,title为tesst</div><br /> </div><br /> <div style="display:none;" mce_style="display:none;" class="none">style的display为"none"的div</div><br /> <div class="hide">class为"div"的div</div><br /> <div><br /> 包含input的type为"hidden"的div<br /> <input type="hidden" size="8"/><br /> </div><br /> <span id="mover">正在执行动画的span元素</span><br /> </td></tr><tr><td><br /> <form action="#" method="post"><br /> <button id="guolv_child">子元素过滤选择器</button><br/><br /> nth-child选取每个父元素下索引值是偶数的元素:<input type='radio' name='guolv_chi' value='1' checked/><br/><br /> nth-child选取每个父元素下索引值是奇数的元素:<input type='radio' name='guolv_chi' value='2'/><br/><br /> nth-child选取每个父元素下索引值是2的元素:<input type='radio' name='guolv_chi' value='3'/><br/><br /> nth-child选取每个父元素下索引值是2的倍数的元素:<input type='radio' name='guolv_chi' value='4'/><br/><br /> nth-child选取每个父元素下索引值是2n+1的元素:<input type='radio' name='guolv_chi' value='5'/><br/><br /> 选取每一个父元素的第一个子元素:<input type='radio' name='guolv_chi' value='6'/><br/><br /> 选取每一个父元素的最后一个子元素:<input type='radio' name='guolv_chi' value='7'/><br/><br /> 如果这个父元素只有一个孩子,就被匹配,否则不行:<input type='radio' name='guolv_chi' value='8'/><br/><br /> </form><br /> <form action='#' method='post'><br /> <button id="jiben">基本选择器</button><br/><br /> 根据给定ID来匹配:$('#one').css("background","#bbffaa");<input type='radio' name='jiben' value="1" checked/><br/><br /> 根据给定类名来匹配:$('.mini').css("background","#bbffaa");<input type='radio' name='jiben' value="2"/><br/><br /> 根据元素名来匹配:$('div').css("background","#bbffaa");<input type='radio' name='jiben' value="3"/><br/><br /> 根据通配符来匹配:$('*').css("background","#bbffaa");<input type='radio' name='jiben' value="4"/><br/><br /> 根据选择器来匹配:$('span,#two').css("background","#bbffaa");<input type='radio' name='jiben' value="5"/><br/><br /> </form><br /> <form action="#" method="post"><br /> <button id="cengci">层次选择器</button><br/><br /> 后代选择器:$('body div').css("background","#bbffaa")<input type="radio" name="cengci" value='1' checked/><br/><br /> 子选择器:$('body>div').css("background","#bbffaa")<input type="radio" name="cengci" value='2'/><br/><br /> next_1选择:$('.one+div').css("background","#bbffaa")<input type="radio" name="cengci" value='3'/><br/><br /> siblings_1:$('#two~div').css("background","#bbffaa")<input type="radio" name="cengci" value="4"/><br/><br /> next_2选择:$(".one".next("div")).css("background","#bbffaa")<input type="radio" name="cengci" value='5'/><br/><br /> siblings_2:$('#two').nextAll('div').css("background","#bbffaa")<input type="radio" name="cengci" value='6'/><br/><br /> 同胞选择器:$('#two').siblings('div').css("background","#bbffaa")<input type="radio" name="cengci" value='7'/><br/><br /> </form><br /> <form action="#" method="post"><br /> <button id="guolv">基本过滤选择器</button><br/><br /> 选取第一个元素:$('div:first').css("background","#bbffaa");<input type="radio" name="guolv" value='1' checked/><br/><br /> 选取最后一个元素:$('div:last).css("background","#bbffaa");<input type="radio" name="guolv" value='2'/><br/><br /> 去除所有与给定选择器匹配的元素:$('div:not(.one)').css("background","#bbffaa");<input type="radio" name="guolv" value="3"/><br/><br /> 选取索引是偶数的所有元素,索引从0开始:$('div:even').css("background","#bbffaa");<input type="radio" name="guolv" value='4'/><br/><br /> 选取索引是奇数的所有元素,索引从0开始:$('div:odd').css("background","#bbffaa");<input type="radio" name="guolv" value='5'/><br/><br /> 选取索引等于index的元素(index从0开始):$('div:eq(3)').css("background","#bbffaa");<input type="radio" name="guolv" value='6'/><br/><br /> 选取索引大于index的元素(index从0开始):$('div:gt(3)').css("background","#bbffaa");<input type="radio" name="guolv" value='7'/><br/><br /> 选取索引小于index的元素(index从0开始):$('div:lt(3)').css("background","#bbffaa");<input type="radio" name="guolv" value='8'/><br/><br /> 选取所有的标题元素,例如 h1,h2,h3等等:$(':header').css("background","#bbffaa");<input type="radio" name="guolv" value='9'/><br/><br /> 选取当前正在执行动画的所有元素:$(':animated').css("background","#bbffaa");<input type="radio" name="guolv" value='0'/><br/><br /> </form></p> <p> <form action="#" method="post"><br /> <button id="guolv_content">内容过滤选择器</button><br/><br /> 选取含有指定文本内容的元素:$('div:contain(di)').css("background","#bbffaa");<input type="radio" name="guolv_c" value='1'/><br/><br /> 选取不包含元素或者文本的空元素:$('div:empty').css("background","#bbffaa");<input type="radio" name="guolv_c" value='2'/><br/><br /> 选取含有选择器所匹配的元素的元素:$('div:has(.mini)').css("background","#bbffaa");<input type="radio" name="guolv_c" value='3'/><br/><br /> 选取含有子元素或者文本的元素:$('div:parent').css("background","#bbffaa");<input type="radio" name="guolv_c" value='4'/><br/><br /> </form><br /> <form action="#" method="post"><br /> <button id="filter_visibe">可见性过滤选择器</button><br/><br /> 选取所有不可见的元素:$('div:hidden').show(3000)(<input type='radio' name="guolv_v" value='1' checked/><br/><br /> 选取所有可以见的元素:$('div:visible').css("background","#FF6500");<input type='radio' name="guolv_v" value='2' checked/><br/><br /> </form><br /> <form action='#' method="post"><br /> <button id="filter_attribute">属性过滤选择器</button><br/><br /> 选取拥有此属性的元素:$('div[title]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='1' checked/><br/><br /> 选取属性的值为value的元素:$('div[title=test]).css("background","#bbffaa");<input type='radio' name='filter_attri' value='2'/><br/><br /> 选取属性的值不等于value的元素:$('div[title!=test]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='3'/><br/><br /> 选取属性的值以value开始的元素:$('div[title^=te]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='4'/><br/><br /> 选取属性的值以value结束的元素:$('div[title$=st]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='5'/><br/><br /> 选取属性的值含有value的元素:$('div[title*=es]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='6'/><br/><br /> 用属性选择器合并成一个符合属性选择器,没选择一次,就缩小一次范围:$('div[id][title*=es]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='7'/><br/><br /> </form><br /> </td></tr></table><br /> </body><br /> </html><br />

=====================以上代码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

【上篇】Struts2环境配置
【下篇】GRUB命令选择引导操作系统

作者: ointment

该日志由 ointment 于11年前发表在综合分类下，最后更新于 2013年10月22日.
转载请注明: jQuery 之选择器总结(上篇) | 学步园 +复制链接

抱歉!评论已关闭.

学步园