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动态加载js三种方法实例
Aug 03 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
JS实现网站吸顶条
Jan 08 Javascript
React实现评论的添加和删除
Oct 20 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 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Python的Django框架中的表单处理示例
2015/07/17 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
护士毕业生自我鉴定
2014/02/08 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
我的收音机情缘
2022/04/05 无线电
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL