jQuery 获取对象 基本选择与层级


Posted in Javascript onMay 31, 2010

根据 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")

<!doctype html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
</head> 
<body> 
<span>span1</span> 
<div> 
<button id="btn1">button1</button><br/> 
<button id="btn2">button2</button><br/> 
</div> 
<div> 
<label class="class1">label1</label><br/> 
<label class="class2">label2</label><br/> 
</div> 
<span>span2</span> 
</body> 
</html> 
<script> 
//修改选择对象的 color 样式为 red 
$("#btn2, .class1, span").css("color", "red"); 
</script>

jQuery 获取对象 基本选择与层级
可分层选择, 如: $(".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>

Javascript 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
js继承的实现代码
Aug 05 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 #Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 #Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 #Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 #Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 #Javascript
Javascript 设计模式(二) 闭包
May 26 #Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 #Javascript
You might like
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
python encode和decode的妙用
2009/09/02 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python版DDOS攻击脚本
2019/06/12 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
大四本科生的自我评价
2013/12/30 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
通信工程求职信
2014/07/16 职场文书
2015年读书月活动总结
2015/03/26 职场文书
离婚律师函范本
2015/05/27 职场文书
欠条范文
2015/07/03 职场文书
公司安全管理制度范本
2015/08/05 职场文书
关于军训的感想
2015/08/07 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python