jQuery 选择器(61种)整理总结(2)

<p>这是索引值为0的p标签</p> <p>这是索引值为1的p标签</p> <p>这是索引值为2的p标签</p> <p>这是索引值为3的p标签</p> <script type="text/javascript"> $(function(){ $("p:odd").css("color","red"); }); </script>

结果:

这是索引值为0的p标签

这是索引值为1的p标签

这是索引值为2的p标签

这是索引值为3的p标签

14. :eq(index) : 匹配一个给定索引值的元素

<p>这是索引值为0的p标签</p> <p>这是索引值为1的p标签</p> <p>这是索引值为2的p标签</p> <script type="text/javascript"> $(function(){ $("p:eq(1)").css("color","red"); }); </script>

结果:

这是索引值为0的p标签

这是索引值为1的p标签

这是索引值为2的p标签

15. :gt(index) : 匹配所有大于给定索引值的元素

<p>这是索引值为0的p标签</p> <p>这是索引值为1的p标签</p> <p>这是索引值为2的p标签</p> <script type="text/javascript"> $(function(){ $("p:gt(1)").css("color","red"); }); </script>

结果:

这是索引值为0的p标签

这是索引值为1的p标签

这是索引值为2的p标签

16. :lang(language) : 选择指定语言的所有元素

<div lang="not">这是lang="not"的div标签</div> <div lang="en">这是lang="en"的div标签</div> <div lang="en-us">这是lang="en-us"的div标签</div> <script type="text/javascript"> $(function(){ $("div:lang(en)").css("color","red"); }); </script>

结果:

这是lang="not"的div标签

这是lang="en"的div标签

这是lang="en-us"的div标签

17. :last() : 获取最后个元素

<div> <p>这是第一个p标签</p> <p>这是第二个p标签</p> <p>这是第三个p标签</p> </div> <script type="text/javascript"> $(function(){ $("p:last").css("color","red"); }); </script>

结果:

这是第一个p标签

这是第二个p标签

这是第三个p标签

18. :lt(index) : 匹配所有小于给定索引值的元素

<p>这是索引值为0的p标签</p> <p>这是索引值为1的p标签</p> <p>这是索引值为2的p标签</p> <script type="text/javascript"> $(function(){ $("p:lt(1)").css("color","red"); }); </script>

结果:

这是索引值为0的p标签

这是索引值为1的p标签

这是索引值为2的p标签

19. :header : 匹配如 h1, h2, h3之类的标题元素

<p>这是p标签</p> <h3>这是h3标签</h3> <h4>这是h4标签</h4> <script type="text/javascript"> $(function(){ $(":header").css("color","red"); }); </script>

结果:

这是p标签

这是h3标签

这是h4标签

20. :animated : 匹配所有正在执行动画效果的元素

<!--对不在执行动画的元素执行一个动画--> <button>Run</button> <div></div> <script type="text/javascript"> $(function(){ $("#run").click(function(){ $("div:not(:animated)").animate({left:100+"px"},1000); }); });

由于此处无法插入js代码,请自行复制代码查看效果

21. :focus : 匹配当前获取焦点的元素

<input type="text" /> <script type="text/javascript"> $(function(){ $("input").focus(); //让input自动获取焦点 $("input:focus").css("background","red"); });

结果:

22. :root : 选择该文档的根元素,在HTML中,文档的根元素,和$(":root")选择的元素一样,永远是<html>元素

<script type="text/javascript"> $(":root").css("background-color","yellow"); </script>

23. :target : 选择由文档URI的格式化识别码表示的目标元素

例如,给定的URI #foo, $( "p:target" ),将选择<p>元素。

24. :contains(text) : 匹配包含给定文本的元素

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjgwg.html