본문 바로가기

WEB_TECH/jquery

[jQuery] 6. jQuery method chaining

jQuery는 체인액션을 사용할 수 잇습니다.

체인액션은 한라인에서 동일한 엘리먼트에 대하여 여러메서드를 실행하는 방법입니다.

 

jQuery method chaining

지금까지 우리는 한번에 한문장씩 사용해 왔습니다.

그러나 동일한 엘리먼트에 여러 jQuery명령을 체인이라는 기술을 사용하여 실행할 수 있습니다.


tip. 다큐먼트에서 동일한 요소를 두번이상 찾을 필요가 없습니다.


[예제1]

<!DOCTYPE html>

<html>

<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/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">jQuery is fun!!</p>

<button>Click me</button>


</body>

</html>



$("#p1").css("color","red").slideUp(2000).slideDown(2000); 


이 체인이 너무 길어서 가독성이 안좋게 느껴질 때는


$("#p1").css("color","red").

    slideUp(2000).

    slideDown(2000); 


이렇게 줄바꿈 및 들여쓰기를 포함하여 작성해도 됩니다. 


'WEB_TECH > jquery' 카테고리의 다른 글

[jQuery] 8. HTML Set  (0) 2013.04.22
[jQuery] 7. HTML Get  (0) 2013.04.22
[jQuery] 5. jQuery 이펙트  (0) 2013.04.22
[jQuery] 4. jQuery이벤트  (0) 2013.04.22
[jQuery] 3. jQuery 셀렉터  (0) 2013.04.16
[jQuery] 2. jQuery 문법  (0) 2013.04.11
[jQuery] 1. jQuery 시작하기  (0) 2013.04.11