jQuery 获取对象 定位子对象

最新推荐文章于 2022-07-18 10:52:00 发布
最新推荐文章于 2022-07-18 10:52:00 发布
阅读量2.1k 收藏
点赞数
分类专栏： js 文章标签： jquery header div class
选择中的特殊符号: 

# 指示 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> 

shiyanming1223
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 练习[二]: 获取对象(2) - 定位子对象
weixin_34077371的博客
05-28 82
选择中的特殊符号: # 指示 id . 指示 class * 全选 , 多选 空格 后代 &gt; 子 ~ 兄弟 + 下一个 : 子(多功能) () 函数式的过滤与查找 获取 div 下的所有标题对象: $("div :header") &lt;body&gt;     &lt;h3&gt;A...
JQuery获取$(this)子节点对象的方法
松篁
07-05 476
相信很多刚接触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 880
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代码段
03-04
超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的...11.30 缓存jQuery对象以提升性能 11.31 使用find（）函数提升子查询的性能 11.32 使用jQuery操作DOM的限制
jQuery层次选择器选择元素使用介绍
12-09
层次选择器： 通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为...
使用jQuery内容过滤选择器选择元素实例讲解
01-21
– 内容过滤选择器：根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择...
jquery 获取子 div
ConstXiong
04-03 908
获取 dom 对象 $("#divId").children("div").get(0); $("#divId").children("div")[0]; 获取 jquery 对象 $("#divId").children("div").eq(0); $($("#divId").children("div").get(0)); 【Java面试题与答案】整理推荐 基础...
【jQuery】jQuery之类数组对象操作_08
青春木鱼的博客
07-18 1663
js中类数组对象非常受歧视。因为虽然类数组对象长的像数组，但是却无法使用数组家提供的所有好用的函数。所谓"类数组对象"就是一个常规的Object对象，如$("p")但它和数组对象非常相似：具备length属性，并以0、1、2、3……等数字作为属性名。不过它毕竟不是数组，没有从数组的原型对象上继承下来的内置方法(例如：push()、 sort()等)............
jquery获取子对象操作
weixin_34026484的博客
01-12 1223
http://my.oschina.net/wuzhichen/blog/34915
JQuery获取this当前对象子元素对象
web开发
11-20 400
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 5880
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如何用$(this)选择他下面的子元素
zhajiangmian_1998的博客
06-21 2万+
实现方法：使用遍历函数children()，关键代码为 $(this).children("li")，表示获取当前元素下所有标签为&lt;li&gt;的子元素。下面实例演示：点击div标签后，何用$(this)选择它下面的&lt;li&gt;子元素，为了显示效果，将其设置为红色。1、新建HTML文件，输入如下的HTML结构，为了说明问题，在div标签下除了li元素外，还设置了其他类型的子元素。&l...
jquery获取鼠标悬停对象
最新发布
04-26
$(selector).hover(function(){ //鼠标悬停时执行的代码 },function(){ //鼠标移开时执行的代码 }); ...在函数体中可以实现当鼠标悬停在该元素上时需要执行的代码以及当鼠标移开时需要执行的代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值