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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 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
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
Javascript浅谈之this
2013/12/17 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
javascript实现雪花飘落效果
2020/08/19 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
Django实现快速分页的方法实例
2017/10/22 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
内乡县衙导游词
2015/02/05 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python