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 valueOf 使用方法
Dec 28 Javascript
eval的两组性能测试数据
Aug 17 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
详解javascript遍历方式
Nov 11 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 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
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
大专生简历的自我评价
2013/11/26 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
青蓝工程实施方案
2014/03/27 职场文书
球队口号
2014/06/18 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
安徽导游词
2015/02/12 职场文书
工程质量保证书
2015/05/09 职场文书
中秋节祝酒词
2015/08/12 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技