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高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
JS中表单的使用小结
Jan 11 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
vuex实现购物车功能
Jun 28 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 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 定界符 使用技巧
2009/06/14 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python lxml模块安装教程
2015/06/02 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
银行实习的自我鉴定
2013/12/10 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
给孩子的新年寄语
2014/04/08 职场文书
2015年护理工作总结范文
2015/04/03 职场文书