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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
Ucren Virtual Desktop V2.0
Nov 07 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
详解vue axios用post提交的数据格式
Aug 07 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
PHP的基本常识小结
2013/07/05 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
使用tensorflow实现线性回归
2018/09/08 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
基于matplotlib xticks用法详解
2020/04/16 Python
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
J2EE相关知识面试题
2013/08/26 面试题
先进个人事迹材料
2014/01/25 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
2015年新教师工作总结
2015/04/28 职场文书
《所见》教学反思
2016/02/23 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏