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 相关文章推荐
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 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
论坛头像随机变换代码
2006/10/09 PHP
PHP 强制下载文件代码
2010/10/24 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
初识laravel5
2015/03/02 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
React中的render何时执行过程
2018/04/13 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
tensorflow中next_batch的具体使用
2018/02/02 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
初中生学习的自我评价
2013/11/14 职场文书
教师党性分析材料
2014/02/04 职场文书
《金子》教学反思
2014/04/13 职场文书
nginx内存池源码解析
2021/11/20 Servers
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB