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插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
Javascript复制实例详解
Jan 28 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 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文件
2007/01/04 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php的4种常用运行方式详解
2016/12/22 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
php7性能提升的原因详解
2019/10/13 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
让table变成exls的示例代码
2014/03/24 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python中的列表生成式与生成器学习教程
2016/03/13 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
python psutil监控进程实例
2019/12/17 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
七夕相亲活动策划方案
2014/08/31 职场文书
廉洁自律个人总结
2015/02/14 职场文书
怎样写好工作计划
2019/04/10 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android