jQuery 체인 호출

체인 호출
jQuery 대상 이 모든 방법(노드 관계 방법 제외)을 호출 한 후에 방법 은 반환 값 이 있 습 니 다.반환 값 은 jQuery 대상 자신 입 니 다.이 현상 은 우리 에 게 편 의 를 제공 하고 실행 결과 에 대해 jQuery 의 방법 과 속성 을 계속 호출 할 수 있 습 니 다.즉 jQuery 대상 을 사용 하여 연속 타 점 호출 을 할 수 있 습 니 다.

console.log($(this).css("background-color", "pink").html("hello"));
jQuery 대상 이 노드 관 계 를 제외 한 다른 방법 을 호출 한 후에 반환 값 은 대상 자신 이 고 다른 jQuery 대상 의 방법 과 속성 을 계속 체인 으로 호출 할 수 있 습 니 다.이렇게 하면 코드 작성 을 간소화 할 수 있다.
작은 사례
*8195 원 소 를 클릭 하여 자신 을 분홍색 으로 만 들 고 형 제 는 노란색 으로 변 하 며 아버지 급 은 파란색 으로 변 하고 아버지 급 의 형 제 는 변색 되 며 아버지 급 의 형 제 는 주황색 으로 변 합 니 다.

<style>
  * {
       margin: 0;
       padding: 0;
     }

  .box {
       width: 400px;
       height: 60px;
       border: 1px solid #000;
       margin-top: 2px;
      }

  .box p,.box h2 {
       float: left;
       width: 60px;
       height: 60px;
       margin-right: 20px;
       background-color: rgb(164, 247, 233);
    }
</style>
<!------------------------------------------------------------------->

<body>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h2>h2</h2>
  </div>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h2>h2</h2>
  </div>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h2>h2</h2>
  </div>
  <div class="box">
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <h2>h2</h2>
  </div>
  <script src="../jq/jquery-1.12.4.min.js"></script>
  <script>
     var $p = $("p");
     var $box = $(".box")
     $p.click(function () {
      //         
       $(this).css("background-color","pink")   //     
       .siblings().css("background-color","yellow")  //        
       .parent().css("background-color","skyblue")   //                               .siblings().css("background-color","lightgreen")  //            
       .children().css("background-color","orange")  //           
     })

이상 은 jQuery 체인 호출 에 대한 상세 한 내용 입 니 다.jQuery 체인 호출 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 해 주 십시오!

좋은 웹페이지 즐겨찾기