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学习笔记4 Eval函数
Jan 11 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
VUE长按事件需求详解
Oct 18 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
vue学习笔记之作用域插槽实例分析
Feb 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
利用“多说”制作留言板、评论系统
2015/07/14 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
Prototype源码浅析 Number部分
2012/01/16 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
python插入数据到列表的方法
2015/04/30 Python
python实现备份目录的方法
2015/08/03 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
python map比for循环快在哪
2020/09/21 Python
详解python polyscope库的安装和例程
2020/11/13 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
校园十大歌手策划书
2014/02/01 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
小学语文国培研修日志
2015/11/13 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
为什么RedisCluster设计成16384个槽
2021/09/25 Redis