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 相关文章推荐
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
vue-router命名视图的使用讲解
Jan 19 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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
德劲1103二次变频版的打磨
2021/03/02 无线电
php Ubb代码编辑器函数代码
2012/07/05 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
pandas的object对象转时间对象的方法
2018/04/11 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python实现的简单计算器功能详解
2018/08/25 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
详解Python中的Lock和Rlock
2021/01/26 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
法学专业个人求职信
2013/09/26 职场文书
运动会广播稿500字
2014/01/28 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
中职招生先进个人材料
2014/08/31 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL