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实现的分页函数
Dec 22 Javascript
javascript function、指针及内置对象
Feb 19 Javascript
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
js计时事件实现圆形时钟
Mar 25 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 selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
jQuery1.6 使用方法一
2011/11/23 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
办公室副主任岗位职责
2013/11/25 职场文书
家长评语大全
2014/01/22 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
市场营销求职信范文
2014/02/21 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS