jQuery中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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery中hasClass()方法用法实例

    本文实例讲述了jQuery中hasClass()方法用法.分享给大家供大家参考.具体分析如下: 此方法验证匹配元素是否包含指定的类,包含则返回true,否则返回false. 语法结构: 复制代码 代码如下: $(selector).hasClass(class) 参数列表: 参数 描述 class 用于匹配的类名. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8&q

  • jQuery中has()方法用法实例

    本文实例讲述了jQuery中has()方法用法.分享给大家供大家参考.具体分析如下: 此方法保留包含特定后代的匹配元素. .has()方法将会从原始的jQuery对象中重新创建一组匹配的对象. 方法通过删选参数将会遍历原先对象的后代,含有匹配后代的对象将得以保留. 语法结构一: 复制代码 代码如下: $(selector).has(expr) 参数列表: 参数 描述 expr 字符串选择器. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <h

  • jQuery中is()方法用法实例

    本文实例讲述了jQuery中is()方法用法.分享给大家供大家参考.具体分析如下: 此方法使用参数来检查匹配元素集合. 如果其中至少有一个元素符合这个给定的参数就返回true,否则返回false. 语法结构一: 复制代码 代码如下: $(selector).is(expr) 参数列表: 参数 描述 expr 字符串值,供匹配当前元素集合的选择器表达式. 实例代码: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta cha

  • jQuery中slice()方法用法实例

    本文实例讲述了jQuery中slice()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以选取匹配元素集的子集. 语法结构: 复制代码 代码如下: $(selector).slice(start, end) 参数列表: 参数 描述 start 开始选取子集的位置.第一个元素索引是0.如果是负数,则从集合的尾部开始选起. end 结束选取子集的位置,如果不指定,则就是匹配元素集的结尾. 实例代码: 实例一: 选取第一个元素 复制代码 代码如下: <!DOCTYPE html> <

  • jQuery中filter()方法用法实例

    此方法能够筛选出与指定表达式或者方法返回值相匹配的元素或者元素集合. 语法结构一: 筛选出与指定表达式匹配的元素集合. 复制代码 代码如下: $(selector).filter(expr) 参数列表: 参数 描述 expr 字符串值,用于筛选当前元素集合的选择器表达式. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name

  • jQuery中last()方法用法实例

    本文实例讲述了jQuery中last()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素集合中的最后一个元素. 语法: 复制代码 代码如下: $(selector).last() 实例: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • jQuery中map()方法用法实例

    本文实例讲述了jQuery中map()方法用法.分享给大家供大家参考.具体分析如下: 此方法将一组元素转换成其他数组(不论是否是元素数组). 可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式. 语法结构: 复制代码 代码如下: $("selector").map(function) 参数列表: 参数 描述 function 给每个元素执行的函数 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <h

  • jQuery中first()方法用法实例

    本文实例讲述了jQuery中first()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素集合中的第一个元素. 语法结构: 复制代码 代码如下: $(selector).first() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="h

  • jQuery中not()方法用法实例

    本文实例讲述了jQuery中not()方法用法.分享给大家供大家参考.具体分析如下: 此方法删除与指定表达式匹配的元素. 语法结构一: 复制代码 代码如下: $(selector).not(expr) 参数列表: 参数 描述 expr 字符串值,定义筛选表达式. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&quo

  • 浅谈jQuery中对象遍历.eq().first().last().slice()方法

    浅谈jQuery中对象遍历.eq().first().last().slice()方法

    eq(index):将集合中的索引为index的元素提取出来. first():返回集合中的第一个元素. .last():防护集合中的最后一个元素. .slice(start[,end]):返回集合中的给定区间段的元素. first()和last()调用eq(),eq()通过slice()实现,slice()通过 .pushStack()实现. 相关源码 285行:用法很奇特,通过一个"+"把可能为字符串的i转换成一个数值. 300~301:先借用数组方法slice()从当前jQuer

随机推荐