文档章节

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】-----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与CSS交互-第五章

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

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

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

原创小博客
08/06
0
0
jQuery基础 - 常用基本属性

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

ZHAO_JH
07/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
30分钟前
1
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
0
0
890. Find and Replace Pattern - LeetCode

Question 890. Find and Replace Pattern Solution 题目大意:从字符串数组中找到类型匹配的如xyy,xxx 思路: 举例:words = ["abc","deq","mee","aqq","dkd","ccc"], pattern = "abb"abc ......

yysue
昨天
0
0
Linux | Redis

写在前面的话 常言道,不作笔记不读书。在下是深有体会啊,所以,跟我一起做下本节的笔记吧,或许多年以后,你一定会感谢今天的你。 安装 在官网的下载页 Redis Download 直接写了在Linux的安...

冯文议
昨天
1
0
NoSQL-memcached

NoSQL介绍 NoSQL叫非关系型数据库。而关系型数据库代表有MySQL。对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很...

ln97
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部