首页 > js教程 > 正文

Jquery :eq(index)的使用与定义

原创 2018-05-16 15:36:28 0 122
赞助会员专享特权
jQuery的:eq(index)选择器用于获取匹配的元素中指定索引的元素,将其封装为jQuery对象并返回。

注意:

eq(index)选择器与:nth-child(n)选择器的不同之处在于:
:eq(index)选择器只匹配一个元素,并且是所有匹配到的元素中的第index + 1个元素(索引index从0开始算起);
:nth-child(n)选择器则需要判断匹配到的元素是否是其父元素的第n个子元素或符合特定要求(序号n从1开始算起),如果是就保留,否则将被舍弃。

语法

// 这里的selector表示具体的选择器
// 这里的index表示指定的索引值
jQuery( "selector:eq(index)" )

参数

1573.png

1.8 新增支持参数index可以为负数。如果index为负数,则将其视作length + index,这里的length指的是匹配到的元素的个数(也可以理解为从后往前计数)。

返回值

返回封装了匹配选择器selector的DOM元素中指定索引index处的元素的jQuery对象。

如果索引值超出有效范围,则返回空的jQuery对象。

示例&说明

以下面这段HTML代码为例:

<p id="n1">
    <p id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </p>
    <p id="n7">
        <ul id="n8">
            <li id="n9">item1</li>
            <li id="n10">item2</li>
        </ul>
    </p>
</p>

现在,我们想要查找第2个p标签,则可以编写如下jQuery代码:

// 选择了id为n2的一个元素
$("p:eq(1)");

接着,获取匹配ul li选择器的元素中的第4个元素,则可以编写如下jQuery代码:

// 选择了id为n9的一个元素
$("ul li:eq(3)");

1574.png

概述

匹配一个给定索引值的元素

参数

indexNumberV1.0

从 0 开始计数

描述:

查找第二行

HTML 代码:

<table> 
<tr>
<td>Header 1</td>
</tr> 
<tr>
<td>Value 1</td>
</tr> 
<tr>
<td>Value 2</td>
</tr> 
</table>

jQuery 代码:

$("tr:eq(1)")

结果:

[ <tr><td>Value 1</td></tr> ]

以上就是Jquery :eq(index)的使用与定义的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:Jquery index 定义 使用
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    黄舟

    人生最曼妙的风景,竟是内心的淡定与从容!

    最近文章
    jQuery中关于bind()函数详解 51
    php实现字符串匹配算法之sunday算法的示例 83
    css中关于hideFocus的使用详解 71

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节