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的一些总结
Nov 03 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
一款基于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 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
JavaScript基本对象
2007/01/11 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
用python绘制樱花树
2020/10/09 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
高中自我鉴定
2013/12/20 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
公司租房协议书范本
2014/10/08 职场文书
学校捐书活动总结
2015/05/08 职场文书
运动会观后感
2015/06/09 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python