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

html示例代码，该代码下载自网站http://www.manning.com/bibeault/，<div>
<label>Some images:</label>
</div>
<div>
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
<img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
<img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
<img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
<img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
<img src="images/image.6.jpg" id="coffeePot"/>
</div>
<div id="someDiv">This is a &lt;div&gt; with an id of <tt>someDiv</tt>
</div>
<div title="myTitle1">
<span>Hello</span>
</div>
<div title="myTitle2">
<span>Goodbye</span>
</div>
<ul class="myList">
<li>
<a href="http://jquery.com">jQuery supports</a>
<ul>
<li>
<a href="css1">CSS1</a>
</li>
<li>
<a href="css2">CSS2</a>
</li>
<li>
<a href="css3">CSS3</a>
</li>
<li>Basic XPath</li>
</ul>
</li>
<li>jQuery also supports    <ul>
<li>Custom selectors</li>
<li>Form selectors</li>
</ul>
</li>
</ul>
<table id="languages" 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元素基数元素