jQuery中:eq()选择器用法实例


Posted in Javascript onDecember 29, 2014

本文实例讲述了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="https://3water.com/" />

<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="https://3water.com/" />

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

Javascript 相关文章推荐
javascript parseInt 函数分析(转)
Mar 21 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
js单词形式的运算符
May 06 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
根据配置文件加载js依赖模块
Dec 29 #Javascript
JavaScript中的console.dir()函数介绍
Dec 29 #Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 #Javascript
小米公司JavaScript面试题
Dec 29 #Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 #Javascript
JavaScript中的console.trace()函数介绍
Dec 29 #Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 #Javascript
You might like
openPNE常用方法分享
2011/11/29 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
浅谈python中set使用
2016/06/30 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Python代码需要缩进吗
2020/07/01 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
运动会广播稿80字
2014/01/23 职场文书
小学教学随笔感言
2014/02/26 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
火灾现场处置方案
2014/05/28 职场文书
社区戒毒工作方案
2014/06/04 职场文书
先进员工获奖感言
2014/08/14 职场文书
村级个人对照检查材料
2014/08/22 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
烈士陵园观后感
2015/06/08 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP