이 글은 본 강의 (http://osam.kr/learn/lecture/14812/%EC%BA%A0%ED%94%84%EC%97%B0%EA%B3%84%EA%B3%BC%EC%A0%95-web-%EB%B6%84%EC%95%BC) 를 참고하여 작성하였습니다.
jQuery: The Write Less, Do More, JavaScript Library.
1) jQuery 란?
jQuery는 자바스크립트 DOM을 더 간단하게 다루도록 도와주는 라이브러리의 일종이다.
자바스크립트 DOM(Document Object Model)이란 노드 추가, 삭제, 이동, 스타일 변경, 속성 변경, 이벤트 처리 등의 기능을 하는 코어 라이브러리인데, 쉽게 말해 문서 내의 모든 요소들을 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
이 DOM은 브라우저마다 구조가 다르다. IE, Chrome, Safari, Opera, Firefox.... 이 외에 지금은 사장된 수 많은 브라우저들은 저마다의 DOM 구조를 갖고 있었는데, 이 구조들을 브라우저에 따라 하나하나 처리해 줄 필요 없이 jQuery 만 있으면 쉽고 간단하게 DOM을 조작할 수가 있다. 지금이야 주로 쓰이는 브라우저는 Chrome이고, 그 뒤로 Firefox 정도가 뒤를 잇고 있지만 그 격차는 현저히 크지만 jQuery가 나올 그 당시에는 그야말로 혁신적인 라이브러리였다.
지금에서 새로 배우는 입장에서 jQuery를 공부하는 것이 과연 트렌드에 맞는 일인지 생각하는 것은 나중으로 미루고, 여전히 많은 사람들이 사용하고, 확실히 간편한 라이브러리라는 점은 부정할 수 없으니 배운 내용을 정리해보았다.
2) jQuery 사용법
jQuery를 사용하기 위해서는 사전 준비가 필요하다. 여타 라이브러리처럼 링크를 연결해주어야 한다.
CDN을 이용하는 경우) <head></head> 부분에 아래 코드 추가
|
1
|
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
cs |
다운받아 사용하는 경우) <head></head> 부분에 아래 코드 추가
|
1
|
<script src="../libs/jquery-1.11.0.min.js"></script>
|
cs |
* 숫자부분은 jQuery의 버젼이니 자신이 사용할 버젼으로 바꾸어 넣으면 되고, 다운받아 사용하는 경우엔 링크부분에 파일이 있는 곳의 경로를 적어주면 된다.
다음으로는 ready() 메서드를 사용해 로딩이 완료되었을때 jQuery를 사용하도록 코드를 작성해준다.
1 2 3 4 5 6 7 8 9 | <script type="text/javascript"> $(document).ready(function() { alert("Hello, jQuery!"); } </script> | cs |
3) 자주 사용하는 메소드 정리
아래는 자주 사용하는 메소드들이다. 틈날때, 모르는게 있을때 보면서 익히기로 했다.
| 1. 일반 노드 찾기 | |
| 태그 이름으로 찾기 | $("태그 이름") |
| 클래스 이름으로 찾기 | $(".클래스 이름") |
| ID로 노드 찾기 | $("#선택자") |
| 속성으로 노드 찾기 | $("[속성이름=값]") |
| 찾은 요소 개수 구하기 | .size() 또는 .length |
| 찾은 요소 n번째 구하기 | .eq(index) |
| 찾은 요소에서 0번째~n번째 루프 돌기 | .each(function(index) { ... }); |
| 찾은 요소에서 특정요소만 걸러내기 | .filter("선택자") |
| 찾은 요소의 특정 자식요소만 찾기 | .find("선택자") |
| 2. 자식 노드 찾기 | |
| 전체 자식노드 찾기 (텍스트 노드 제외) | $("선택자").children() |
| 전체 자식노드 찾기 (텍스트 노드 포함) | $("선택자").contents() |
| n번째 자식노드 접근 | $("선택자").children().eq(n) |
| 첫번째 자식노드 접근 | $("선택자").children().first() |
| 마지막 자식노드 접근 | $("선택자").children().last() |
| 3. 부모 노드 찾기 | |
| 부모 노드 찾기 (바로 위) | $("선택자").parent() |
| 조상 노드 찾기 | $("선택자").parents() |
| 4. 형제 노드 찾기 | |
| 이전 형제 노드 찾기 | $("선택자").prev() |
| 다음 형제 노드 찾기 | $("선택자").next() |
| 5. 노드 생성 / 추가 / 이동 / 삭제 | |
| 노드 생성 | $("<노드> ... </노드>") |
| 노드 복사 | $("선택자").clone(); |
| 노드 추가 | $기준노드.append($추가노드) = $추가노드.appendTo($기준노드) |
| 노드 삭제 | $("선택자").remove() |
| 노드 이동시키기 | $기준노드.append($이동노드) = $이동노드.appendTo($기준노드) |
| 6. 텍스트 노드 | |
| 텍스트 노드 생성 | $("텍스트") |
| 텍스트 노드 추가 | $기준노드.append("텍스트") |
| 텍스트 노드 변경 | $기준노드.text("새로운 텍스트") |
| 7. 스타일 다루기 | |
| 스타일 속성값 구하기 | $("선택자").css("스타일 속성") |
| 스타일 속성값 설정하기 | $("선택자").css("스타일 속성", "값") |
| 8. 속성 다루기 | |
| 속성값 구하기 | $("선택자").attr("속성이름") |
| 속성값 설정하기 | $("선택자").attr("속성이름", "속성값") |
| 속성 제거하기 | $("선택자").removeAttr("속성이름") |
| 9. 이벤트 다루기 | |
| 이벤트 리스너 추가하기 | $("선택자").on("이벤트 이름", 이벤트 리스너) |
| 이벤트 리스너 삭제하기 | $("선택자").off("이벤트 이름", 이벤트 리스너) |
'이론 > Frontend' 카테고리의 다른 글
| 싱글 쓰레드 Javascript의 비동기적 동작 (0) | 2020.09.07 |
|---|---|
| React에서 PC/모바일 각각 라우팅하기 (0) | 2020.07.16 |
| React에서의 proptypes validation (0) | 2020.07.02 |
| React 프로젝트 gh-pages 배포시 git-upload-pack: command not found 오류 (2) | 2020.06.26 |
| 짝수만 출력하는 다양한 방법 (0) | 2020.06.23 |
댓글