jQuery 练习[二] jquery 对象选择器

【 tulaoshi.com - Web开发 】

根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2")
代码如下:
divAAA/div
divBBB/div
divCCC/div

根据标签选择, 如: $("span")
代码如下:
divspanAAA/span/div
divBBB/div
spanCCC/span

根据样式的类名选择, 如: $(".class1")
代码如下:
divAAA/div
divBBB/div
divCCC/div

选择所有对象是: $("*")

可混合使用, 如(复制代码):
!doctype html html head script src="http://code.jquery.com/jquery-1.4.2.min.js"/script /head body spanspan1/span div buttonbutton1/button buttonbutton2/button /div div labellabel1/label labellabel2/label /div spanspan2/span /body /html script //修改选择对象的 color 样式为 red $("#btn2, .class1, span").css("color", "red"); /script
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


可分层选择, 如: $(".class1 div label")
代码如下:
div
div111/div
divspan222/span/div
divlabel333/label/div
span444/spanbr/
span555/span
/div

如: $(".class1 span")
代码如下:
div
div111/div
divspan222/span/div
divlabel333/label/div
span444/spanbr/
span555/span
/div

只从子层中选择, 如: $(".class1 span"); 如果没有中间的 会选择其下的所有符合条件的子孙对象
代码如下:
div
div111/div
divspan222/span/div
divlabel333/label/div
span444/spanbr/
span555/span
/div

其后的, 如: $("div + span"); 这会选择所有紧跟在 div 后面的 span
代码如下:
div
div111/div
divspan222/span/div
divlabel333/label/div
span444/spanbr/
span555/span
/div

同一层级(后面)的, 如: $("#id2 ~ *"); 这是选择 #id2 后面同一层级的所有(*)对象
代码如下:
div
div111/div
divspan222/span/div
divlabel333/label/div
span444/spanbr/
span555/span
/div

混合使用, 如: $("#id3 label, #id3 ~ span")
代码如下:
div
div111/div
divspan222/span/div
divlabel333/label/div
span444/spanbr/
span555/span
/div