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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
解决layui弹框失效的问题
Sep 09 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 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
php生成随机数的三种方法
2014/09/10 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
音乐教学随笔感言
2014/02/19 职场文书
人事专员的岗位职责
2014/03/01 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
坎儿井导游词
2015/02/09 职场文书
个人总结怎么写
2015/02/26 职场文书
中标通知书格式
2015/04/17 职场文书
入党培养人考察意见
2015/06/08 职场文书
鸦片战争观后感
2015/06/09 职场文书
Java版 简易五子棋小游戏
2022/05/04 Java/Android