jQuery - 체이닝
jQuery - Chaining
jQuery를 통해 액션/메서드를 서로 연결할 수 있습니다.
Chaining을 사용하면 하나의 명령문에서 여러 jQuery 메서드(동일한 요소에 대해)를 실행할 수 있습니다.
jQuery 메서드 링크
지금까지 우리는 jQuery 문을 한 번에 하나씩(하나씩 차례로) 작성해 왔습니다.
그러나 동일한 요소에 대해 여러 jQuery 명령을 차례로 실행할 수 있게 해주는 체이닝이라는 기술이 있습니다.
팁: 이렇게 하면 브라우저가 동일한 요소를 여러 번 찾을 필요가 없습니다.
작업을 연결하려면 이전 작업에 작업을 추가하기만 하면 됩니다.
다음 예제에서는 css(), SlideUp() 및 SlideDown()을 함께 연결합니다. "p1" 요소가 먼저 빨간색으로 변한 다음 위로 슬라이드한 다음 아래로 이동합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">菜鸟教程!!</p>
<button>点我</button>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요
필요한 경우, 여러 메서드 호출을 추가할 수도 있습니다.
팁: 링크할 때 코드 줄이 엉망이 됩니다. 그러나 jQuery 구문은 그다지 엄격하지 않으며 줄 바꿈 및 들여쓰기를 포함하여 원하는 형식으로 작성할 수 있습니다.
다음과 같이 작성해도 잘 실행될 수 있습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">菜鸟教程!!</p>
<button>点我</button>
</body>
</html>예제 실행»
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요.
jQuery는 추가 공백을 버리고 다음과 같이 처리합니다. 위의 코드 줄을 실행하는 한 줄의 긴 코드입니다.
