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之AJAX框架使用说明
Apr 24 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
javascript拖拽应用实例
Mar 25 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
React快速入门教程
Jan 17 Javascript
JS中Array数组学习总结
Jan 18 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
vue-cli随机生成port源码的方法
Sep 02 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 foreach、while性能比较
2009/10/15 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php单例模式示例分享
2015/02/12 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
node.js基础知识汇总
2020/08/25 Javascript
深入解答关于Python的11道基本面试题
2017/04/01 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python写程序统计词频的方法
2019/07/29 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
浅析python标准库中的glob
2020/03/13 Python
python和JavaScript哪个容易上手
2020/06/23 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年暑期见闻
2015/07/14 职场文书
56句经典英文座右铭
2019/08/09 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js