JQuery中的选择器
在JQuery有一个特定的符号“$”，此符号的含义是将所有的对象转换为JQuery对象。比如简单的：$(function(){alert("zzz");});。明白这一点后对于JQuery选择器则能很好的理解。
1.样式选择器。在JQuery中常用到样式选择器，其含义是将所有使用此样式的标签都转换为JQuery对象进行操作。下面看简单的例子：
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 <title>无标题页</title> 5 <style type="text/css"> 6 .background 7 { 8 background-color:Red; 9 } 10 11 </style> 12 <script src="JS/jquery-1.4.2.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 $(function() { $(".background").click(function() { alert("这是警告信息"); }) }); 15 </script> 16 </head> 17 <body> 18 <p class="background">ted</p> 19 <p class="background">red</p> 20 <p class="background">qed</p> 21 </body> 22 </html>
在以上代码中的第14行中的$(".background")的含义为，取得所有用到background样式的标签。如果在Dom中需要取得使用了background样式的标签，必须使用getElementById和getElementsTagName，并要判断class是否等于background，而JQuery进行使用样式选择器进行取值。
2.多项选择器。多项选择器的顾名思义是可以将多个具有不同性质的标签转换成JQuery对象。下面请看代码：
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 <title>无标题页</title> 5 <style type="text/css"> 6 .background 7 { 8 background-color:Red; 9 } 10 11 </style> 12 <script src="JS/jquery-1.4.2.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 $(function() { $("div,.background").click(function() { alert("这是警告信息"); }) }); 15 </script> 16 </head> 17 <body> 18 <div> 19 111111 20 </div> 21 <p class="background">ted</p> 22 <p class="background">red</p> 23 <p class="background">qed</p> 24 </body> 25 </html>
在上面的程序中可以看出使用多项选择器时可以将不同的性质的标签使用“,”隔开。以上14行的$("div,.background")的含义是将所有的div和使用了background样式的标签都转换为JQuery对象。所以此程序在运行时，不管是单击div中的内容还是P标签的内容都会弹出“这是警告信息”对话框。
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 <title>无标题页</title> 5 <style type="text/css"> 6 .background 7 { 8 background-color:Red; 9 } 10 11 </style> 12 <script src="JS/jquery-1.4.2.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 $(function() { $("div li").click(function() { alert("这是li"); }) }); 15 </script> 16 </head> 17 <body> 18 <div> 19 <li>12334</li> 20 <li>99999</li> 21 </div> 22 <p class="background">ted</p> 23 <p class="background">red</p> 24 <p class="background">qed</p> 25 </body> 26 </html>
以上代码中的$("div li")的含义是将div下的所有li都转换成JQuery，此时如果单击div中的li则会弹出“这是li”的对话框。除此之外还有不常用到的$("div>li")，此句的含义是将div下的直属li转换成JQuery对象（并不包含子项中含有的li）。
注意：在JQuery中常用的选择就这三种，不常用的选择大家一起学习。JQuery选择器中，必须严格输入空格，如果多空格或者少空格会产生一些不必要麻烦。
