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 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
js实现ATM机存取款功能
Oct 27 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
javascript 精粹笔记
2010/05/09 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
openLayer4实现动态改变标注图标
2020/08/17 Javascript
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
html5时钟实现代码
2010/10/22 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
行政文秘岗位职责范本
2014/02/10 职场文书
考试保密承诺书
2014/08/30 职场文书
庆祝儿童节标语
2014/10/09 职场文书
留学推荐信英文范文
2015/03/26 职场文书
春节晚会开场白
2015/05/29 职场文书
初中生物教学随笔
2015/08/15 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS