【3】jQuery学习——入门jQuery选择器之基本选择器-CSDN博客

在开篇之前，要唠叨唠叨，我们在学jq的时间中有一半时间是在练习如何快速、准确的获取到自己的要添加效果的元素标签名。

还有就是我们无论何时，都要记住的一点，就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。

现在我们就了解下基本选择器有那几个？

通用选择器：*
id选择器：  #element
类选择器：  .element
标签选择器：element

当然这里还有另外2个，但是感觉是层级对象的获取，那我们就在这里一并说下，注意括号里面的逗号和空格：

$("#a,.b,p")    //表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素
$("#a .b p")    //表示获得了ID是a的元素所包含的使用了类样式的b元素中的所有的p元素

好了，下面我们就来仔细了解下这些选择器吧

*$("")**	这个获取的是HTML文档中的所有的元素
$("#cssid")	选择id值等于”cssid”的元素，注意:在一个html文档中id是唯一的，也即id为 “cssid”不能出现两次（虽然即使出现了两次浏览器也可以解释，但是这是不规范的）。这个ID选择器获取jQuery对象也是个元素集合，但是只有一个元素。将这个jQuery对象转化为DOM对象也可以这样$(“#cssid”)[0]
$(".myClass")	获取的是HTML文档中所有的class为“myClass”的元素集合
$("标签名")	例如$(“div”)获取的就是HTML文档中的所有的div元素的jQuery对象集合
$("selector1,selector2,selector3…selectorN")	这种选择器叫做组选择器。例如：$(“span,#two”)选取所有的span标签元素和id=two的元素。上面我说的那两个像层级对象获取就是这个的表现。

ps.上面的就是基本选择器，是不是够基本，当然，到了后面选择器会越来越多，记起来会很麻烦，所以这个都要去练习，就像老师说的：“好记性不如烂笔头”，多练吧。

同时文章参考梦三秋和w3cfuns网站

===========================================================================

这里是做了w3cfuns网站的作业，嘿嘿，效果还不错。

【1】id选择器

id选择器

 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>id选择器</title>
 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 7 <script type="text/javascript">
 8 $(function(){        //等待dom元素加载完毕
 9     alert("例题说明：请在有色的区域上进行点击。")       //弹出一个框 
10     $("#myID").click(function(){              //获取页面中所有id值等于myID元素，给每一个myID元素添加click事件
11         alert("你在<div id=\"myID\"></div>区域上点击了\n\njQuery根据ID选择器获得元素的方法$(\"#myID\")或者$(\"#main #myID\")");
12     })
13 })
14 </script>
15 <style type="text/css">
16 *{margin:0; padding:0;}/*为了方便所以使用了*选择器，一般情况不建议，因为css2.0中标签就多达84个，会影响页面的加载速度。*/
17 #main{margin:0 auto;width:600px; height:350px; border:1px #000 solid;}
18 #myID{margin:0 auto;cursor:pointer;width:400px; height:300px;background:#cf0;}
19 </style>
20 
21 </head>
22 
23 <body>
24 <div id="main">
25     <div id="myID"></div>
26 </div>
27 </body>
28 </html>

【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>类选择器</title>
 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 7 <script type="text/javascript">
 8 $(function(){        
 9     alert("例题说明：请在有色的区域上进行点击。")
10     $(".myCLASS").click(function(){
11         alert("你在<div class=\"myCLASS\"></div>区域上点击了\n\njQuery根据类选择器获得元素的方法$(\".myCLASS\")或者$(\"#main .myCLASS\")");
12     })
13 })
14 </script>
15 <style type="text/css">
16 *{margin:0; padding:0;}/*为了方便所以使用了*选择器，一般情况不建议，因为css2.0中标签就多达84个，会影响页面的加载速度。*/
17 #main{margin:0 auto;width:600px; height:350px; border:1px #000 solid;}
18 .myCLASS{margin:0 auto;cursor:pointer;width:400px; height:300px;background:#f00;}
19 </style>
20 
21 </head>
22 
23 <body>
24 <div id="main">
25     <div class="myCLASS"></div>
26 </div>
27 </body>
28 </html>

【3】标签选择器

标签选择器

 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>标签选择器</title>
 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 7 <script type="text/javascript">
 8 $(function(){        
 9     alert("例题说明：请在有色的区域上进行点击。")
10     $("span").click(function(){
11         alert("你在<span></span>区域上点击了\n\njQuery根据标签选择器获得元素的方法$(\"span\")或者$(\"#main span\")");
12     })
13 })
14 </script>
15 <style type="text/css">
16 *{margin:0; padding:0;}/*为了方便所以使用了*选择器，一般情况不建议，因为css2.0中标签就多达84个，会影响页面的加载速度。*/
17 #main{margin:0 auto;width:600px; height:350px; border:1px #000 solid;}
18 span{margin:0 auto;cursor:pointer;display:block;width:400px; height:300px; background:#3cf;}
19 </style>
20 
21 </head>
22 
23 <body>
24 <div id="main">
25     <span></span>
26 </div>
27 </body>
28 </html>

【4】层级对象的获取

层级对象的获取

 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>层级对象的获取</title>
 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 7 <script type="text/javascript">
 8 $(function(){        
 9     alert("例题说明：请在有色的区域上进行点击。")
10     $("#a").click(function(){
11         alert("你在<div id=\"a\"></div>区域上点击了\n\njQuery根据ID选择器获得元素的方法$(\"#a\")或者$(\"#main #a\")");
12     })
13     $("#main #a .b").click(function(){
14         alert("你在<div class=\"b\"></div>区域上点击了\n\njQuery获得元素的方法有多种:\n$(\".b\")\n$(\"#a .b\")\n$(\"#main #a .b\")");
15     })
16     $("#main #a .b p").click(function(){
17         alert("你在<p></p>区域上点击了\n\njQuery获得元素的方法有多种:\n$(\"p\")\n$(\".b p\")\n$(\"#a .b p\")\n$(\"#main #a .b p\")");
18     })
19 })
20 </script>
21 <style type="text/css">
22 *{margin:0; padding:0;}/*为了方便所以使用了*选择器，一般情况不建议，因为css2.0中标签就多达84个，会影响页面的加载速度。*/
23 p,#a,.b{cursor:pointer;}
24 #main,#a,.b,p{margin:0 auto;}
25 #main{width:600px; height:350px; border:1px #000 solid;}
26 #a{height:300px; background:#0c0;}
27 #main #a .b{width:100px; height:100px;background:#0f0;}
28 #main #a .b p{width:50px; height:50px;background:#000;}
29 </style>
30 
31 </head>
32 
33 <body>
34 <div id="main">
35     <div id="a">
36         <div class="b">
37             <p></p>
38         </div>
39     </div>
40 </div>
41 </body>
42 </html>