jQuery--基本选择器
1.jQuery中的基本选择器介绍
- #id id选择器，通过id获取元素
- element 标签选择器，通过标签名称获取选择器
- .class类选择器 通过class值获取元素
- s1,s2,... 多选择器，将多个选择器的结果添加在一个数组中
- * 所有
2.代码演示
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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>01-基本选择器.html</title>
6 <!-- 引入jQuery -->
7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
8 <script src="./script/assist.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="./css/style.css" />
10 <script type="text/javascript">
11 $(document).ready(function(){
12 // <input type="button" value="选择 id为 one 的元素." id="btn1"/>
13 $("#btn1").click(function(){
14 $("#one").css("background-color","red");
15 });
16 // <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
17 $("#btn2").click(function(){
18 $(".mini").css("background-color","red");
19 });
20 // <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
21 $("#btn3").click(function(){
22 $("div").css("background-color","red");
23 });
24 // <input type="button" value="选择 所有的元素." id="btn4"/>
25 $("#btn4").click(function(){
26 $("*").css("background-color","red");
27 });
28 // <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
29 $("#btn5").click(function(){
30 $("span,#two").css("background-color","red");
31 });
32 });
33 </script>
34 </head>
35 <body>
36 <button id="reset">手动重置页面元素</button>
37 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
38 <h3>基本选择器.</h3>
39
40 <!-- 控制按钮 -->
41 <input type="button" value="选择 id为 one 的元素." id="btn1"/>
42 <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
43 <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
44 <input type="button" value="选择 所有的元素." id="btn4"/>
45 <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
46
47 <br /><br />
48
49 <!-- 测试的元素 -->
50 <div class="one" id="one" >
51 id为one,class为one的div
52 <div class="mini">class为mini</div>
53 </div>
54
55 <div class="one" id="two" title="test" >
56 id为two,class为one,title为test的div.
57 <div class="mini" title="other">class为mini,title为other</div>
58 <div class="mini" title="test">class为mini,title为test</div>
59 </div>
60
61 <div class="one">
62 <div class="mini">class为mini</div>
63 <div class="mini">class为mini</div>
64 <div class="mini">class为mini</div>
65 <div class="mini"></div>
66 </div>
67
68
69
70 <div class="one">
71 <div class="mini">class为mini</div>
72 <div class="mini">class为mini</div>
73 <div class="mini">class为mini</div>
74 <div class="mini" title="tesst">class为mini,title为tesst</div>
75 </div>
76
77
78 <div style="display:none;" class="none">style的display为"none"的div</div>
79
80 <div class="hide">class为"hide"的div</div>
81
82 <div>
83 包含input的type为"hidden"的div<input type="hidden" size="8"/>
84 </div>
85
86
87 <span id="mover">正在执行动画的span元素.</span>
88
89 </body>
90 </html>
html页面的加载是自上而下的，因此如果将script代码卸载页面头部会出现，script代码无效的问题，解决办法有以下两种：
1.javascript中
1 window.onload = function(){ 2 //你的代码 3 }
2.jQuery中
1 $(document).ready(function(){ 2 //你的代码 3 });
以上两种代码都是指在页面加载完毕之后才会执行其中的script代码，但也有细微的区别
- window.onload必须等到网页中所有的内容加载完成后（包括图片），才能执行；$(document).ready()网页中所有的DOM结构绘制完毕后就执行，可能DOM元素关联的东西还没有加载完成。
- window.onload不能同时编写几个，如果编写了，最后一个有效；$(document).ready()可以同时编写几个，全部有效。
- window.onload无简写；$(document).ready(function(){});可以简写为$(function(){});。
