(jQuery) CDN, Usage
jQuery
jQuery는 주로 DOM, Ajax, 그리고 event와 effect를 처리하기 위해 사용하는데, effect같은 경우 css로 처리할 수도 있다. hover같은건 effect로 봐야하기 때문에 css로 처리하는 것이 좋고, onclick은 event로 봐야하기 때문에 JS로 처리해야 한다.
effect
css로는 어려운 동적으로 페이지를 꾸미는 작업 은 보통 jQuery Plugin을 활용해 처리하게 된다.
DOM
기존 JS로 DOM을 선택, 추가, 수정하려면 제한이 많은데, jQuery를 활용하면 복제, 이동 등의 작업도 간단히 처리할 수 있다. 그래서 DOM 관련 작업을 하다가 뭔가 복잡한 것 같으면 그냥 jQuery를 찾아보는게 더 빠를 수 있다.
CDN
1
2
3
4
<script
src="http://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
끝에 /> 로 닫으면 안되고 반드시 </script> 로 닫아주어야 한다.
위 처럼 third-party server의 resource를 받아올 수 도 있고, jQuery를 로컬에 다운로드 받아 .js 파일을 지정해 불러올 수 도 있다. integrity와 crossorigin attribute는 Subresource Integrity (SRI) checking에 사용되는 속성이다. third-party server에 있는 resource를 받아오는 경우 사용하는게 좋다고 한다. 현재 jquery-3 버전까지 있다.
보통 사용하는 jquery CDN은 jquery, google, ms 정도다. 많이 사용하는 CDN을 사용해야 캐시가 존재할 확률이 크다.
https://developers.google.com/speed/libraries/
Usage
문서 객체가 관련 노드 중 어느 위치에 있는지 반환. .index([selector || element]) native js에도 RegExp의 method로 .index()가 있다. 한 단계 상위 문서 객체 선택 .end()
문서 객체가 특정 조건을 만족하는지 검사 .is()
속성 추가 / 수정 $(selector).attr();
속성 제거 .removeAttr();
* class 속성의 경우 속성을 하나씩 선택해 제거하고 싶다면 removeClass()
문서 객체를 텍스트 형식으로 반환 .html() - 태그까지 인식 .text() - 선택된 첫 번째 객체가 아니라 모든 선택된 객체 내부 텍스트를 이어서 반환
문서 객체 내부 추가 $('pre').html('<code>asdf</code>');
이런 식으로 바로 반복문 비슷하게 사용할 수 있다. $(selector).html(function(index, html){});
문서 객체 제거 remove()
문서 객체 이동
1
2
3
4
$(A).append(B)
$(A).prepend(B)
$(A).after(B)
$(A).before(B)
$(A).add(B)는 DOM을 추가하는게 아니다! 선택자 A에다가 선택자 B까지 추가로 해서 요소들을 잡겠다는 의미이다. 즉, css selector를 확장해주는 메서드다.
문서 객체 복사 clone()
jQuery 배열 순회
1
2
$.each(object, function(index, item) {})
$(selector).each(function(index, item) {}) - DOM을 선택해 반환된 배열을 바로 반복 돌릴 때.
item은 key = value 형태로 정의되어 있다. 가령 {name : 'foo'}이면 js item.name = foo 이다.