jQuery 쓰는것이 좋은 것인가?
요즈음 웹퍼블리싱을 배우는 학생들의 이야기드를 들어보면, jQuery를 안쓰게 좋을것 같다고 또는 안쓰게 될 것 같다고 이야기 합니다.
그럼 Why? 라는 질문을 하면, 이유를 대답하지 못합니다.
개념조차 이해하지 못하고, 어디서 들은것 같다고만 이야기 하기 때문입니다.
물론 모든 학생이 모두 그렇게 이야기 하는것은 아닙니다.
그럼 저는 왜 jQuery를 써야 하는지 설명해 줍니다.
jQuery 사용하는 첫번째 이유
jQuery는 자바스크립트 DOM을 좀더 쉽게 작업하기 위한 라이브러리 입니다.
결론부터 말하자면 jQuery의 정체는 자바스크립트 문법 중 프로토타입 방식으로 만들어진 클래스입니다.
쉽게 이야기해 jQuery 메서드는 자바스크립트 DOM으로 이루어져 있습니다.
그렇기에 jQuery를 배운다는것은 메서드를 배우는 것이며, 이를 통해 자바스크립트로 코딩하면 10줄, jQuery로 코딩하면 2-3줄로 처리 할수 있을 만큼 효율적인
코드작업을 할 수 있습니다.
그렇다고 jQuery로 모든것을 다 할 수 있는것도 아니며 무조건 좋다는 말은 아닙니다.
제일 좋은 방법은 jQuery와 자바스크립트를 같이 사용하여 최적화 하는방법이 좋다고 말씀드리고 싶습니다.
jQuery는 쉬운데 자바스크립트는 어렵다고 하는 분들은 자바스크립트도 충실히 공부하셔야 합니다.
jQuery 사용하는 두번째 이유
jQuery는 DOM 제어보다 크로스 브라우징 처리가 편리합니다.
IE7은 비표준 브라우저이기 때문에 이벤트 등록시 자바스크립트로 처리할 경우 attachEvent(), addEventListener()를 사용하여 코드를 작성하여야,
IE7과 기타 브라우저의 크로스브라우징을 정상적으로 처리해야 합니다.
이와달리 jQuery 내부에는 이런 번거로운 작업들을 대신 처리해주기 때문에 이벤트를 아주 쉽게 처리할 수 있습니다.
jQuery 학습 방법 및 결론
자바스크립트의 경우 기본 문법을 모를 경우 공부하기가 힘듭니다.
그러나 jQuery의 경우 수많은 메서드로 구성되어 있기에 순서없이 메서드를 하나씩 학습하시면 됩니다.
굳이 공부하는 순서를 따져야 한다면, jQuery는 css와 연관성이 많기에 css를 기본적으로 이해하셔야 하며, 노드를 찾아가는 방법(체인기능) 메서드부터 진행하면 될 것 같습니다.
이것은 웹퍼블리싱을 전문적으로 하는 (주)맑은커뮤니케이션에서 진행하는 신입 퍼블리셔 교육방법 입니다.
아래는 jQuery 메서드 정리입니다. 메서드 정리는 사용 용도에 따라 1, 2부로 나누어 올릴 것 입다다
노드 메서드
노드를 선택하거나, 찾아가는 방법(체인기능)의 메서드 입니다.
분류 | 핵심 내용 | 핵심 프로퍼티 및 메서드 |
---|---|---|
일반 노드 찾기 |
아이디 이름으로 노드 찾기 | $("아이디 이름") |
태그 이름으로 노드 찾기 | $("태그 이름") | |
클래스 이름으로 노드 찾기 | $("클래스 이름") | |
속성으로 노드 찾기 | $("[속성이름=값]") | |
찾은 노드 다루기 |
찾은 개수 구하기 | $대상.length |
n번째 노드 접근하기 | $대상.eq(index) | |
자바스크립트 DOM 객체 접근하기 | $대상.get(index) $대상[index] | |
순차적으로 노드 접근하기 | $대상.each(function(index){ $(this) 또는 $대상.eq(index); }); | |
찾은 노드 중에서 특정 노드만 찾기 | $대상.filter("선택자") | |
찾은 노드의 자손 노드 중 특정 노드만 찾기 | $대상.find("선택자") | |
인덱스 값 구하기 |
$대상.index() $목록.index($대상) $목록.index(대상 DOM 객체) | |
자식 노드 찾기 |
모든 자식 노드 찾기 | $대상.children() |
특정 자식 노드만 찾기 | $대상.children("선택자") | |
첫 번째 자식 노드 찾기 | $대상.children().first() $대상.children(":first") $대상.children().eq(0) $대상.children("eq(0)") | |
마지막 번째 자식 노드 찾기 | $대상.children().last() $대상.children(":last") $대상.children().eq($대상.children().length-1) $대상.children(":eq("+($대상.children().length-1)+")") | |
n번째 자식 노드 찾기 | $대상.children().eq(index) $대상.children(":eq("+index+")") | |
부모 노드 찾기 |
부모 노드 찾기 | $대상.parent() |
조상 노드 찾기 | $대상.parents(["선택자"]) | |
형제 노드 찾기 |
이전 형제 노드 찾기 | $대상.prev() $대상.prevAll(["선택자"]) |
다음 형제 노드 찾기 | $대상.next() $대상.nextAll(["선택자"]) | |
노드 생성/ 추가 |
노드 생성 | $("추가노드 DOM 문자열") |
첫 번째 자식 노드로 추가 | $부모노드.prepend($추가노드) $추가노드.prependTo($부모노드) | |
마지막 번째 자식 노드로 추가 | $부모노드.append($추가노드) $추가노드.appendTo($부모노드) | |
특정 노드의 이전 위치에 추가 | $기준노드.before($추가노드) $추가노드.insertBefore($기준노드) | |
특정 노드의 다음 위치에 추가 | $기준노드.after($추가노드) $추가노드.insertAfter($기준노드) | |
노드제거 | 특정 노드 제거 | $대상.remove() |
모든 자식 노드 제거 | $대상.children().remove() | |
노드 내용 읽기 및 변경 |
노드 내용을 문자열로 읽기 | $대상.html() //태그 내용 포함 $대상.text() //태그 내용 제외 |
노드 내용 수정하기 | $대상.html("수정할 태그 문자열") $대상.text("수정할 텍스") | |
노드 내용을 이용해 여러 개의 자식 노드 추가하 | $대상.html("추가할 태그 문자열") | |
노드 내용을 이용해 모든 자식 노드 제거하기 | $대상.html("") |
참조 - (메소드 정리표)
자바스크립트 + jQuery 완전정복 스터디(김춘경 지음)
'javascript' 카테고리의 다른 글
placeholder 제대로 사용하기 (2) | 2019.01.17 |
---|---|
jQuery란 무엇인가? jQuery 메서드 정리표 2편 (0) | 2018.11.13 |
웹퍼블리싱을 위한 JQUERY Plugin (0) | 2012.05.25 |
퍼블리셔를 위한 기본 자바스크립트 강좌(1편) (0) | 2012.04.12 |
HTML5를 활용한 드래그앤드롭 (0) | 2012.01.19 |