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和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
JS面向对象编程浅析
Aug 28 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
python获得图片base64编码示例
2014/01/16 Python
用C++封装MySQL的API的教程
2015/05/06 Python
python验证码识别实例代码
2018/02/03 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
诚信承诺书范文
2014/03/27 职场文书
写得不错的求职信范文
2014/07/11 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
2016党员党课心得体会
2016/01/07 职场文书
《观潮》教学反思
2016/02/17 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python