jQuery 간단 정리

 

JQuery에서의 wrapper는 jQuery(엘리먼트 혹은 CSS 선택자) 부분을 말한다.

 

jQuery의 안전한 사용

$(엘리먼트)로도 사용할 수 있지만 다른 라이브러리와 충돌할 수도 있어서 다음의 두가지 방법으로 사용된다.

1)

jQuery('body').html('hihi');

2)

(function($){

//jquery코드

jQuery('body').html('hihi');

})(jQuery)

위의 함수를 이해하기 위해 간단히 해보면 (function(인자){코드})(jQuery) 이다. function($) 의 달러부분의 인자로 jQuery라는 문자열이 들어가게 되고 그렇게 되면 내부의 코드는 1)이랑 다를 바가 없게 된다.

---

제어 대상 지정하기

제어 대상을 지정하는 방법에는 두가지가 있다. element 자체를 넘기는 방법과 selector를 context와 함께 넘겨주는 방법이 있다.

1)

jQuery(selector, [context]) 여기서 context는 옵션이다.

ex - jQuery('li', this)    jQuery('#jquery, #hello').addClass('selected');

2)

jQuery(element)

---

jQuery에서의 Chaining

jQuery에서는 모든 함수가 자기 자신을 포함하는 context를 리턴하기 때문에 chaining이 가능하다.

동일한 기능을 js로 코딩한 것과 비교하여 예시를 통해 알아보면 

jQuery

jQuery('#myId').attr('href', 'naver.com').attr('target', 'changed');

JS

let elem = document.getElemById('myId');

elem.setAttribute('href', 'naver.com')

elem.setAttribute('target', 'changed');

console.log로 찍어보면 알겠지만 결과는 undefined라고 나온다. js에서는 위의 함수를 실행한 결과가 리턴값이 없어서 체이닝이 불가능하다. jQuery는 chaining 덕분에 코드가 간결하고 더 자연스러운 사고와 함께 코딩이 가능하다.

 

 

탐색 (traversing)

 

$('ul').find('.first').css('background-color', 'red').end().find('second').css('background-color', 'red')

wrapper의 context가 find() 때문에 ul태그의 first 클래스들로 바뀐다. 그래서 이어지는 css 함수를 통해 배경색을 빨갛게 바꾸면 다 바뀌는 게 아닌 first 클래스들만 바뀌게 된다. 다음으로 end 함수를 호출하면 직전의 find함수를 취소하여 context에서 한단계 빠져나가 다시 ul 태그를 담게된다.