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 相关文章推荐
Knockout数组(observable)使用详解示例
Nov 15 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
canvas时钟效果
Feb 16 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
javascript 中的继承实例详解
May 05 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
Python自动生产表情包
2017/03/17 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python批量爬取下载抖音视频
2019/06/17 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
信访工作者先进事迹
2014/01/17 职场文书
音乐器材管理制度
2014/01/31 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
初婚初育证明范本
2014/11/24 职场文书
九九重阳节致辞
2015/07/31 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript