jQuery中:eq()选择器用法实例
本文实例讲述了jQuery中:eq()选择器用法。分享给大家供大家参考。具体分析如下:
此选择器匹配一个给定索引值的元素。
元素的位置索引从0算起。
语法结构:
$(":eq(index)")
此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:
$("li:eq(1)").css("color","green")
以上代码是将li元素集合中索引为1(也就是第二个li)的li中的字体颜色设置为绿色。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":eq()")等同于$("*:eq()")。
参数列表:
参数 | 描述 |
index | 给定的索引值。 |
实例代码:
实例一:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//www.jb51.net/" /> <title>:eq选择器-脚本之家</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ $("li:eq(1)").css("color","blue"); }); }); </script> </head> <body> <ul> <li>html专区</li> <li>div+css专区</li> <li>jQuery专区</li> <li>Javascript专区</li> </ul> <button id="btn">点击查看效果</button> </body> </html>
以上代码能够将li元素集合中,索引值为1的li元素中的字体颜色设置为绿色,因为索引值是从0开始的,所以以上代码是将第二个li中的字体颜色设置为绿色。
实例二:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//www.jb51.net/" /> <title>:eq选择器-脚本之家</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ $(":eq(10)").css("color","blue"); }); }); </script> </head> <body> <ul> <li>html专区</li> <li>div+css专区</li> <li>jQuery专区</li> <li>Javascript专区</li> </ul> <div> <p>脚本之家欢迎您</p> <span class="second">太阳出来了</span> </div> <button id="btn">点击查看效果</button> </body> </html>
由于以上代码并没有指定与:eq()选择器相配合使用的选择器,所以就默认和*选择器配合使用,能够匹配所有元素,这样就会将索引值为10的元素中的字体颜色设置为绿色。
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
jquery实现tab键进行选择后enter键触发click行为
本文主要介绍了jquery键盘事件实现tab键进行选择后enter键触发click行为的方法,这种使用场景为当首页有几个链接需要选择的时候,使用键盘就可以进行触发行为。下面跟着小编一起来看下吧2017-03-03初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
SageCRM的查询条件屏幕的条件比较多,会占用界面,用户希望首先显示常用的查询条件,然后点击展开的按钮,可以看到一些不常用的查询条件2011-12-12
最新评论