`
IT少年
  • 浏览: 74430 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 中 first 与 first-child选择器的区别

阅读更多
<body>
<table>
     <tr><td></td></tr>
</table>

<table>
     <tr><td></td></tr>
</table>
<div>   </div>
</body>
例子 html 如上
$("table tr:first")  得到的是第一个table 中的 第一个 tr对象 ;
$("table tr:first-child")  得到的是每个table 中的 第一个 tr对象 ;
$("body  table:first) 得到的是第一个table r对象 ;

$("body  table:first-child) 得到的是 一个 空的 jquery 对象 并没有得到预想的第一个table,因为  body 的子标签 中 并不是 全部的table  ,还有 div  ,所以 就 得不到任何东西,$("table tr:first")  得到的是第一个table 中的 第一个 tr对象 是因为 table 中 直接子标签都是tr;




分享到:
评论
3 楼 IT少年 2015-11-03  
zhizhen23 写道
大神,关于$("body table:first-child")获取不到值能不能再清晰一点么~不是很忙明白~



时间太久了,我也忘记正确不正确了
$("body table:first-child")获取不到值的 原因,我猜测是 只有body的直接子级全部是table时,才能拿到,例子中直接子级还有一个div,所以获取不到。希望你能验证下。谢了

2 楼 zhizhen23 2015-11-03  
大神,关于$("body table:first-child")获取不到值能不能再清晰一点么~不是很忙明白~
1 楼 zhu1033527427 2013-04-14  
刚刚在学这个知识点,看了你的这篇文章,有一个地方不明白,那个body  table:first-child可以说的再清晰点吗,谢啦!

相关推荐

    jQuery中:first-child选择器用法实例

    在jQuery中,`:first-child`选择器是一种非常实用的定位元素的方法,它允许开发者精确地选取父元素下的第一个子元素。这个选择器是基于CSS选择器标准,因此不仅在jQuery中,也在纯CSS中同样可用。`:first-child`选择...

    浅谈jquery选择器 :first与:first-child的区别

    `:first`选择器是jQuery的一个特殊选择器,它会选取匹配该选择器的元素集合中的第一个元素。例如,当使用`$('ul li:first')`时,它会选择所有`ul`元素下的第一个`li`元素,这里的结果是`John`所在的`li`。`:first`并...

    jQuery中:last-child选择器用法实例

    在jQuery中,`:last-child`选择器是一种非常实用的定位元素的方法,它允许开发者精确地选取父元素下的最后一个子元素。这个选择器的功能和定义在于,它可以匹配那些在其父元素的所有子元素中处于最后一个位置的元素...

    Jquery表单-层级-内容-属性-子元素选择器知识点整理

    在JQuery中,表单元素选择器主要用于选择表单中的特定元素,如按钮、输入框等。这些选择器简化了DOM操作,使得开发者能够更加高效地对表单进行操作。 - **`$(":button")`**:选择所有 `&lt;button&gt;` 元素以及具有 `...

    jQuery :nth-child前有无空格的区别分析

    在CSS和jQuery中,`:nth-child`选择器是用来匹配元素集合中特定位置的子元素的。这个选择器的语法是`:nth-child(an+b)`,其中`an`和`b`是整数,用来指定元素的位置。然而,在实际使用中,`:nth-child`前的空格有着...

    IE8下CSS3选择器nth-child() 不兼容问题的解决方法

    在CSS3中,`nth-child()`选择器是一个强大的工具,允许开发者基于元素在兄弟元素中的位置来应用样式。然而,这个选择器在IE8及更低版本的浏览器中并不支持,导致了兼容性问题。本文将深入探讨这个问题,并提供解决...

    jQuery+css last-child实现选择最后一个子元素操作示例

    // 使用:last-child选择器 $('div p:last-child').addClass("red"); // 这段代码将选择所有div元素内的最后一个直接子元素p,即使其他div内也有同名的p元素,只有每个div内的最后一个p会被选中 }); &lt;p&gt;...

    Web前端开发技术-Jquery选择器.pptx

    【jQuery选择器】是Web前端开发技术中一个重要的部分,它极大地简化了DOM元素的选取和操作。jQuery选择器分为多种类型,包括基本选择器、层级选择器、筛选选择器和其他选择器。 **1. 基本选择器** 基本选择器与CSS...

    Jquery 选择器整理

    基本选择器是jQuery中最常用的类型之一,它们提供了简单的DOM元素选择方式。通过这些选择器,开发者可以快速定位到页面中的特定元素。 **代码示例与返回值:** 1. **根据给定的ID匹配一个元素** - **选择器:** `#...

    jQuery选择器.rar

    这个名为"jQuery选择器.rar"的压缩包文件显然包含了关于jQuery选择器的相关学习资源,可能包括示例代码、教程文档等。这些内容可能与《锋利的jQuery第二版》这本书中的章节相匹配,该书是jQuery学习的经典参考资料之...

    jquery 选择器 描述

    在深入探讨jQuery选择器及其应用之前,我们先简要回顾一下jQuery是什么。jQuery是一个快速、简洁的JavaScript库,它的设计宗旨是“写得更少,做得更多”。它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互,...

    jQuery选择器基础知识

    总结,jQuery选择器是提升JavaScript编程效率的关键工具,理解和熟练运用各种选择器可以让你在网页开发中游刃有余。通过阅读提供的源代码和PPT,你将进一步加深对jQuery选择器的理解,更好地应用于实际项目。

    jquery选择器学习文档

    下面将详细介绍给定文件中提及的各类 JQuery 选择器。 1. **基本选择器** - `#id`:通过ID匹配唯一元素,例如`$("#myId")`会找到ID为`myId`的元素。 - `Element`:根据元素名称匹配所有同名元素,如`$("div")`会...

    jQuery选择器介绍,便于记忆

    ### jQuery选择器详解 #### 一、基本选择器 **1.1 #id** - **描述**: 通过指定的ID来匹配单个元素。 - **示例**: `$("#myId")` 将会选中ID为`myId`的元素。 **1.2 .class** - **描述**: 通过指定的类名来匹配一组...

    jquery选择器及jquery表单操作

    其中,选择器是jQuery的核心特性之一,它提供了丰富的语法来选取页面中的DOM元素,使开发者能够更灵活、高效地操纵页面元素。 #### 基本选择器 - **ID选择器**:`$("#myElement")`用于选取拥有特定ID的元素,由于...

    jQuery选择器大全(48个代码片段 21幅图演示)

    以下是一份详细的知识点概述,涵盖了jQuery中的主要选择器及其应用。 1. **基本选择器** - `$()`:这是jQuery的基本选择器,用于选取一个或多个元素。例如:`$("div")`会选择所有`&lt;div&gt;`元素。 - `#id`:通过ID...

    《锋利的jQuery》(高清扫描版-有书签).pdf

    在jQuery中,选择器是非常重要的一个概念,它们用于定位文档中的元素。其中,“直接子元素”与“后代元素”的区别是一个常见的主题: - **直接子元素**: 指的是某个元素的直接子节点。例如,在HTML中,`&lt;div&gt;` 元素...

    jQuery学习资料之万能的选择器

    - **伪类选择器**:`:hover`、`:active`、`:focus`、`:first-child`等。 - **组合选择器**:通过逗号将多个选择器组合,选取满足任一条件的元素。 例如,`$("input[type='text']")`将选取所有类型为`text`的输入...

Global site tag (gtag.js) - Google Analytics