每当开篇之前,要念叨唠叨,我们于学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选择器

图片 1图片 2id选择器

 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】类选择器

图片 3图片 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     $(".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】标签选择器

图片 5图片 6签选择器

 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("你在区域上点击了\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     
26 </div>
27 </body>
28 </html>

【4】层级对象的收获

图片 7图片 8层级对象的收获

 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>

这边而说生,如果你点击过层级对象的博之代码,你尽管见面发觉一个雅风趣的时候,弹窗不止弹了扳平蹩脚,这是来冒泡了,现在这我们绝不去管,等下会说。

相关文章

网站地图xml地图