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 相关文章推荐
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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
一步一步学习PHP(3) php 函数
2010/02/15 PHP
php实现Mysql简易操作类
2015/10/11 PHP
php实现微信发红包
2015/12/05 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
python简单的函数定义和用法实例
2015/05/07 Python
python提取字典key列表的方法
2015/07/11 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
python创造虚拟环境方法总结
2019/03/04 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
python Cartopy的基础使用详解
2020/11/01 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
大学生的创业计划书就该这么写
2014/01/30 职场文书
六一儿童节主持词
2014/03/21 职场文书
诚实守信演讲稿
2014/09/01 职场文书
公司年会开场白
2015/06/01 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫