Jquery에는 체인이 가능하다.

체인은 멀까?

체인은 셀렉터로 찾아온 값에 연속적으로 작업을 하는것

체인이 좋은점이 멀까??

체인의 좋은점은, 단 한가지다 효율성이 높다.

예를들어.

$("p").css("backgroud","red");

$("p").css("border","1px");

$("p").css("cellspacing","0");

위와같이 주었다고 하면 p태그에 3번의 셀렉션과 css속성 추가가 들어간다.

그러나, 아래와 같이 하면 한번의 셀렉터로 위와같은 효과를 내기에 리소스가 훨씬절약된다.

$("p").css("backgroud","red").css("border","1px").css("cellspacing","0");

위와 같은 방법으로 쓰기도 하나 가독성을 위해 아래와 같이 표기하긷 한다.

$("p")

.css("backgroud","red")

.css("border","1px")

.css("cellspacing","0");

위에서 본것처럼 Jquery는 줄바꿈이나 사이띄움에도 작동이 되는것을 확인할수 있다.

그럼 위와 같은 메서드에서 잘못되거나 돌려줘나 고치는 행위를 없었던걸로 하는

흔히 말하는 Ctrl+z (Undo) 효과를 내는 메소드가 end()이다.

$("p")

.css("backgroud","red")

.css("border","1px")

.css("cellspacing","0")

.end()

.end();

위와 같이 표기할 경우 뒤에서 부터 2가지가 Undo되었으므로 배경색 Red만 남는다.

find()와 filter() 2개다 셀럭터로서 인자값을 찾는다.

차이는

find는 자식놈들만

filter는 부모포함

그럼 여기서 문제,

난 find만 익숙하다 근데 부모를 포함시키고 싶다

예를 들어 아래의 구문과 같이 하위로 가서 b태그의 뒷배경을 파랑색으로 만들었다.

<div>

<b>첫번째</b>

<b>두번째</b>

</div>

<script>

$("div").find("b").css("backgroud","blue");

</script>

근데 위에도 같이 하고 싶을때, andself()메서드가 있다.

아래와 같이 소스를 바꿔주면 부모태그인 div까지 css가 적용되는것을 확인할 수있다.

<div>

<b>첫번째</b>

<b>두번째</b>

</div>

<script>

$("div").find("b").andself().css("backgroud","blue");

</script>