목차
- Chaining 예제 - 한 선택자에 대해 여러 메서드 연쇄 실행
- Chaining 정의
- 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는 한 구문의 각 빈 공간은 날리고, 긴 한 구문으로 인식.