文档章节

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

涂孟超
 涂孟超
发布于 2014/09/26 15:33
字数 975
阅读 9
收藏 0

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



本文转载自:http://www.cnblogs.com/del/archive/2010/05/28/1746011.html

涂孟超
粉丝 12
博文 2011
码字总数 14107
作品 0
深圳
程序员
私信 提问
前端学习(四)--jQuery

一、入门 1、jquery 就是一个js的框架; 2、好处就是能让我们的js代码写的更少; 3、基本使用:引入script,后面使用即可; 4、关于版本选择:1.* 版本的兼容性比较好,大公司用的多; 5、关...

stanwuc
2018/11/29
0
0
JQuery的点点滴滴--JQuery对象和DOM对象

一、如何区分JQuery对象和Dom对象呢? 在Javascript中通过getElementById或者getElementbyTagName来获取到的元素节点,就是DOM对象,可以使用Javascript中的方法 JQuery对象时通过JQuery包装...

长平狐
2012/11/28
109
0
jQuery基础与JavaScript与CSS交互-第五章

目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Flex 什么是框架? 框架是程序员将一个又...

达叔小生
2018/08/03
0
0
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
57
0
Python全栈 Web(jQuery 一条龙服务)

jQuery 1.jQuery介绍 jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件,提供了更为简便的元素操作方式 核心理念:Write Less Do More jQuery版本: jQuery 2.x 不再支持IE6.7.8 jQuery 1.11...

巴黎香榭
2018/09/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【0918】正则介绍_grep

【0918】正则介绍_grep 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 一、正则介绍 正则是一串有规律的字符串,它使用单个字符串来描述或匹配一系列符合某个语法规则的字符串。 二、grep工具 ...

飞翔的竹蜻蜓
13分钟前
4
0
为什么要在网站中应用CDN加速?

1. 网页加载速度更快 在网站中使用CDN技术最直接的一个好处就是它可以加快网页的加载速度。首先,CDN加速的内容分发是基于服务器缓存的,由于CDN中缓存了不少数据,它能够给用户提供更快的页...

云漫网络Ruan
50分钟前
8
0
亚玛芬体育(Amer Sports)和信必优正式启动合作开发Movesense创新

亚玛芬体育和信必优正式启动合作开发Movesense创新,作为亚玛芬体育的完美技术搭档,信必优利用Movesense传感器技术为第三方开发移动应用和服务。 Movesense基于传感器技术和开放的API,测量...

symbiochina88
今天
4
0
创龙TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA核心板规格书

SOM-TL437xF是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA芯片设计的核心板,采用沉金无铅工艺的10层板设计,适用于高速数据采集和处理系统、汽车导航、工业自动化等领...

Tronlong创龙
今天
4
0
好程序员Java学习路线分享MyBatis之线程优化

  好程序员Java学习路线分享MyBatis之线程优化,我们的项目存在大量用户同时访问的情况,那么就会出现大量线程并发访问数据库,这样会带来线程同步问题,本章我们将讨论MyBatis的线程同步问...

好程序员官方
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部