jQuery 练习[二] jquery 对象选择器(1)
2010-05-28 00:00
886 查看
根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2")
根据标签选择, 如: $("span")
根据样式的类名选择, 如: $(".class1")
选择所有对象是: $("*")
可混合使用, 如(复制代码):
span1
button1
button2
label1
label2
span2
//修改选择对象的 color 样式为 red
$("#btn2, .class1, span").css("color", "red");
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
可分层选择, 如: $(".class1 div label")
如: $(".class1 span")
只从子层中选择, 如: $(".class1 > span"); 如果没有中间的 > 会选择其下的所有符合条件的子孙对象
其后的, 如: $("div + span"); 这会选择所有紧跟在 div 后面的 span
同一层级(后面)的, 如: $("#id2 ~ *"); 这是选择 #id2 后面同一层级的所有(*)对象
混合使用, 如: $("#id3 label, #id3 ~ span")
文章图片所用的测试工具下载地址 JavaScriptTest2.rar
<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>
选择所有对象是: $("*")
可混合使用, 如(复制代码):
span1
button1
button2
label1
label2
span2
//修改选择对象的 color 样式为 red
$("#btn2, .class1, span").css("color", "red");
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
可分层选择, 如: $(".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")
<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>
文章图片所用的测试工具下载地址 JavaScriptTest2.rar
相关文章推荐
- jQuery 练习[二] jquery 对象选择器(1)
- jQuery 练习[二] jquery 对象选择器(1)
- [php学习十六]JQuery练习1-选择器
- JavaScript之jQuery-10 T-Query(T-Query、基本选择器、T-Query对象、操作方法、创建元素、事件绑定)
- jQuery怎么输出选择器选择出来的$对象的html代码,包括自己
- jquery选择器练习
- jQuery表单对象属性过滤选择器实例详解
- jQuery过滤选择器——表单对象属性过滤选择器
- 【11】jQuery学习——入门jQuery选择器之过滤选择器-表单对象属性过滤选择器
- jQuery学习笔记——jQuery选择器练习
- jQuery介绍入门和对象转换,选择器
- 元素ID是个字符串变量,如何用jquery选择器获得这个对象?
- 11.20课堂笔记-jQuery基础、jQuery对象和DOM对象、jQuery选择器
- jquery过滤选择器-----------(表单对象属性过滤选择器 与 表单选择器)
- 【JQuery学习笔记一】理解JQuery对象含义和JQuery选择器的使用!
- 使用jquery实现小需求练习-------对应选择器的练习
- jquery选择器之表单选择\表单对象属性
- JQuery基础知识----jQuery 对象,选择器
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
- jquery 字符串转dom对象及对该对象使用选择器查询