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

最新推荐文章于 2022-07-18 10:52:00 发布
最新推荐文章于 2022-07-18 10:52:00 发布
阅读量88 收藏
点赞数
文章标签： javascript ViewUI

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


weixin_34077371
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 获取对象 定位子对象
10-29
jQuery 获取对象 定位子对象，学习jquery 定位子对象的朋友可以参考下。
JQuery获取$(this)子节点对象的方法
松篁
07-05 482
相信很多刚接触JQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？ 首先来看看JQuery中的 $() 这个符号，实际上这个符号在JQuery中相当于JQuery（）,即$(this)=jquery();也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($('#id'));时，会弹出一个[object Object ]，这个obj...
jQuery（一）jQuery概述、使用方式、原理、查找元素
商务合作 | 共同学习 | 携手共进
09-29 3万+
JavaScript jQuery：jQuery概述、使用、原理、API特点，查找元素。
jQuery选择器
蔚然成风
05-18 888
jQuery选择器 基础选择器 Basics 1.根据标签名进行选择 var input_query=$("input"); 2.根据id值选取 var text11_query=$("#text11"); 3.根据class值进行选取 var text11_query=$(".text11"); 4.同时选择多个符合条件的JQuery包装集用,号分隔条件 var text_query=$("#text11,.text12"); 5.选择所有DOM元素 var all_query=$("*");
jquery 获取子 div
ConstXiong
04-03 929
获取 dom 对象 $("#divId").children("div").get(0); $("#divId").children("div")[0]; 获取 jquery 对象 $("#divId").children("div").eq(0); $($("#divId").children("div").get(0)); 【Java面试题与答案】整理推荐 基础...
JS/JQuery-第5章上机练习.zip
04-20
1. **DOM遍历**：学习如何使用JQuery遍历DOM树，获取或修改元素及其子元素的属性。 2. **事件处理**：深入理解JQuery中的事件模型，包括事件绑定、解绑、触发和事件委托。 3. **动画与效果**：掌握如何使用JQuery...
jQuery获取父元素及父节点的方法小结
10-22
在JavaScript的世界里，jQuery库提供了一系列简便的方法来操作DOM元素，包括获取父元素和父节点。这篇文章主要聚焦于jQuery如何获取父元素和父节点，并通过实例解析这些方法的使用技巧。 1. `parent([expr])` `...
JQuery 学习笔记 选择器之二
12-10
结合CSS选择器的特性，jQuery的选择器系统使得开发者可以精确地定位和操作页面上的任何元素，从而实现丰富的交互效果和动态更新。 总的来说，jQuery选择器是其强大功能的核心之一，通过熟练掌握和灵活运用这些选择...
jQuery-QNR入门课件.zip
07-05
- **Navigate**：找到元素后，可能需要对DOM结构进行导航，例如遍历子元素，查找兄弟元素等，jQuery提供了`.children()`, `.siblings()`, `.parent()`等方法。 - **Render**：最后，"Render"涉及的是对选取元素...
（三天熟练jquery）第二天.zip
12-08
在“（三天熟练jQuery）第二天”的课程中，我们主要聚焦于深入理解jQuery库的基础知识，以及如何有效地利用它来提升Web开发效率。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和...
【jQuery】jQuery之类数组对象操作_08
青春木鱼的博客
07-18 1742
js中类数组对象非常受歧视。因为虽然类数组对象长的像数组，但是却无法使用数组家提供的所有好用的函数。所谓"类数组对象"就是一个常规的Object对象，如$("p")但它和数组对象非常相似：具备length属性，并以0、1、2、3……等数字作为属性名。不过它毕竟不是数组，没有从数组的原型对象上继承下来的内置方法(例如：push()、 sort()等)............
jquery获取子对象操作
weixin_34026484的博客
01-12 1229
http://my.oschina.net/wuzhichen/blog/34915
JQuery获取this当前对象子元素对象
web开发
11-20 402
JQuery获取this当前对象子元素对象 &lt;div&gt; 02 &lt;span&gt;span test&lt;/span&gt; 03 &lt;a href=""&gt;&lt;/a&gt; 04 &lt;img src="test.jpg"
jQuery获取this当前对象子元素对象
itmyhome的专栏
11-30 5891
select id="city"> option value="beijing">北京option> option value="shanghai">上海option> option value="shenzhen">深圳option> select> $(function(){ $("#city").change(function(){
Jquery如何获取子元素
热门推荐
手掌日月摘星辰
06-20 13万+
前端面试秘籍：https://github.com/yisainan/web-interview 欢迎star Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。 1.children()方法：获取该元素下的直接子集元素 2.find()方法：获取该元素下的所有子集元素 分别以以下HTML代码为例：...
jquery获得$(this)下面的指定的子元素
weixin_zsh的博客
08-25 6万+
有时候会遇到循环出来的div，实现用户点击其中一个，据此进行其他操作，我们可以用$(this)来获取用户点击的div，但是如果没有其他的标志来区分这些循环出来的div的话（比如lang值的不同），我们如何获得点击的div的子元素呢？ 方法有两种，都是jQuery中获得子元素的方法------- .find ()  和  .children () find查找所有的子元素，会一直查找，跨层级查找...
jQuery基础教程：表单对象属性操作与选择器示例
"jQuery基础教程-表单对象属性过滤选择器示例" 在Web开发中，jQuery是一个非常流行和实用的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery的核心理念是"写得少，做得多"，即用更简洁...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值