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检测输入的字符串包含的中英文的数量
Apr 17 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 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 cookie 登录验证示例代码
2009/03/16 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
python读取Android permission文件
2013/11/01 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Python读取csv文件实例解析
2019/12/30 Python
python之生成多层json结构的实现
2020/02/27 Python
什么是python类属性
2020/06/10 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
上课说话检讨书大全
2014/01/22 职场文书
幼儿园标语大全
2014/06/19 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技