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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <mce:script type="text/javascript" src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $('#jiben').click(jiben_show); $('#cengci').click(cengci_show); $('#guolv').click(guolv_show); $('#guolv_content').click(guolv_content_show); $('#filter_visibe').click(guolv_v_show); $('#filter_attribute').click(guolv_attri_show); $('#guolv_child').click(guolv_child_show); }) function jiben_show(){ var i=parseInt($("input[name='jiben']:checked").val()); switch(i){ case 1: //根据给定的id匹配一个元素,$('#id')返回的是单个元素 //该句话是改变id为one元素的背景色 $('#one').css("background","#bbffaa"); break; case 2: //根据给定的类名匹配元素,$('.class')返回的是集合元素 //这句话的意思是改变class为mini的所有元素的背景 $('.mini').css("background","#bbffaa"); break; case 3: //根据自给定的元素来匹配元素$('element')返回的是集合元素 //这句话的意思是改变元素名字是<div/>的所有元素的背景色 $('div').css("background","#bbffaa"); break; case 4: //匹配所有的元素$('*')返回的是集合元素 //这句话的意思是改变所有元素的背景色 $('*').css("background","#bbffaa"); break; case 5: //将每一个选择器匹配到的元素合并之后一起返回$('selector1,selector2') //返回的是结合元素,这句话的意思是说改变所有的<span>元素和id为two的元素的背景色 $('span,#two').css("background","#bbffaa"); break; } } function cengci_show(){ var i=parseInt($("input[name='cengci']:checked").val()); switch(i){ case 1: //选取body元素中的所有的div元素(div是body的后代元素) //返回的是一个集合元素 $('body div').css("background","#bbffaa"); break; case 2: //选取body元素下的div子元素(仅仅是将'儿子'辈的取出来了) //返回的也是一个集合元素 $('body>div').css("background","#bbffaa"); break; case 3: //选取在类one后面的div元素 //返回的也是一个集合元素 $('.one+div').css("background","#bbffaa"); break; case 4: //选取id为two的元素后面的所有的siblings元素 //这个方法调试不通,不知道是不是版本的问题呢? $('#two~div').css("background","#bbffaa"); break; case 5: //通常用这种next()方法来替换$('prev+next')选择器 $(".one").next("div").css("background","#bbffaa"); break; case 6: //通常可以使用nextAll()方法来替换$('prev~next')选择器 $('#two').nextAll('div').css("background","#bbffaa"); break; case 7: //选择id为two的所有的兄弟,不管是在前面还是在后面 $('#two').siblings('div').css("background","#bbffaa"); break; } } function guolv_show(){ var i=parseInt($("input[name='guolv']:checked").val()); alert(i); switch(i){ case 1: //过滤选择器,选择第一个div元素 $('div:first').css("background","#bbffaa"); break; case 2: //选择最后一个div元素 $('div:last').css("background","#bbffaa"); break; case 3: //选择没有含有one类的div元素进行变色操作 $('div:not(.one)').css("background","#bbffaa"); break; case 4: //对所有div元素进行过滤操作,选择所有为偶数的div元素 $('div:even').css("background","#bbffaa"); break; case 5: //对所有div元素进行过滤操作,选择所有为奇数的div元素 $('div:odd').css("background","#bbffaa"); break; case 6: //对所有的div元素进行过滤,选择索引值为3的div元素 $('div:eq(3)').css("background","#bbffaa"); break; case 7: //对所有的div元素进行过滤,选择索引值大于三的元素 $('div:gt(3)').css("background","#bbffaa"); break; case 8: //对所有的div元素进行过滤,选择索引值小于三的元素 $('div:lt(3)').css("background","#bbffaa"); break; case 9: //对所有的含的h1,h2,h3的元素进行变色操作 $(':header').css("background","#bbffaa"); break; case 0: //对正处于animated状态下的元素进行操作 $(':animated').css("background","#bbffaa"); break; } } function guolv_content_show(){ var i=parseInt($("input[name='guolv_c']:checked").val()); switch(i){ case 1: //对元素中含有di文字的div元素进行变换颜色的操作 $('div:content(di)').css("background","#bbffaa"); break; case 2: //选取不包含子元素或者文本的空div元素 $('div:empty').css("background","#bbffaa"); break; case 3: //选择含有类mini的div元素进行变换颜色的操作 $('div:has(.mini)').css("background","#bbffaa"); break; case 4: //选取含有子元素或者文本元素的元素 $('div:parent').css("background","#bbffaa"); break; } } function guolv_v_show(){ var i=parseInt($("input[name='guolv_v']:checked").val()); switch(i){ case 1: //将隐藏的div元素进行显示操作 $('div:hidden').show(3000); break; case 2: //对可见的所有元素进行变换颜色的操作 $('div:visible').css("background","#FF6500"); break; } } function guolv_attri_show(){ var i=parseInt($("input[name='filter_attri']:checked").val()); switch(i){ case 1: //选取含有title属性的元素 $('div[title]').css("background","#bbffaa"); break; case 2: //选取含有title属性等于test的元素 $('div[title=test]').css("background","#bbffaa"); break; case 3: //选取含有title属性不等于test的元素 $('div[title!=test]').css("background","#bbffaa"); break; case 4: //选取含有以te开头的title元素的div元素 $('div[title^=te]').css("background","#bbffaa"); break; case 5: //选取含有以est结尾的title元素的div元素 $('div[title$=est]').css("background","#bbffaa"); break; case 6: //选取含有es的title元素的div元素 $('div[title*=es]').css("background","#bbffaa"); break; case 7: //选取含有id属性并且含有es字符串title元素的div元素 $('div[div[id]][title*=es]').css("background","#bbffaa"); break; } } function guolv_child_show(){ var i=parseInt($("input[name='guolv_chi']:checked").val()); switch(i){ case 1: //选取每一个父元素的所有下标为偶数的子元素 $('div:nth-child(even)').css("background","#bbffaa"); break; case 2: //选取每一个父元素的所有下标为奇数的子元素 $('div:nth-child(odd)').css("background","#bbffaa"); break; case 3: //选取每一个div父元素下的下标为2的子元素 $('div:nth-child(2)').css("background","#bbffaa"); break; case 4: //选取符合2n的下标的子元素的 $('div:nth-child(2n)').css("background","#bbffaa"); break; case 5: //选取符合2n+1下标的子元素 $('div:nth-child(2n+1)').css("background","#bbffaa"); break; case 6: //选择每一个div元素的第一个子元素 $('div:first-child').css("background","#bbffaa"); break; case 7: //选择每一个div元素的最后一个子元素 $('div:last-child').css("background","#bbffaa"); break; case 8: //如果该div元素只有一个孩子,则选择,如果有多个或者没有孩子,就不匹配 $('div:only-child').css("background","#bbffaa"); break; } } // --></mce:script> </head> <body> <mce:style><!-- div,span,p{ width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div .mini{ width:55px; height:55px; background-color:#aaa; font-size:12px; } div .hide{ display:none; } --></mce:style><style mce_bogus="1"> div,span,p{ width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div .mini{ width:55px; height:55px; background-color:#aaa; font-size:12px; } div .hide{ display:none; } </style> <table><tr><td> <h2>supermos的一个测试jQuery过滤器的例子</h2> <div class="one" id="one"> id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" mce_style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"div"的div</div> <div> 包含input的type为"hidden"的div <input type="hidden" size="8"/> </div> <span id="mover">正在执行动画的span元素</span> </td></tr><tr><td> <form action="#" method="post"> <button id="guolv_child">子元素过滤选择器</button><br/> nth-child选取每个父元素下索引值是偶数的元素:<input type='radio' name='guolv_chi' value='1' checked/><br/> nth-child选取每个父元素下索引值是奇数的元素:<input type='radio' name='guolv_chi' value='2'/><br/> nth-child选取每个父元素下索引值是2的元素:<input type='radio' name='guolv_chi' value='3'/><br/> nth-child选取每个父元素下索引值是2的倍数的元素:<input type='radio' name='guolv_chi' value='4'/><br/> nth-child选取每个父元素下索引值是2n+1的元素:<input type='radio' name='guolv_chi' value='5'/><br/> 选取每一个父元素的第一个子元素:<input type='radio' name='guolv_chi' value='6'/><br/> 选取每一个父元素的最后一个子元素:<input type='radio' name='guolv_chi' value='7'/><br/> 如果这个父元素只有一个孩子,就被匹配,否则不行:<input type='radio' name='guolv_chi' value='8'/><br/> </form> <form action='#' method='post'> <button id="jiben">基本选择器</button><br/> 根据给定ID来匹配:$('#one').css("background","#bbffaa");<input type='radio' name='jiben' value="1" checked/><br/> 根据给定类名来匹配:$('.mini').css("background","#bbffaa");<input type='radio' name='jiben' value="2"/><br/> 根据元素名来匹配:$('div').css("background","#bbffaa");<input type='radio' name='jiben' value="3"/><br/> 根据通配符来匹配:$('*').css("background","#bbffaa");<input type='radio' name='jiben' value="4"/><br/> 根据选择器来匹配:$('span,#two').css("background","#bbffaa");<input type='radio' name='jiben' value="5"/><br/> </form> <form action="#" method="post"> <button id="cengci">层次选择器</button><br/> 后代选择器:$('body div').css("background","#bbffaa")<input type="radio" name="cengci" value='1' checked/><br/> 子选择器:$('body>div').css("background","#bbffaa")<input type="radio" name="cengci" value='2'/><br/> next_1选择:$('.one+div').css("background","#bbffaa")<input type="radio" name="cengci" value='3'/><br/> siblings_1:$('#two~div').css("background","#bbffaa")<input type="radio" name="cengci" value="4"/><br/> next_2选择:$(".one".next("div")).css("background","#bbffaa")<input type="radio" name="cengci" value='5'/><br/> siblings_2:$('#two').nextAll('div').css("background","#bbffaa")<input type="radio" name="cengci" value='6'/><br/> 同胞选择器:$('#two').siblings('div').css("background","#bbffaa")<input type="radio" name="cengci" value='7'/><br/> </form> <form action="#" method="post"> <button id="guolv">基本过滤选择器</button><br/> 选取第一个元素:$('div:first').css("background","#bbffaa");<input type="radio" name="guolv" value='1' checked/><br/> 选取最后一个元素:$('div:last).css("background","#bbffaa");<input type="radio" name="guolv" value='2'/><br/> 去除所有与给定选择器匹配的元素:$('div:not(.one)').css("background","#bbffaa");<input type="radio" name="guolv" value="3"/><br/> 选取索引是偶数的所有元素,索引从0开始:$('div:even').css("background","#bbffaa");<input type="radio" name="guolv" value='4'/><br/> 选取索引是奇数的所有元素,索引从0开始:$('div:odd').css("background","#bbffaa");<input type="radio" name="guolv" value='5'/><br/> 选取索引等于index的元素(index从0开始):$('div:eq(3)').css("background","#bbffaa");<input type="radio" name="guolv" value='6'/><br/> 选取索引大于index的元素(index从0开始):$('div:gt(3)').css("background","#bbffaa");<input type="radio" name="guolv" value='7'/><br/> 选取索引小于index的元素(index从0开始):$('div:lt(3)').css("background","#bbffaa");<input type="radio" name="guolv" value='8'/><br/> 选取所有的标题元素,例如 h1,h2,h3等等:$(':header').css("background","#bbffaa");<input type="radio" name="guolv" value='9'/><br/> 选取当前正在执行动画的所有元素:$(':animated').css("background","#bbffaa");<input type="radio" name="guolv" value='0'/><br/> </form> <form action="#" method="post"> <button id="guolv_content">内容过滤选择器</button><br/> 选取含有指定文本内容的元素:$('div:contain(di)').css("background","#bbffaa");<input type="radio" name="guolv_c" value='1'/><br/> 选取不包含元素或者文本的空元素:$('div:empty').css("background","#bbffaa");<input type="radio" name="guolv_c" value='2'/><br/> 选取含有选择器所匹配的元素的元素:$('div:has(.mini)').css("background","#bbffaa");<input type="radio" name="guolv_c" value='3'/><br/> 选取含有子元素或者文本的元素:$('div:parent').css("background","#bbffaa");<input type="radio" name="guolv_c" value='4'/><br/> </form> <form action="#" method="post"> <button id="filter_visibe">可见性过滤选择器</button><br/> 选取所有不可见的元素:$('div:hidden').show(3000)(<input type='radio' name="guolv_v" value='1' checked/><br/> 选取所有可以见的元素:$('div:visible').css("background","#FF6500");<input type='radio' name="guolv_v" value='2' checked/><br/> </form> <form action='#' method="post"> <button id="filter_attribute">属性过滤选择器</button><br/> 选取拥有此属性的元素:$('div[title]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='1' checked/><br/> 选取属性的值为value的元素:$('div[title=test]).css("background","#bbffaa");<input type='radio' name='filter_attri' value='2'/><br/> 选取属性的值不等于value的元素:$('div[title!=test]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='3'/><br/> 选取属性的值以value开始的元素:$('div[title^=te]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='4'/><br/> 选取属性的值以value结束的元素:$('div[title$=st]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='5'/><br/> 选取属性的值含有value的元素:$('div[title*=es]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='6'/><br/> 用属性选择器合并成一个符合属性选择器,没选择一次,就缩小一次范围:$('div[id][title*=es]').css("background","#bbffaa");<input type='radio' name='filter_attri' value='7'/><br/> </form> </td></tr></table> </body> </html> 
=====================以上代码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