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(){});。