<h2>1、说明</h2>
<p> 通用语法：</p>
<pre class="blockcode">
</pre>
<ol><li>$('具体的选择字符串');</li></ol>
<blockquote>
<p> 选择结果可能是单个或多个对象。</p>
<p> 下面涉及到索引的，多是从0开始计数。</p>
<p> 如果选择器中包含特殊字符，可以用两个斜杠转义。</p>
</blockquote>
<p> </p>
<h2><a name="t1"></a>2、基本的选择器</h2>
<h3><a name="t2"></a> 2.1、元素选择器（element）</h3>
<p> html:</p>
<pre class="blockcode">
</pre>
<ol><li><div>DIV1</div></li><li><div>DIV2</div></li></ol>
<p> Jquery:</p>
<pre class="blockcode">
</pre>
<ol><li>$("div");</li></ol>
<p> 结果：[<div>DIV1</div>,<div>DIV2</div>]</p>
<h3><a name="t3"></a> 2.2、ID选择器（#id）</h3>
<p> html:</p>
<pre class="blockcode">
</pre>
<ol><li><div id="div1"></div></li></ol>
<p> Jquery:</p>
<pre class="blockcode">
</pre>
<ol><li>$("#div1");</li></ol>
<h3><a name="t4"></a> 2.3、类选择器（.class）</h3>
<p> html:</p>
<pre class="blockcode">
</pre>
<ol><li><div class="notMe">div class="notMe"</div></li><li><div class="myClass">div class="myClass"</div></li><li><span class="myClass">span class="myClass"</span></li></ol>
<p> Jquery:</p>
<pre class="blockcode">
</pre>
<ol><li>$(".myClass");</li></ol>
<p> 结果：[<div class="myClass">div class="myClass"</div>,<span class="myClass">span class="myClass"</span>]</p>
<h3><a name="t5"></a> 2.4、匹配所有元素，通常用于结合上下文搜索（*）</h3>
<p> html:</p>
<pre class="blockcode">
</pre>
<ol><li><div>DIV</div></li><li><span>SPAN</span></li><li><p>P</p></li></ol>
<p> Jquery:</p>
<pre class="blockcode">
</pre>
<ol><li>$("*")</li></ol>
<p> 结果：[<div>DIV</div>,<span>SPAN</span>,<p>P</p>]</p>
<h3><a name="t6"></a> 2.5、根据多个规则获取元素（selector1,selector2,selectorN）</h3>
<p> 将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。</p>
<p> html:</p>
<pre class="blockcode">
</pre>
<ol><li><div>div</div></li><li><p class="myClass">p class="myClass"</p></li><li><span>span</span></li><li><p class="notMyClass">p class="notMyClass"</p></li></ol>
<p> Jquery:</p>
<pre class="blockcode">
</pre>
<ol><li>$("div,span,p.myClass")</li></ol>
<p> 结果：[<div>div</div>,<p class="myClass">p class="myClass"</p>,<span>span</span>]</p>
<h2><a name="t7"></a>3、层次结构中选取</h2>
<h3><a name="t8"></a> 3.1、选取指定元素内所有匹配的元素（ancestor descendant）</h3>
<p> html:</p>
<pre class="blockcode">
</pre>
<ol><li><form></li><li><label>Name:</label></li><li><input name="name" /></li><li><fieldset></li><li><label>Newsletter:</label></li><li><input name="newsletter" /></li><li></fieldset></li><li></form></li><li><input name="none" /></li></ol>
<p> Jquery:</p>
<pre class="blockcode">
</pre>
<ol><li>$("form input")</li></ol>
<p> 结果：[<input name="name" />,<input name="newsletter" />]</p>
<h3><a name="t9"></a> 3.2、选择指定父元素下匹配的子元素（parent > child）</h3>
<p> html:</p>
<pre class="blockcode">
</pre>
<ol><li><form></li><li><label>Name:</label></li><li><input name="name" /></li><li><fieldset></li><li><label>Newsletter:</label></li><li><input name="newsletter" /></li><li></fieldset></li><li></form></li><li><input name="none" /></li></ol>
<p> Jquery:</p>
<pre class="blockcode">
</pre>
<ol><li>$("form > input")</li></ol>
<p> 结果：[<input name="name" />]</p>
<h3><a name="t10"></a> 3.3、选择所有紧接在指定元素后指定的匹配元素（prev + next）</h3>
<p> html:</p>
<pre class="blockcode">
</pre>
<ol><li><form></li><li><label>Name:</label></li><li><input name="name" /></li><li><fieldset></li><li><label>Newsletter:</label></li><li><input name="newsletter" /></li><li></fieldset></li><li></form></li><li><input name="none" /></li></ol>
<p> Jquery:</p>
<pre class="blockcode">
</pre>
<ol><li>$("label + input")</li></ol>
<p> 结果：[<input name="name" />,<input name="newsletter" />]</p>
<h3><a name="t11"></a> 3.4、选择指定元素之后的所有指定的匹配元素（prev ~ siblings）</h3>
<p> html:</p>
<pre class="block |
|
转播
