자바스크립트+jQuery 완전정복 스터디 2권 (JQuery 기초와 활용)
스터디 정리
JQuery소개
1. jQuery의 기능
- DOM : jquery 핵심 기능 / 노드 찾기, 추가, 삭제, 수정 까지 노드와 관련된 모든 기능을 제공
- AJAX
- 플러그인
- 효과
2. CSS선택자
$(“*”) 모든 엘리먼트
$(“E”) 태그 이름이 E인 모든 엘리먼트
$(“E F”) E자식 노드중 태그 이름이 F인 모든 엘리먼트
$(“E.C”) 태그 이름이 E인 엘리먼트 중 C라는 클래스를 가진 모든 엘리먼트
$(“E .C”) E자식 노드중 라는 클래스 선택자를 가진 모든 엘리먼트
$(“E>F”) E 바로 아래 자식 중 태그 이름이 F인 모든 엘리먼트
3. CDN(Content Delivery Network)
콘텐츠를 여러 서버에 분산 배치해서 콘텐츠를 전송하는 과정에서 발생하는 트래픽 집중 & 병목 현상 및 데이터 손실을 해결하기 위한 기술이다.
4. DOMContentLoaded 이벤트 vs load 이벤트
Jquey의 ready() 메서드는 Document 객체에서 발생하는 DOMContentLoaded 이벤트를 포장한 메서드
DOMContentLoaded 이벤트는 웹 브라우저가 웹 페이지를 읽은 후 태그와 1:1 맵핑되는 DOM 객체를 생성한 후 발생한다. 이 이벤트가 발생한 시점에서는 이미지나 플래시 같은 무거운 콘텐츠는 아직 로드되지 않는다.
Window 객체에서 발생하는 load 이벤트는 이미지나 플래시 같이 무거운 콘텐츠가 모두 로드되고 난 후 발생한다.
노드찾기
1. 일반 노드 찾기
속성으로 노드 찾기
$(“E[A]”): 속성 A를 포함한 모든 E노드 찾기
$(“E[A=V]”): 속성 A의 값이 V인 모든 E노드 찾기
$(“E[A^=V]”): 속성 A의 값이 V로 시작하는 모든 E노드 찾기
$(“E[A$=V]”): 속성 A의 값이 V로 끝나는 모든 E노드 찾기
$(“E[A*=V]”): 속성 A의 값이 V를 포함하고 있는 모든 E노드 찾기
2. 찾은 노드 다루기
01. 찾은 노드의 개수 구하기 - $대상.length
$("div").length : div 태그의 개수
02. 찾은 노드 중 n 번째 노드 접근하기 - $대상.eq(index)
03. 자바스크립트 DOM 객체 접근하기 - $대상.get(index) or []
jquery 는 만능이 아니기 때문에 자바스크립트 dom에 직접 접근해 사용해야 할 떄가 있다.
$liList.get(1) or $liList[1]
04. 순차적으로 찾은 노드 접근하기 - $대상.each(function(index){});
04-1. each() 메서드의 실행구조
$대상에 들어있는 노드 개수만큼 매개변수 값으로 넘겨 받은 함수를 반복해서 호출한다.
index값은 each()메서드가 매개변수 값으로 넘겨 받은 함수를 호출할 때 0부터 넘겨주는 값을 의미한다.
04-2. each() 메서드에 매개변수 값으로 넘겨 사용하는 함수 내부의 this 개념
this는 $대상에 들어있는 index번째에 해당하는 자바스크립트 DOM을 의미한다.
$(this)는 this가 일반 자바스크립트 DOM 객체를 의미하기 때문에 $(this)가 실행되면 이 DOM 객체를 포장하고 있는 새로운 Jquery객체가 생성된다.
05. 찾은 노드 중에서 특정 노드만 찾기 $대상.filter("선택자")
filter 대상자가 찾은 대상은 오직 현재 찾은 노드이며 자식, 부모 노드들과 관련 없다.
$liList.filter(".select").css(....) : liList변수에 들어있는 항목중 select 클래스가 적용된 노드를 찾아 변경
06. 찾은 노드의 자손(자식포함) 노드 중 특정 노드 찾기 - $대상.find("선택자")
( 오직 바로 아래 자식 노드에서 특정 노드를 찾고 싶은 경우에는 children() 메서드 사용 )
- filter() / find() 차이점
- filter() 메서드는 현재 노드 중에서 특정 노드를 걸러내고 싶을 때 사용한다. 검색 대상에서 자식& 자손노드는 제외
- find() 메서드는 현재 노드의 자손노드 중에서 특정 노드를 찾고 싶을 떄 사용한다. 검색 대상에서 현재 노드를 제외하고 모든 자손 노드에서 찾는다. <-> childern()은 바로 다음 하위 자식 노드에서 만 찾음
07. 인덱스 값 구하기
$대상.index()
$목록.index($대상)
$목록.index(대상DOM)
<body>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</body>
<script>
$(document).ready(function(){
$(“ul li a”).click(function(){
console.log($(this).index());
}); });
</script>
<a>태그가 <li>태그에 하나씩 있는 경우, 즉 연속해서 태그가 있지 않은 경우 jquery객체.index() 메서드를 호출하면 인덱스 값이 항상 0이 나온다.
인덱스 값을 정상적으로 출력 하기 위해서는 아래 와 같이 사용해야 한다.
<script>
$(document).ready(function(){
var $aList = $(“ul li a”);
$aList.click(function(){
console.log($aList.index(this));
}); });
</script>
3. 자식 노드 찾기( 모든 자손 노드 X)
01. 모든 자식 노드 찾기 - $대상.children()
- contents() / children() 차이점
-contents() : 태그 노드 + 텍스트 노드 등 모든 자식 노드를 찾는다.
-children() : 태그 노드만 골라 찾는다.
02. 특정 자식 노드 찾기 - $대상.children("선택자")
- children("선택자") / find("선택자") 차이점
- children("선택자") : 바로 하위 자식 노드에서만 찾는다.
- find("선택자") : 모든 자손 노드에서 찾는다.
$(“div”).find(“:first”).css(“…..”) : 각 div 노드의 첫번째 자식 노드 css변경
$(“div).children(“:first”).css(“…..”) : 각 div 노드 x
03. 첫 번째 자식 노드 찾기
$대상.children().first()
$대상.children().eq(0)
$대상.children().(“:first”)
$대상.children(“:eq(0)”)
첫 번째 자식 노드를 찾는 방법은 선택자를 이용하는 방법과 선택자를 이용하는 방법 두가지로 나눌 수 있다.
- 선택자를 이용하는 방법 소스
$menu.children(“:first”).css(…..);
- 메서드를 이용하는 방법 소스
$menu.children().first().css(…..);
선택자를 이용하는 방법이 효율적인 방법이다.
메서드를 이용하는 방법은 children()메서드와 first()메서드를 두번 호출해서 처리 했기 때문이다.
04. 마지막번째 자식 노드 찾기
$대상.children().last()
$대상.children(“:last”)
$대상.children().eq($대상.children.length-1)
$대상.children(“:eq (“+($대상.children().length-1)+”)”)
$대상.children.eq(-1)
$대상.children(“:eq(-1)”)
1,2 번째 방법을 많이 사용
05. n번째 자식 노드 찾기
$대상.children().eq(index)
$대상.children(“:eq(“+index+”)”)
4. 부모 노드 찾기
01. 부모노드 찾기 - $대상.parent()
02. 조상노드 찾기 - $대상.parents([“선택자”])
$menu.parents(“.page”).css(“…..);
5. 형제 노드 찾기
01. 이전형제 노드 찾기 - $대상.prev() / $대상.prevAll([“선택자”])
02. 다음 형제 노드 찾기 - $대상.next() / $대상.nextAll([“선택자”])
'개발 > javascript&jquery' 카테고리의 다른 글
| [jQuery] 위치/크기 관련 기능 다루기 (0) | 2020.01.28 |
|---|---|
| [jQuery] mouseover, mouseenter 차이점 (0) | 2020.01.23 |
| [jQuery] 이벤트 다루기 (0) | 2020.01.23 |
| [jQuery] 노드 생성, 추가, 삭제, 이동 / 스타일 다루기 / 속성 다루기 (0) | 2020.01.22 |
| [jQuery] Dom&Node 관계 / Dom객체 (0) | 2019.12.31 |