文档章节

jQuery 练习[二]: 获取对象(1) - 基本选择与层级

涂孟超
 涂孟超
发布于 2014/09/26 15:36
字数 634
阅读 11
收藏 0

根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2")
<div id="div1">AAA</div>
<div id="div2">BBB</div>
<div id="div3">CCC</div>

根据标签选择, 如: $("span")
<div><span>AAA</span></div>
<div>BBB</div>
<span>CCC</span>

根据样式的类名选择, 如: $(".class1")
<div class="class1">AAA</div>
<div class="class2">BBB</div>
<div class="class1">CCC</div>

选择所有对象是: $("*")

可混合使用, 如: $("#btn2, .class1, span") [ 复制代码] &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;script src=&quot;http://code.jquery.com/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;span&gt;span1&lt;/span&gt; &lt;div&gt; &lt;button id=&quot;btn1&quot;&gt;button1&lt;/button&gt;&lt;br/&gt; &lt;button id=&quot;btn2&quot;&gt;button2&lt;/button&gt;&lt;br/&gt; &lt;/div&gt; &lt;div&gt; &lt;label class=&quot;class1&quot;&gt;label1&lt;/label&gt;&lt;br/&gt; &lt;label class=&quot;class2&quot;&gt;label2&lt;/label&gt;&lt;br/&gt; &lt;/div&gt; &lt;span&gt;span2&lt;/span&gt; &lt;/body&gt; &lt;/html&gt; &lt;script&gt; //修改选择对象的 color 样式为 red $(&quot;#btn2, .class1, span&quot;).css(&quot;color&quot;, &quot;red&quot;); &lt;/script&gt;


可分层选择, 如: $(".class1 div label")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"> <label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

如: $(".class1 span") 或 $(".class1").find("span")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"> <span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

只从子层中选择, 如: $(".class1 > span"); 如果没有中间的 > 会选择其下的所有符合条件的子孙对象
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

其后的, 如: $("div + span"); 这会选择所有紧跟在 div 后面的 span
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

同一层级(后面)的, 如: $("#id2 ~ *"); 这是选择 #id2 后面同一层级的所有(*)对象
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

混合使用, 如: $("#id3 label, #id3 ~ span")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"> <label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

选择同一层级的其他元素, 如: $("#id2").siblings()
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

选择同一层级的其他 span, 如: $("#id2").siblings("span")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>



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

共有 人打赏支持
涂孟超
粉丝 12
博文 2011
码字总数 14107
作品 0
深圳
程序员
私信 提问
jQuery基础与JavaScript与CSS交互-第五章

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

达叔小生
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
0
0
jQuery学习笔记之JavaScript脚本库和元素选择器研究[图]

jQuery学习笔记之JavaScript脚本库和元素选择器研究[图] jQuery是一套JavaScript脚本库,相当于Java的类库,将一些工具方法或者对象方法封装在类库中,方便用户使用。 工厂函数指的是这些内建...

原创小博客
08/06
0
0
Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵
06/21
0
0
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
07/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

崛起于Springboot2.X之通讯WebSocket(40)

技术简介:Springboot2.0.3+freemaker+websocket 1、添加pom依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-bo......

木九天
18分钟前
1
0
Java常用四大线程池用法以及ThreadPoolExecutor详解

为什么用线程池? 1.创建/销毁线程伴随着系统开销,过于频繁的创建/销毁线程,会很大程度上影响处-理效率 2.线程并发数量过多,抢占系统资源从而导致阻塞 3.对线程进行一些简单的管理 在Java中...

孟飞阳
20分钟前
1
0
Netty+Websocket 实现一个简易聊天室

后台代码 /** * 服务端 */public class ChatServer {public static void main(String[] args) throws Exception {int port=8080; //服务端默认端口new ChatServer().bind...

这很耳东先生
22分钟前
2
0
一个本科学生对Linux的认知

我是一名大三的普通一本大学的软件工程的一名学生,学校开设了一些关于系统开发的课程,纸上得来终觉浅,学校的课程课时较短,想要在56个课时之内学会一些公司需要的技能,无疑是纸上谈兵,一...

linuxprobe16
24分钟前
1
0
如何选择开源许可证?

如何为代码选择开源许可证,这是一个问题。 世界上的开源许可证,大概有上百种。很少有人搞得清楚它们的区别。即使在最流行的六种----GPL、BSD、MIT、Mozilla、Apache和LGPL----之中做选择,...

吴伟祥
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部