<p>一、获取父级元素</p><p>1、 parent([expr]):</p><p>获取指定元素的所有父级元素</p><pre class="brush:html;toolbar:false">&lt;divid=&quot;par_div&quot;&gt;&lt;aid=&quot;href_fir&quot;href=&quot;#&quot;&gt;href_fir&lt;/a&gt; &lt;aid=&quot;href_sec&quot;href=&quot;#&quot;&gt;href_sec&lt;/a&gt; &lt;aid=&quot;href_thr&quot;href=&quot;#&quot;&gt;href_thr&lt;/a&gt;&lt;/div&gt; &lt;spanid=&quot;par_span&quot;&gt; &lt;aid=&quot;href_fiv&quot;href=&quot;#&quot;&gt;href_fiv&lt;/a&gt; &lt;/span&gt; $(document).ready(function(){ $(&quot;a&quot;).parent().addClass(&#39;a_par&#39;); });</pre><p>firebug查看jquery parent效果</p><p>二、获取同级元素:</p><p>1、next([expr]):</p><p>获取指定元素的下一个同级元素(注意是下一个同级元素哦)</p><pre class="brush:html;toolbar:false">&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;scripttype=&quot;text/javascript&quot;src=&quot;/jquery/jquery.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt;listitem1&lt;/li&gt; &lt;li&gt;listitem2&lt;/li&gt; &lt;liclass=&quot;third-item&quot;&gt;listitem3&lt;/li&gt; &lt;li&gt;listitem4&lt;/li&gt; &lt;li&gt;listitem5&lt;/li&gt; &lt;/ul&gt; &lt;script&gt; $(&#39;li.third-item&#39;).next().css(&#39;background-color&#39;,&#39;red&#39;); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>这个例子的结果是,只有list item 4背景色变为红色</p><p>2、nextAll([expr]):</p><p>获取指定元素后边的所有同级元素</p><p>Hello</p><p>Hello Again</p><p>&lt;div&gt;&lt;span&gt;And Again&lt;/span&gt;&lt;/div&gt;</p><p>var p_nex = $(&quot;p&quot;).nextAll();</p><p>p_nex.addClass(&#39;p_next_all&#39;);</p><p>firebug_jq_nextall</p><p>注意看最后一个&quot;&lt;p&amp;gt&quot;标签哦,也被加上了&#39;p_next_all&#39;这个类名哦~~</p><p>3、andSelf():</p><p>获取指定元素后边的所有同级元素,之后加上指定的元素</p><p>我感觉这个函数是最有意思的一个函数了,什么意思?直译过来就是&quot;还有我&quot;,&quot;还有自己&quot;,没错,还有自己。</p><p>&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;Hello Again&lt;/p&gt;&lt;div&gt;&lt;span&gt;And Again&lt;/span&gt;&lt;/div&gt;</p><p>var p_nex = $(&quot;p&quot;).nextAll().andSelf();</p><p>p_nex.addClass(&#39;p_next_all&#39;);</p><p>注意看第一个&quot;&lt;p&gt;&quot;标签啊,这句话的意思是选择p标签后面的所有同级标签,以及自己。。。</p><p>firebug_jq_andself</p><p>以下这两个不举具体的例子了,实际上就是next()和nextAll()的相反喽</p><p>4、prev():获取指定元素的上一个同级元素(是上一个哦)。</p><p>5、prevAll():获取指定元素的前边所有的同级元素。</p><p>三、获取子元素</p><p>1、查找子元素方式1:&gt;</p><p>例如:var aNods = $(&quot;ul &gt; a&quot;);查找ul下的所有a标签</p><p>2、查找子元素方式2:children()</p><p>3、查找子元素方式3:find()</p><p>这里再简单介绍以下children()和find()的异同:</p><p>1&gt; children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样。</p><p>2&gt; children方法获得的仅仅是元素一下级的子元素,即:immediate children。</p><p>3&gt; find方法获得所有下级元素,即:descendants of these elements in the DOM tree</p><p>4&gt; children方法的参数selector 是可选的(optionally),用来过滤子元素,</p><p>但find方法的参数selector方法是必选的。</p><p>5&gt; find方法事实上可以通过使用 jQuery( selector, context )来实现。即$(&#39;li.item-ii&#39;).find(&#39;li&#39;)等同于$(&#39;li&#39;, &#39;li.item-ii&#39;).</p><p>例:</p><pre class="brush:html;toolbar:false">&lt;ulclass=&quot;level-1&quot;&gt; &lt;liclass=&quot;item-i&quot;&gt;I&lt;/li&gt; &lt;liclass=&quot;item-ii&quot;&gt;II &lt;ulclass=&quot;level-2&quot;&gt; &lt;liclass=&quot;item-a&quot;&gt;A&lt;/li&gt; &lt;liclass=&quot;item-b&quot;&gt;B &lt;ulclass=&quot;level-3&quot;&gt; &lt;liclass=&quot;item-1&quot;&gt;1&lt;/li&gt; &lt;liclass=&quot;item-2&quot;&gt;2&lt;/li&gt; &lt;liclass=&quot;item-3&quot;&gt;3&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;liclass=&quot;item-c&quot;&gt;C&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;liclass=&quot;item-iii&quot;&gt;III&lt;/li&gt; &lt;/ul&gt;</pre><p>使用:$(&#39;ul.level-2&#39;).children().css(&#39;border&#39;, &#39;1px solid green&#39;); 的效果是:</p><p>jquery选择器 之 获取父级元素、同级元素、子元素 - yes - 赵彦平的网络家园</p><p>使用 $(&#39;ul.level-2&#39;).find(&#39;li&#39;).css(&#39;border&#39;, &#39;1px solid green&#39;); 的效果是:</p><p>jquery选择器 之 获取父级元素、同级元素、子元素 - yes - 赵彦平的网络家园</p>
RangeTime:0.005880s
RangeMem:211.66 KB
返回顶部 留言