• Q&A
  • 회원가입
  • 로그인

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

228  

목차

  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 구문

※ 2가지 모두 가능.

 

메서드를 옆으로 나열.

$("selector").method(option).method(option).method(option);

메서드를 밑으로 나열.
$("selector")
    .method(option)
    .
method(option)
    .
method(option);

 

※ 가독성 위해 줄바꿈 해도 무방. (※ jQuery는 유연한 언어임.)
※ jQuery는 한 구문의 각 빈 공간은 날리고, 긴 한 구문으로 인식.
 

찾아주셔서 감사합니다. Since 2012