Jquery入门学习篇--选择器（一）

html示例代码，该代码下载自网站http://www.manning.com/bibeault/，<div>
<label>Some images:</label>
</div>
<div>
<img src="images/image.1.jpg" id="hibiscus" alt="Jquery入门学习篇-选择器（1）"/>
<img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
<img src="images/image.3.jpg" id="verbena" alt="Jquery入门学习篇-选择器（1）"/>
<img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
<img src="images/image.5.jpg" id="tigerLily" alt="Jquery入门学习篇-选择器（1）"/>
<img src="images/image.6.jpg" id="coffeePot"/>
</div>
<div id="someDiv">This is a <div> with an id of <tt>someDiv</tt>
</div>
<div title="myTitle1">
<span>Hello</span>
</div>
<div title="myTitle2">
<span>Goodbye</span>
</div>
<ul border="0" cellspacing="1">
<thead>
<tr>
<th>Language</th>
<th>Type</th>
<th>Invented</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>Static</td>
<td>1995</td>
</tr>
<tr>
<td>Ruby</td>
<td>Dynamic</td>
<td>1993</td>
</tr>
<tr>
<td>Smalltalk</td>
<td>Dynamic</td>
<td>1972</td>
</tr>
<tr>
<td>C++</td>
<td>Static</td>
<td>1983</td>
</tr>
</tbody>
</table>
<form action="" method="put" onsubmit="return false;">
<div>
<label>Text:</label>
<input type="text" id="aTextField" name="someTextField"/>
</div>
<div>
<label>Radio group:</label>
<input type="radio" name="radioGroup" id="radioA" value="A"/> A??? <input type="radio" name="radioGroup" id="radioB" value="B"/> B??? <input type="radio" name="radioGroup" id="radioC" value="C"/> C? </div>
<div>
<label>Checkboxes:</label>
<input type="checkbox" name="checkboxes" id="checkbox1" value="1"/> 1??? <input type="checkbox" name="checkboxes" id="checkbox2" value="2"/> 2??? <input type="checkbox" name="checkboxes" id="checkbox3" value="3"/> 3??? <input type="checkbox" name="checkboxes" id="checkbox4" value="4"/> 4? </div>
<button type="submit" id="submitButton">Submit</button>
</form>

?

1.$("a")---------------匹配所有a标签

2.$(".myList")-------------匹配class为myList的元素

3.$("#languages")--------匹配id为languages的元素

4.$(".myList li a[href^=http]")------匹配class为myList元素下的所有li元素下的说有a元素，且href以http打头

5.$("ul.myList li a")与$("ul.myList>li>a")比较

?? $("ul.myList li a")-------匹配所有ul且class为myList下所有li的所有a元素

?? $("ul.myList>li>a")----------匹配所有ul且class为myList下直接子元素li下直接a元素

6.$("a[href=http]")? ------------- =匹配相等

?? $("a[href^=http]")? ------------- ^匹配以此开头

?? $("a[href$=com]")--------------$匹配以此结尾

?? $("a[href*=http]")? ------------- *匹配包含http

?? $("ul.myList +table")----------+匹配ul.myList下紧跟着的table元素 即A和B元素紧挨着的?

?? $("ul.myList ~table")----------~匹配ul.myList下的所有table元素 即A和B元素不用紧挨着的?

7.$("ul:has(li)")--------------e:has()匹配ul下有li的所有ul元素

8.通过位置选择

??? $("ul:last")------------第一个

??? $("ul:last")--------------最后一个

?? ?$("ul li:first-child")----------匹配所有ul下的第一个li

??? $("ul li:last-child")----------匹配所有ul下的最后一个li

?? ?$("a:only-child")-----------匹配所有没有兄弟节点的a元素

??? $("li:nth-child(1)")---------------返回并列li元素的第一个?:nth-child(n)? n从1开始

??? $("li:nth-child(odd)")---------------返回并列li元素偶数元素

?

??? $("li:eq(0)")---------------------eq匹配li的第一个元素? eq计数从0开始

?? ?$("li:gt(3)")---------------gt(n)匹配所有并列li且第n个之后的li元素 不包括n? n从0开始

????$("li:lt(3)")---------------gt(n)匹配所有并列li且第n个之前的li元素 不包括n? n从0开始

???

??? $("li:nth-child(even)")---------------返回并列li元素基数元素