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 相关文章推荐
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
javascript的理解及经典案例分析
May 20 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 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
中国第一家无线电行
2021/03/01 无线电
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
创业计划书的写作技巧及要点
2014/01/31 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
三人合伙协议书范本
2014/10/29 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android