网络编程 
首页 > 网络编程 > 浏览文章

jQuery 获取对象 定位子对象

(编辑:jimmy 日期: 2025/12/14 浏览:3 次 )
选择中的特殊符号:

# 指示 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>
上一篇:jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
下一篇:jQuery 获取对象 基本选择与层级
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap