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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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 操作符与控制结构
2012/03/07 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
Node.js编码规范
2014/07/14 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
Python循环语句中else的用法总结
2016/09/11 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python interpolate插值实例
2020/07/06 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
股东合作协议书
2014/04/14 职场文书
有关爱国演讲稿
2014/05/07 职场文书
高中校园广播稿
2014/10/21 职场文书
个人作风建设总结
2014/10/23 职场文书
学习焦裕禄观后感
2015/06/09 职场文书