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 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
分享ES6的7个实用技巧
Jan 18 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 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
PHP5 字符串处理函数大全
2010/03/23 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
php格式文件打开的四种方法
2018/02/24 PHP
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
jquery replace方法去空格
2017/05/08 jQuery
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python中包的用法及安装
2020/02/11 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
南京某公司笔试题
2013/01/27 面试题
英文简历中的自我评价用语
2013/12/09 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
三严三实对照检查材料
2014/09/22 职场文书
财产分割协议书范本
2014/11/03 职场文书
2014年设计师工作总结
2014/11/25 职场文书
个人事迹材料范文
2014/12/29 职场文书
上课说话检讨书
2015/01/27 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书