[Effect] JQ - Chaining 기법 ★ - 여러 메서드 연쇄 실행. (= 메서드 이어서 실행시키기. = 체이닝)

목차

1. Chaining 예제 - 한 선택자에 대해 여러 메서드 연쇄 실행
2. Chaining 정의
3. Chaining 구문

Chaining 예제 - 한 선택자에 대해 여러 메서드 연쇄 실행

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#site")

          .css("color", "red")
          .animate ({fontSize:"1.5em"})

          .slideUp(2000)

          .slideDown(2000);

    });

});

</script>

<p id="site">홈짱닷컴 (Homzzang.com)</p>

<button>움직여라! 짠.</button>

결과보기

Chaining 정의

 

한 구문 안에서, 한 선택자에 대해 여러 메서드 연결해 연쇄 실행.

 

---

[장점]

 

브라우저가 선택자를 여러 번 찾을 필요 없어, 로딩 속도 빨라짐.

 

Chaining 구문