1. 选择器
jQuery其实就是对网页进行操作的，要进行操作总得有个操作对象，jQuery就是通过选择器选择操作对象的。
jQuery选择器其实就是jQuery(rule)方法，该方法通过指定选择规则rule，返回选定的对象。例如jQuery("div")表示选择网页中的div元素。
因为选择器太常用了，所以提供了$操作符代替jQuery，$("div")明显简洁明了多了。（PS：其实就相当于+代替了add()函数）。
2. 选择器用法示例
演示下最基本的几种用法，只要记住jQuery的选择器基本能满足所有选择需求就是了，具体怎么选择可以去查查手册，记住最常用的就行：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="jquery.min.js"></script> <title></title> </head> <body> <!-- 用法1，按id选择元素，只会匹配到1个元素 --> <div id="id1"></div> <script>$("#id1").html("hello my id1")</script> <!-- 用法2，按元素名称选择元素，会匹配到所有该名称的元素 --> <span id="span1"></span> <span id="span2"></span> <script>$("span").html("hello span elements")</script> <!-- 用法3，匹配class名称 --> <div class="class1"></div> <div class="class1"></div> <script>$(".class1").html("hello elements of class1")</script> <!-- 用法4，逗号代表同时应用多个规则，符合任何一个规则的元素都会被选中 --> <div id="id4"></div> <script>$("#id1,.class1").css("color","red");</script> <!-- 用法5，"rule1 rule2"表示选中rule1内部所有rule2元素 --> <div id="id5"> <div><span></span></div> <div><span></span></div> <span></span> <span></span> </div> <script>$("#id5 span").html("id5's inner span");</script> <!-- 用法6，"rule1>rule2"表示选中rule1元素内符合rule2规则的儿子辈元素，不包括孙子、重孙子等 --> <div id="id6"> <div><span></span></div> <div><span></span></div> <span></span> <span></span> </div> <script>$("#id6>span").html("id6's son span");</script> <!-- 用法7，选择第一个、最后一个、指定序号的子元素 --> <div id="id7"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <script> $("#id7 span:first-child").css("color","red"); $("#id7 span:last-child").css("color","green"); $("#id7 span:nth-child(3)").css("color","blue"); </script> <!-- 用法8，选择子元素中的奇数odd偶数even元素 --> <div id="id8"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <script> $("#id8 span:nth-child(odd)").css("color","red"); $("#id8 span:nth-child(even)").css("color","green"); </script> </body> </html>
