JQuery 부모 노드 찾기 - jQuery bumo nodeu chajgi

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("새로운 텍스트")

출처 : http://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([“선택자”])