1. 노드 찾기
- 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자")
- 클래스 이름으로 노드 찾기 : $(".클래스이름")
- ID로 노드 찾기 : $("선택자")
- 속성으로 노드 찾기 : $("[속성이름=값]")
- 찾은 요소 개수 구하기 : .size() , .length
- 찾은 요소 n번째 접근하기 :
.eq(index) , .each(function(index){});
- 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")
- 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자")
2. 자식 노드 찾기
- 전체 자식 노드 찾기
-- 텍스트 노드 포함 전체 자식 노드 찾기 : $("선택자").contents()
-- 텍스트 노드 제외한 전체 자식 노드 찾기 :
$("선택자").children("선택자")
- n번째 자식 노드 접근
-- $("선택자").children().eq(N)
-- $("선택자").children(":eq(N)")
- 첫번째 자식 노드 접근
-- $("선택자").children().first()
-- $("선택자").children(":first")
--
$("선택자").children().eq(0)
-- $("선택자").children(":eq(0)")
- 마지막 자식 노드 접근
-- $("선택자").children().last()
-- $("선택자").children(":last")
3. 부모 노드 찾기
- 바로 위의 부모 :
$("선택자").parent()
- 모든 부모 찾기
-- $("선택자").parents() 모든 부모
- 모든 부모 중 선택자에 해당하는 부모 찾기
-- $("선택자").parents("선택자")
4. 형제 노드 찾기
- 이전 형제 노드
찾기
-- $("선택자").prev()
-- $("선택자").prevAll("선택자");
- 다음 형제 노드 찾기
-- $("선택자").next()
-- $("선택자").nextAll("선택자");
5. 노드 생성,추가,이동,삭제
- 생성
--
$("노드")
-- $("선택자").html("<노드>...</노드>")
-- $("노드").clone()
- 추가
-- $기준노드.append($추가노드)
-- $추가노드.appendTo($기준노드)
-- $기준노드.prepend($추가노드)
--
$추가노드.prependTo($기준노드)
-- $추가노드.insertBefore($기준노드)
-- $기준노드.before($추가노드)
-- $추가노드.insertAfter($기준노드)
-- $기준노드.after($추가노드)
- 삭제
-- $("선택자").remove()
- 이동
--
$기준노드.append($이동노드)
-- $이동노드.appendTo($기준노드)
-- $이동노드.insertBefore($기준노드)
-- $기준노드.before($이동노드)
-- $이동노드.insertAfter($기준노드)
-- $기준노드.after($이동노드)
6. 텍스트 노드 다루기
- 텍스트 노드 생성 : $("텍스트")
- 텍스트 노드 추가 : $기준노드.append("텍스트")
- 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")
출처 : //survival.egloos.com/464374
자바스크립트+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([“선택자”])