像写css选择器一样写jQuery选择器（二）【jQuery入门五】

时间：2009年07月05日作者：愚人码头查看次数:5,183 views评论次数：2

四：简单的过滤选择器

:animated：匹配所有正在执行动画效果的元素集合；
:eq(index)：匹配索引为 index 的一个元素，例如：$(“div:eq(0)”)//第一个div；
:even：匹配索引为偶数（双数）的元素集合，例如：$(“div:even”)；
dd：匹配索引为奇数（单数）的元素集合，例如：$(“div:odd”)；
:first：匹配找到的第一个元素，等价于:eq(0)，例如：$(“div:first”)；
:gt(index) ：匹配索引大于 index 的元素集合，例如：$(“div:gt(0)”)//除了第一个div外的所以div；
:lt(index)：匹配索引小于于 index 的元素集合，例如：$(“div:lt(0)”)；
:header：匹配h1-h6的所有元素集合；
:last：匹配找到的最后一个元素，例如：$(“div:last”)//最后一个div；
:not(selector)：去除所有与给定选择器匹配的元素，例如：$(“input:not(:checked)”)//除了被选中的所有input；

示例代码：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery简单的选择器</title> <script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery简单的选择器</h1> <div>javascript森林群规有<span class="num">120</span>个会员,其中管理员<span class="num">120</span>个；</div> <div>javascript森林群博客目前有<span>30</span>作者,<span>10</span>篇文章；</div> <p>我是愚人码头</p> <div class="txt"><span>你叫什么名字呢？</span> <span>我爱javascript森林；</span> <span>以为森林里有我好好多的朋友；</span> <span>欢迎你加入我们；</span><div> <div> <input type="submit" name="button" id="button1" value="测试$('div:eq(1)')" /> <input type="submit" name="button" id="button2" value="测试$('.txt span:even')" /> <input type="submit" name="button" id="button3" value="测试$('.txt span:odd')" /> <input type="submit" name="button" id="button4" value="测试$('span:first')" /> <input type="submit" name="button" id="button5" value="测试$('span:gt(0)')" /> <input type="submit" name="button" id="button6" value="测试$('div:not(:last)')" /> </div> <script type="text/javascript"> $(document).ready(function(){ $("#button1").click(function(){ $("div:eq(1)").css("color","#FF0033") }); $("#button2").click(function(){ $(".txt span:even").css("color","#EE5533") }); $("#button3").click(function(){ $(".txt span:odd").css("color","#66ff33") }); $("#button4").click(function(){ $("span:first").css("color","#3300ff") }); $("#button5").click(function(){ $("span:gt(0)").css("color","#990099") }); $("#button6").click(function(){ $("div:not(:last)").css("color","#ff0099") }); }); </script> </div></div></body> </html>

提示：你可以先修改部分代码再运行。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《像写css选择器一样写jQuery选择器（二）【jQuery入门五】》

如果你读了我的文章，觉得有帮助：