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 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
关于js遍历表格的实例
Jul 10 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 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 split汉字
2009/06/05 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Python中logging模块的用法实例
2014/09/29 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
RC4文件加密的python实现方法
2015/06/30 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
对Python 语音识别框架详解
2018/12/24 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
建筑工程造价专业自荐信
2014/07/08 职场文书
单位考核聘任报告
2015/03/02 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android