脚本宝典收集整理的这篇文章主要介绍了

锋利的 jQuery (第二版) jQuery 选择器

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">2.1 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 选择器的概念</h2> <p><strong> 1. <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 选择器</strong><br />常用 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 选择器(几乎所有浏览器都支持的 <a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a> 选择器)<br />标签选择器、ID选择器、类选择器、 群组选择器(多个选择器组合)、后代选择器(写法: E F{ })、通配选择器(写法: *{ });</p> <p>其他 CSS 选择器<br />伪类选择器(E:PseudoElements{})、子类选择器(E&gt;F{})、邻近选择器(E+F{})和属性选择器(E[attr]{})。<strong>主流浏览器并非支持所有的 CSS 选择器。</strong><br /><strong> 1. <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 选择器</strong><br /><a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a> 选择器拥有跨浏览器兼容性。</p> <h2 id="articleHeader1">2.2 jQuery 选择器的优势</h2> <p><strong> 1. 简洁</strong><br />$() 为多种 javascript 库作为选择器函数使用。<br /><strong> 2. 完善的事件处理机制</strong><br />jQuery 在获取网页中并不存在的元素不会报错。<br />$('')获取的永远是对象,即使网页中并不存在该元素。因而检查某元素在网页是否存在时,不可使用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="if ($(&quot;#a&quot;)) { }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="python hljs"><code class="python"><span class="hljs-keyword">if</span> ($(<span class="hljs-string">"#a"</span>)) { }</code></pre> <p>应该根据获取元素的长度来判断,</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="if ($(&quot;#a&quot;).length > 0) {<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="python hljs"><code class="python"><span class="hljs-keyword">if</span> ($(<span class="hljs-string">"#a"</span>).length &gt; <span class="hljs-number">0</span>) { }</code></pre> <p>或者转化为 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 对象</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="if ($(&quot;#a&quot;)[0]) { }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="python hljs"><code class="python"><span class="hljs-keyword">if</span> ($(<span class="hljs-string">"#a"</span>)[<span class="hljs-number">0</span>]) { }</code></pre> <h2 id="articleHeader2">2.3 jQuery 选择器</h2> <h3 id="articleHeader3">2.3.1 基本选择器</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$(&quot;#ID&quot;), $(&quot;.class&quot;), $(&quot;tagName&quot;), $(&quot;*&quot;), 群组选择器" title="" data-original-title="复制"></span> </div> </p></div> <pre class="python hljs"><code class="python" style="word-break: break-word; white-space: initial;">$(<span class="hljs-string">"#ID"</span>), $(<span class="hljs-string">".class"</span>), $(<span class="hljs-string">"tagName"</span>), $(<span class="hljs-string">"*"</span>), 群组选择器</code></pre> <h3 id="articleHeader4">2.3.2 层次选择器</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$(&quot;ancestor descendant&quot;), $(&quot;parent> child&quot;), $(&quot;prex + next&quot;), $(&quot;prex ~ siblings&quot;)。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="python hljs"><code class="python" style="word-break: break-word; white-space: initial;">$(<span class="hljs-string">"ancestor descendant"</span>), $(<span class="hljs-string">"parent&gt; child"</span>), $(<span class="hljs-string">"prex + next"</span>), $(<span class="hljs-string">"prex ~ siblings"</span>)。</code></pre> <h3 id="articleHeader5">2.3.3 过滤选择器</h3> <p>...</p> <h3 id="articleHeader6">2.3.4 表单选择器</h3> <p>...</p> <h2 id="articleHeader7">2.5 选择器中的注意事项</h2> <h3 id="articleHeader8">2.5.1 选择器带有特殊符号, 需要转义</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$(&quot;#id#b&quot;) 换成 $(&quot;#id\#b&quot;)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="python hljs"><code class="python" style="word-break: break-word; white-space: initial;">$(<span class="hljs-string">"#id#b"</span>) 换成 $(<span class="hljs-string">"#id\#b"</span>)</code></pre> <h3 id="articleHeader9">2.5.2 选择器带有空格</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html></p> <p><head><br /> <title></title><br /> <script src=&quot;../jquery-1.8.3.js&quot;></script><br /> </head></p> <p><body></p> <div class=&quot;div&quot;> <div style=&quot;display:none;&quot;></div> <div style=&quot;display:none;&quot;></div> <div style=&quot;display:none;&quot;></div> <div class=&quot;div&quot; style=&quot;display:none;&quot;></div> </p></div> <div class=&quot;div&quot;> <div class=&quot;div&quot; style=&quot;display:none;&quot;></div> <div class=&quot;div&quot; style=&quot;display:none;&quot;></div> </p></div> <p></body><br /> <script> $(function() { var $a = $(&quot;.<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> :hidden&quot;); var $b = $(&quot;.<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>:hidden&quot;); var a_len = $a.length; // 6 var b_len = $b.length; // 3 alert(a_len); alert(b_len); }); </script></p> <p></html><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="python hljs"><code class="python">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src=<span class="hljs-string">"../jquery-1.8.3.js"</span>&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> <span class="hljs-class"><span class="hljs-keyword">class</span>="<span class="hljs-title">div</span>"&gt; &lt;<span class="hljs-title">div</span> <span class="hljs-title">style</span>="<span class="hljs-title">display</span>:</span>none;<span class="hljs-string">"&gt;&lt;/div&gt; &lt;div style="</span>display:none;<span class="hljs-string">"&gt;&lt;/div&gt; &lt;div style="</span>display:none;<span class="hljs-string">"&gt;&lt;/div&gt; &lt;div class="</span>div<span class="hljs-string">" style="</span>display:none;<span class="hljs-string">"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="</span>div<span class="hljs-string">"&gt; &lt;div class="</span>div<span class="hljs-string">" style="</span>display:none;<span class="hljs-string">"&gt;&lt;/div&gt; &lt;div class="</span>div<span class="hljs-string">" style="</span>display:none;<span class="hljs-string">"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; $(function() { var $a = $("</span>.div :hidden<span class="hljs-string">"); var $b = $("</span>.div:hidden<span class="hljs-string">"); var a_len = $a.length; // 6 var b_len = $b.length; // 3 alert(a_len); alert(b_len); }); &lt;/script&gt; &lt;/html&gt; </span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//后代选择器 var $a = $(&quot;.div :hidden&quot;); // 选取 class 为 div 的元素里面的隐藏元素。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="python hljs"><code class="python">//后代选择器 var $a = $(<span class="hljs-string">".div :hidden"</span>); // 选取 <span class="hljs-class"><span class="hljs-keyword">class</span> 为 <span class="hljs-title">div</span> 的元素里面的隐藏元素。</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//过滤选择器 var $b = $(&quot;.div:hidden&quot;); // 选取隐藏的 class 为 div 的元素。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="python hljs"><code class="python">//过滤选择器 var $b = $(<span class="hljs-string">".div:hidden"</span>); // 选取隐藏的 <span class="hljs-class"><span class="hljs-keyword">class</span> 为 <span class="hljs-title">div</span> 的元素。</span></code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

锋利的 jQuery (第二版) jQuery 选择器

全部内容,希望文章能够帮你解决

锋利的 jQuery (第二版) jQuery 选择器

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过