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 同时提交多个Web表单的方法
Feb 19 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 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
帅气的琦玉老师
2020/03/02 日漫
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python中管道用法入门实例
2015/06/04 Python
python生成圆形图片的方法
2020/03/25 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
详解python算法常用技巧与内置库
2020/10/17 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
怎样在程序里获得一个空指针
2015/01/24 面试题
班组安全员工作职责
2014/02/01 职场文书
交通安全教育制度
2014/02/02 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
入党后的感想
2015/08/10 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL