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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
浅析Ajax语法
Dec 05 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
js实现查询商品案例
Jul 22 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
咖啡常见的种类
2021/03/03 新手入门
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
JS中async/await实现异步调用的方法
2019/08/28 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python中字符串对齐方法介绍
2015/05/21 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python根据文本生成词云图代码实例
2019/11/15 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
2014年团委工作总结
2014/11/13 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书