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 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
js创建元素(节点)示例
Jan 02 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 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
一个简单计数器的源代码
2006/10/09 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
python中判断文件结束符的具体方法
2020/08/04 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
大学生专业个人学习的自我评价
2013/10/26 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
安全生产投入制度
2014/01/29 职场文书
电气个人求职信范文
2014/02/04 职场文书
产品推广策划方案
2014/05/10 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
毕业典礼邀请函
2015/01/31 职场文书
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang