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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 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
Zerg兵种介绍
2020/03/14 星际争霸
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Vue数据绑定实例写法
2019/08/06 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python环境变量设置方法
2016/08/28 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python扫描端口的实现
2021/01/25 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
C#面试问题
2016/07/29 面试题
shell程序中如何注释
2012/02/17 面试题
师范生实习自我鉴定
2013/11/01 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis