jQuery中eq()方法用法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery中eq()方法用法相关的知识,希望对你有一定的参考价值。

这篇文章主要介绍了jQuery中eq()方法用法,实例分析了eq()方法的功能、定义及获取匹配元素集上的相应位置索引元素的使用技巧,需要的朋友可以参考下
 

本文实例讲述了jQuery中eq()方法用法。分享给大家供大家参考。具体分析如下:

此方法能够获取匹配元素集上的相应位置索引的元素。 匹配元素集上元素的位置索引是从0开始的。

语法结构:

复制代码 代码如下:
$(selector).eq(index)

 

参数列表:

参数 描述
index 定义元素在元素集中的索引,从零开始的。
      如果是负数则从最后一个元素往回计数。
      越界无效。

 

实例代码:

实例一:


<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8"/>
 <meta name="author" content="http://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(){
   $("li").eq(1).css("color","blue")
 })
 </script>
 </head>
 <body>
 <div>
   <ul>
     <li>HTML专区</li>
     <li>Javascript专区</li>
     <li>Div+Css专区</li>
     <li>Jquery专区</li>
   </ul>
 </div>
 </body>
 </html>
 
 
 

 

把索引是1的li元素中的字体颜色设置为蓝色。

实例二:


<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8"/>
 <meta name="author" content="http://www.jb51.net/" />
 <title>点击弹出窗口效果-脚本之家</title>
 <style type="text/css">
 .font{
   font-size:18px;
   color:yellow
 }
 .bg{
   background:#336;
 }
 </style>
 <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
   $("li").eq(-1).css("color","blue")
 })
 </script>
 </head>
 <body>
 <div>
   <ul>
     <li>HTML专区</li>
     <li>Javascript专区</li>
     <li>Div+Css专区</li>
     <li>Jquery专区</li>
   </ul>
 </div>
 </body>
 </html>
 
 

 

索引是负数的时候,从最后一个元素往回计数。

希望本文所述对大家的jQuery程序设计有所帮助。

以上是关于jQuery中eq()方法用法的主要内容,如果未能解决你的问题,请参考以下文章

jquery :eq选择器和eq()方法的用法与比较

jquery中eq、gt、and用法

JQuery :eq() 选择器 与 eq()遍历方法

jQuery中get(index)和eq(index)区别和用法

jQuery中attr()方法用法实例

JQuery中DOM事件合成用法