jQuery 선택 기의 하위 요소 선택 기 상세 설명

3337 단어 jQuery선택 기
본 논문 의 사례 는 jQuery 서브 요소 선택 기 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

<!DOCTYPE html>
<html>

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

<body>
  <h2>        </h2>
  <h3>:first-child、:last-child、:only-child</h3>
  <div class="left first-div">
    <div class="div">
      <a>:first-child</a>
      <a>     </a>
      <a>:last-child</a>
    </div>
    <div class="div">
      <a>:first-child</a>
    </div>
    <div class="div">
      <a>:first-child</a>
      <a>     </a>
      <a>:last-child</a>
    </div>
  </div>

  <script type="text/javascript">
    //  class="first-div"     a  
    //           
    $(".first-div a:first-child").css("color", "#CD00CD");
  </script>

  <script type="text/javascript">
    //  class="first-div"      a  
    //            
    //          ,last       
    $(".first-div a:last-child").css("color", "red");
  </script>

  <script type="text/javascript">
    //  class="first-div"          a  
    $(".first-div a:only-child").css("color", "blue");
  </script>


  <h3>:nth-child、:nth-last-child</h3>
  <div class="left last-div">
    <div class="div">
      <a>:first-child</a>
      <a>     </a>
      <a>     </a>
      <a>:last-child</a>
    </div>
    <div class="div">
      <a>:first-child</a>
      <a>     </a>
    </div>
    <div class="div">
      <a>:first-child</a>
      <a>     </a>
      <a>     </a>
      <a>:last-child</a>
    </div>
  </div>

  <script type="text/javascript">
    //  class="last-div"     a  
    $(".last-div a:nth-child(2)").css("color", "#CD00CD");
  </script>

  <script type="text/javascript">
    //  class="last-div"       a  
    $(".last-div a:nth-last-child(2)").css("color", "red");
  </script>

</body>

</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기