JQuery[03] 选择器

id选择器:

$("#对象ID")

标签选择器:

$("标签名")

CSS选择器

$(".class名")

多条件选择器

$(p,div,input.abc) 选择所有p,div以及classname="abc"的input对象

层次选择器

$("ol li") 选择ol对象下所有的li对象(包括子对象以及子对象的子对象)

$("ol > li") 选择ol下直接的li对象、即子对象的子对象不会被选择

以下演示代码Chrome、IE9测试结果一致
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>选择器</title>
5 <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(document).ready(function () {
8 //标签选择器、为所有p标签添加文本
9 $("p").each(function (item) {
10 $(this).text("文本" + item);
11 });
12
13 //id选择器,单击此p标签弹出文本提示
14 $("#pTag").click(function () {
15 alert($(this).text());
16 });
17
18 //css选择器
19 $(".redColor").click(function () {
20 alert("通过css选择器进行的事件绑定");
21 });
22
23 //多条件选择器,选择所有input标签和class为redColor的span标签
24 //text用来修改span标签、input没有innerText属性、修改其value属性
25 $("input,span.redColor").text("多条件选择器").val("多条件选择器");
26
27 //层次选择器
28 $("#test1 li").css("color", "red");
29 //为了防止css属性的继承、先把所有文字刷成绿色
30 $("#test2 li").css("color", "green");
31 $("#test2 > li").css("color", "blue");
32 });
33 </script>
34
35 <style type="text/css">
36 .redColor
37 {
38 background-color:Black;
39 color:Red;
40 }
41 </style>
42 </head>
43 <body>
44 <p class="redColor"></p>
45 <p id="pTag"></p>
46 <p></p>
47 <p></p>
48 <p></p>
49 <p></p>
50 <p></p>
51 <p></p>
52 <input type="button" value="btn1" />
53 <input type="button" value="btn2" />
54 <input type="button" value="btn3" />
55 <input type="button" value="btn4" />
56 <span class="redColor">span1</span>
57 <span>span2</span>
58 <span>span3</span>
59 <span>span4</span>
60 <span>span5</span>
61
62 <ul id="test1">
63 <li>经理</li>
64 <li>人事部</li>
65 <li>营销部</li>
66 <li>广告部</li>
67 </ul>
68
69 <ul id="test2">
70 <li>经理</li>
71 <li>人事部</li>
72 <li>营销部</li>
73 <li>
74 广告部
75 <ul>
76 <li>小张</li>
77 <li>小李</li>
78 <li>小王</li>
79 </ul>
80 </li>
81 </ul>
82 </body>
83 </html>

  

My New Blog : http://blog.fdlife.info/ The more you know, the less you believe.
原文地址:https://www.cnblogs.com/ForDream/p/2130546.html