jQuery子要素セレクターの詳しい説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery子要素セレクターの詳しい説明

Feb 09, 2018 pm 02:08 PM

jquery 詳しい説明セレクタ

この記事では主に jQuery セレクターの子要素セレクターについて詳しく紹介します。興味のある方はぜひ参考にしてください。

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta http-equiv=&quot;Content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;imooc.css&quot; rel=&quot;external nofollow&quot; type=&quot;text/css&quot;&gt;
  &lt;script src=&quot;http://libs.baidu.com/jquery/1.9.1/jquery.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h2&gt;子元素筛选选择器&lt;/h2&gt;
  &lt;h3&gt;:first-child、:last-child、:only-child&lt;/h3&gt;
  &lt;p class=&quot;left first-p&quot;&gt;
    &lt;p class=&quot;p&quot;&gt;
      &lt;a&gt;:first-child&lt;/a&gt;
      &lt;a&gt;第二个元素&lt;/a&gt;
      &lt;a&gt;:last-child&lt;/a&gt;
    &lt;/p&gt;
    &lt;p class=&quot;p&quot;&gt;
      &lt;a&gt;:first-child&lt;/a&gt;
    &lt;/p&gt;
    &lt;p class=&quot;p&quot;&gt;
      &lt;a&gt;:first-child&lt;/a&gt;
      &lt;a&gt;第二个元素&lt;/a&gt;
      &lt;a&gt;:last-child&lt;/a&gt;
    &lt;/p&gt;
  &lt;/p&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;
    //查找class=&quot;first-p&quot;下的第一个a元素
    //针对所有父级下的第一个
    $(&quot;.first-p a:first-child&quot;).css(&quot;color&quot;, &quot;#CD00CD&quot;);
  &lt;/script&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;
    //查找class=&quot;first-p&quot;下的最后一个a元素
    //针对所有父级下的最后一个
    //如果只有一个元素的话，last也是第一个元素
    $(&quot;.first-p a:last-child&quot;).css(&quot;color&quot;, &quot;red&quot;);
  &lt;/script&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;
    //查找class=&quot;first-p&quot;下的只有一个子元素的a元素
    $(&quot;.first-p a:only-child&quot;).css(&quot;color&quot;, &quot;blue&quot;);
  &lt;/script&gt;


  &lt;h3&gt;:nth-child、:nth-last-child&lt;/h3&gt;
  &lt;p class=&quot;left last-p&quot;&gt;
    &lt;p class=&quot;p&quot;&gt;
      &lt;a&gt;:first-child&lt;/a&gt;
      &lt;a&gt;第二个元素&lt;/a&gt;
      &lt;a&gt;第三个元素&lt;/a&gt;
      &lt;a&gt;:last-child&lt;/a&gt;
    &lt;/p&gt;
    &lt;p class=&quot;p&quot;&gt;
      &lt;a&gt;:first-child&lt;/a&gt;
      &lt;a&gt;第二个元素&lt;/a&gt;
    &lt;/p&gt;
    &lt;p class=&quot;p&quot;&gt;
      &lt;a&gt;:first-child&lt;/a&gt;
      &lt;a&gt;第二个元素&lt;/a&gt;
      &lt;a&gt;第三个元素&lt;/a&gt;
      &lt;a&gt;:last-child&lt;/a&gt;
    &lt;/p&gt;
  &lt;/p&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;
    //查找class=&quot;last-p&quot;下的第二个a元素
    $(&quot;.last-p a:nth-child(2)&quot;).css(&quot;color&quot;, &quot;#CD00CD&quot;);
  &lt;/script&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;
    //查找class=&quot;last-p&quot;下的倒数第二个a元素
    $(&quot;.last-p a:nth-last-child(2)&quot;).css(&quot;color&quot;, &quot;red&quot;);
  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

ログイン後にコピー