`
IT少年
  • 浏览: 73020 次
  • 性别: 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选择器用法。分享给大家供大家参考。具体分析如下: 此选择器能够匹配父元素的第一个子元素。 语法结构: 代码如下:$(“:first-child”) 此选择器一般也要和其他选择器配合使用,...

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

    下面小编就为大家带来一篇浅谈jquery选择器 :first与:first-child的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

    :nth-child(index)子元素过滤选择器的描述是:选取每个父元素下的弟index个子元素,index从1开始。

    CSS3伪类选择器;例如:E:root、E:not等等

    /* CSS3伪类选择器 ... E:not 否定选择器,它和JQuery中的:not选择器一模一样,可以选择除... E:nth-of-type(1) 表示根据指定元素的类型设置第一个元素的样式,其实该选择器类似于nth-child选择器 E:empty 空选择器,

    jQuery子属性过滤选择器用法分析

    1. :first-child选择器 用于选择其父级的第一个子元素的所有元素,格式: 代码如下:$(“selector:first-child”) 如: 代码如下:$(“ul:first-child”).css(“text-decoration”, “underline”).css(“color”, ...

    jQuery子选择器与可见性选择器实例分析

    本文实例讲述了jQuery子选择器与可见性选择器。分享给大家供大家参考,具体如下: 子元素选择器与可见性选择器 子元素选择器是允许利用子元素的位置进行获取的选择器 子内容选择器3种用法 E:first-child 选择所有...

    jQuery完全实例.rar

    这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最...

    JQuery新版中文手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent &gt; child prev + next prev ~ siblings 基本 :first :last :not(selector) :even :odd :eq...

    jquery子元素过滤选择器使用示例

    代码如下: :nth-child(‘索引值’)//获取指定元素下的某个子元素的位置,索引从1开始;... //$(‘li:first-child’).addClass(‘class1’); //只有1个子元素 $(‘li:only-child’).addClass(‘class1’);

    jQuery子元素过滤选择器用法示例

    主要介绍了jQuery子元素过滤选择器用法,结合实例形式分析了jQuery中nth-child、first-child、last-child、only-child等进行子元素过滤操作的相关技巧,需要的朋友可以参考下

    简单讲解jQuery中的子元素过滤选择器

    子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。 $('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 $('li:last-child').css('background', '#ccc'); //每个父...

    css选择器apolo

    * 参考: jquery css选择器 * 目前实现 * #id 根据给定的ID匹配一个元素 * tagName 匹配给定的元素名的所有元素 * .class 匹配class=class的所有元素 //非IE下,可以直接find * selector1,selector2 将每一个...

    jQuery 1.4.1 中文参考

    3. 选择器 37 3.1 基本 37 3.1.1 #id 37 3.1.2 element 38 3.1.3 .class 38 3.1.4 * 39 3.1.5 selector1,selector2,selectorN 39 3.2 层级 40 3.2.1 ancestor descendant 40 3.2.2 41 3.2.3 prev + next 41 3.2.4 ...

    jQuery Selectors(选择器)的使用(七、子元素篇)

    本篇讲解::nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG...

    详细介绍CSS中的伪选择器

     我们知道在jquery中有一种选择器叫做“子类选择器”,对应的有:nth-child,:first-child,:last-child,:only-child,这回在CSS中同样 可以办到,可以说一定程度上缓解了jquery的压力,下面简单举个例子。&lt;head...

    Jquery 1.3 简体中文手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent &gt; child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :...

    JQuery 1.3 中文参考手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent &gt; child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :...

Global site tag (gtag.js) - Google Analytics