随笔 - 2146  文章 - 19 评论 - 11846 阅读 - 1267万

jQuery 练习[二]: 获取对象(2) - 定位子对象


选择中的特殊符号:
#    指示 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>


posted on   万一  阅读(3927)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
历史上的今天：
2009-05-28 学习 SQL 语句 - Insert、Update、Delete
2009-05-28 学习 SQL 语句 - Select(9): 其他
2009-05-28 学习 SQL 语句 - Select(8): 分组条件
2009-05-28 学习 SQL 语句 - Select(7): 分组统计之 Avg()、Sum()、Max()、Min()、Count()
2009-05-28 学习 SQL 语句 - Select(6): 字段运算
2009-05-28 学习 SQL 语句 - Select(5): 字段别名
2009-05-28 学习 SQL 语句 - Select(4): 排序
Copyright © 2025 万一
Powered by .NET 9.0 on Kubernetes Powered by: 博客园


点击右上角即可分享
微信分享提示