jQuery中eq()方法用法实例


Posted in Javascript onJanuary 05, 2015

本文实例讲述了jQuery中eq()方法用法。分享给大家供大家参考。具体分析如下:

此方法能够获取匹配元素集上的相应位置索引的元素。
匹配元素集上元素的位置索引是从0开始的。

语法结构:

$(selector).eq(index)

参数列表:

参数 描述
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(){

  $("li").eq(1).css("color","blue")

})

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML专区</li>

    <li>Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

把索引是1的li元素中的字体颜色设置为蓝色。

实例二:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>点击弹出窗口效果-三水点靠木</title>

<style type="text/css">

.font{

  font-size:18px;

  color:yellow

}

.bg{

  background:#336;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("li").eq(-1).css("color","blue")

})

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML专区</li>

    <li>Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

索引是负数的时候,从最后一个元素往回计数。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
react中Suspense的使用详解
Sep 01 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
js实现内置计时器
Dec 16 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 #Javascript
jQuery中toggleClass()方法用法实例
Jan 05 #Javascript
jQuery中removeClass()方法用法实例
Jan 05 #Javascript
jQuery中addClass()方法用法实例
Jan 05 #Javascript
js Calender控件使用详解
Jan 05 #Javascript
js的回调函数详解
Jan 05 #Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 #Javascript
You might like
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Flask之flask-session的具体使用
2018/07/26 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python版本单链表实现代码
2018/09/28 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
jupyter实现重新加载模块
2020/04/16 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
什么是URL
2015/12/13 面试题
业务总经理岗位职责
2014/02/03 职场文书
医师定期考核实施方案
2014/05/07 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
简爱读书笔记
2015/06/26 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android