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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
JS数组的常用方法整理
Mar 31 Javascript
React中的Context应用场景分析
Jun 11 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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php组合排序简单实现方法
2016/10/15 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python实现简易云音乐播放器
2018/01/04 Python
简单实现python收发邮件功能
2018/01/05 Python
python数据封装json格式数据
2018/03/04 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Python日志器使用方法及原理解析
2020/09/27 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
大学生党员承诺书
2014/05/20 职场文书
排查整治工作方案
2014/06/09 职场文书
三严三实对照检查材料
2014/09/22 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
react 路由Link配置详解
2021/11/11 Javascript
关于JavaScript轮播图的实现
2021/11/20 Javascript
Linux安装apache服务器的配置过程
2021/11/27 Servers
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL