脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery 子对象

jQuery 获取对象 定位子对象

 更新时间：2010年05月31日 14:02:29   作者：  
jQuery 获取对象 定位子对象，学习jquery 定位子对象的朋友可以参考下。
选择中的特殊符号:

# 指示 id
. 指示 class
* 全选
, 多选
空格 后代
> 子
~ 兄弟
+ 下一个
: 子(多功能)
() 函数式的过滤与查找

获取 div 下的所有标题对象: $("div :header")
复制代码 代码如下:

<body>
<h3>AAA</h3>
<p>BBB</p>
<h4>CCC</h4>
<div>
<h3>DDD</h3>
<p>EEE</p>
<h4>FFF</h4>
</div>
</body>

获取所有标题对象: $(":header")
复制代码 代码如下:

<body>
<h3>AAA</h3>
<p>BBB</p>
<h4>CCC</h4>
<div>
<h3>DDD</h3>
<p>EEE</p>
<h4>FFF</h4>
</div>
</body>

获取 first, 如: $("li:first") 或 $("li").first() 或 $("ul :first") 或 $("ul li:first")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取每组的 first, 如: $("li:first-child") 或 $("ul li:first-child") 或 $("ul :first-child")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取 last, 如: $("li:last") 或 $("li").last() 或 $("ul :last") 或 $("ul li:last")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取每组的 last, 如: $("li:last-child") 或 $("ul li:last-child") 或 $("ul :last-child")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取第几个, 如(获取第三个, eq 是 0 起): $("li:eq(2)") 或 $("li").eq(2)
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取第几个之后的, 如(获取第三个之后的, gt 是 0 起): $("li:gt(2)")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取第几个之前的, 如(获取第三个之前的, lt 是 0 起): $("li:lt(2)")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取索引值是偶数的, 如(even 是 0 起): $("li:even")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取索引值是奇数的, 如(odd 是 0 起): $("li:odd")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取每组第偶数个, 如(nth-child 是 1 起): $("li:nth-child(even)")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取每组第奇数个, 如(nth-child 是 1 起): $("li:nth-child(odd)")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

获取每组第几个, 譬如第 2 个(nth-child 是 1 起): $("li:nth-child(2)")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

用表达式指示每组的第几个, 如(nth-child 是 1 起): $("li:nth-child(3n-1)")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

如果是父元素中唯一的子元素, 如: $("li:only-child")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>

:not 是对其他选择的取反, 如: $("li:not(li:first-child)")
复制代码 代码如下:

<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
您可能感兴趣的文章:

相关文章

  • DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

    DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

    DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们，下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
    2015-08-08
  • jquery插件Jplayer使用方法简析

    jquery插件Jplayer使用方法简析

    这篇文章主要介绍了jquery插件Jplayer使用方法简析，具有实用价值，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 使用jQuery validate 验证注册表单实例演示

    使用jQuery validate 验证注册表单实例演示

    Validation是jQuery的插件，提供的方法可以大大简化验证表单的工作，接下来为大家详细介绍下使用方法，感兴趣的各位可以参考下哈
    2013-03-03
  • jQuery简单倒计时效果完整示例

    jQuery简单倒计时效果完整示例

    这篇文章主要介绍了jQuery简单倒计时效果,结合完整实例形式分析了jQuery针对日期与时间的计算与页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery常见开发技巧详细整理

    jQuery常见开发技巧详细整理

    jquery开发过程中经验丰富可以提高开发技巧，本文整理了一些常见的jquery开发技巧，有需要的朋友可以参考下
    2013-01-01
  • jquery自适应布局的简单实例

    jquery自适应布局的简单实例

    下面小编就为大家带来一篇jquery自适应布局的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JQuery实现的图文自动轮播效果插件

    JQuery实现的图文自动轮播效果插件

    这篇文章主要介绍了JQuery实现的图文自动轮播效果插件,涉及jQuery处理鼠标事件及动画效果的方法,需要的朋友可以参考下
    2015-06-06
  • jQuery Flash/MP3/Video多媒体插件

    jQuery Flash/MP3/Video多媒体插件

    jQuery Flash/MP3/Video多媒体插件,主要是用来加载flash或mp3等网络媒体文件。
    2010-01-01
  • jQuery手机拨号界面特效代码分享

    jQuery手机拨号界面特效代码分享

    这篇文章主要介绍了jQuery手机拨号界面特效，整体特效非常逼真自然，推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • jquery判断元素内容是否为空的方法

    jquery判断元素内容是否为空的方法

    今天在实现一段广告的时候，需要判断指定元素的内容是否为空，为空则插入广告，否则就不执行，这里就为大家简单介绍一下需要的朋友可以参考一下
    2018-05-05

最新评论