【3】jQuery学习——入门jQuery选择器之基本选择器
在开篇之前，要唠叨唠叨，我们在学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>
这里要说下，如果你点击过层级对象的获取的代码，你就会发现一个很有趣的时候，弹窗不止弹了一次，这是产生冒泡了，现在这个我们不要去管，等以后会说。
