首页 > 代码库 > JQuery-选择器整理
JQuery-选择器整理
一、基本选择器
1)ID选择器
2)标签选择器
3 ) 类选择器
4 ) 通配符选择器
二、层级选择器
1 ) 包括选择器
2 ) 子选择器
3 ) 相邻选择器
4 ) 兄弟选择器
三、简单的伪类选择器
1 ) 特定位置选择器
2 ) 指定范围选择器
3 ) 排除选择器
四、与内容相关的伪类选择器
1 ) 匹配包括文本选择器
2) 匹配包括元素选择器
3 ) 匹配包括推断选择器
4 ) 解析内容过滤实现原理
五、与元素显示状态相关的伪类选择器
六、匹配子元素的伪类选择器
七、与表单对象相关的伪类选择器
-------------------------------------------------------------------------------------------
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#div1").css("background","red"); }) </script> <title>上机练习</title> </head> <body> <div id="div1">測试盒子</div> </body> </html>
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div").css("color","red"); }) </script> <title>无标题文档</title> </head> <body> <div>div1</div> <div>div2</div> <div>div3</div> </body> </html>
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".red").css("color","red"); }) </script> <title>无标题文档</title> </head> <body> <div class="red">div1</div> <div>div2</div> <div class="red">div3</div> </body> </html>
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("body *").css("color","red"); }) </script> <title>无标题文档</title> </head> <body> <div>DIV</div> <span>SPAN</span> <p>P</p> </body> </html>
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("form input").css({"border":"solid 1px red","background":"blue"}); }) </script> <title>无标题文档</title> </head> <body> 〈form> <fieldset> <label>包括的子文本框 〈input/> </label> <fieldset> <label>包括的孙子文本框 〈input /> </label> </fieldset> </fieldset> </form> <label>非包括的文本框 〈input /> </label> </body> </html>
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div > img").css("border","solid 5px red"); }) </script> <title>无标题文档</title> </head> <body> <div> <span><img src="http://www.mamicode.com/images/bg.jpg" /></span> <img src="http://www.mamicode.com/images/bg.jpg" /> </div> <img src="http://www.mamicode.com/images/bg.jpg" /> </body> </html>
jQuery可以在prev选择器所匹配的元素后,过滤出全部匹配next选择器的紧邻同级元素。
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div + img").css("border","solid 5px red"); }) </script> <title>无标题文档</title> </head> <body> <div> <span><img src="http://www.mamicode.com/images/bg.jpg" /></span> <img src="http://www.mamicode.com/images/bg.jpg" /> </div> <img src="http://www.mamicode.com/images/bg.jpg" /> <img src="http://www.mamicode.com/images/bg.jpg" /> </body> </html>
jQuery可以在prev选择器所匹配的元素后,过滤出全部匹配siblings选择器的同级元素/
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div ~ img").css("border","solid 5px red"); }) </script> <title>无标题文档</title> </head> <body> <div> <span><img src="http://www.mamicode.com/images/bg.jpg" /></span> <img src="http://www.mamicode.com/images/bg.jpg" /> </div> <img src="http://www.mamicode.com/images/bg.jpg" /> <img src="http://www.mamicode.com/images/bg.jpg" /> </body> </html>
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("tr:first").css({"background":"blue","color":"white"}); $("tr:qe(1)").css("background","#F1F5FB"); $("tr:last").css("background","#ff9"); }) </script> <title>无标题文档</title> </head> <body> <table> <tr><th>选择器</th><th>说明</th></tr> <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr> <tr><td>:last</td><td>匹配找到的最后一个元素。
</td></tr> </table> </body> </html>
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("tr:even").css("background","#F1F5FB"); $("tr:odd").css("background","#ff9"); $("tr:first").css({"background":"blue","color":"white"}); }) </script> <title>无标题文档</title> </head> <body> <table> <tr><th>选择器</th><th>说明</th></tr> <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr> <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr> <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr> <tr><td>:last</td><td>匹配找到的最后一个元素。
</td></tr> <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr> <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr> </table> </body> </html>
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("tr:even").css("background","#F1F5FB"); $("tr:odd").css("background","#ff9"); $("tr:first").css({"background":"blue","color":"white"}); $("tr:not(tr:lt(3))").css({"background":"white","color":"black"}); }) </script> <title>无标题文档</title> </head> <body> <table> <tr><th>选择器</th><th>说明</th></tr> <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr> <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr> <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr> <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr> <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr> <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr> </table> </body> </html>
比如。
$("div:has(p)") 匹配全部包括p元素的div元素
<script src="http://www.mamicode.com/jQuery/jquery-1.6.4.js" type="text/javascript" ></script> <script type="text/javascript"> $( function(){ $("dd:contains(‘乔布斯‘)").css("text-decoration","underline"); } ) </script> <title>无标题文档</title> </head> <body> <h2>纪念乔布斯的评论</h2> <dl> <dt>李德0202:</dt> <dd>司法官神风怪盗法国分公司公司发的。国防生大哥,国防生的故事法国。国防生大哥</dd> <dt>啊大法师反对法:</dt> <dd>乔布斯走了。反对反对,放大发射点法,啊大法师法的放大三发,史蒂夫.乔布斯!1955-2011 永远铭记在我们心里!乔布斯,一路走好!
</dd> <dt>啊大法发射点发生的发</dt> <dd>歌功颂德丰功硕德发个三的发个</dd> </dl> </body> </html>
JQuery-选择器整理