가희의자기개발블로그

on("click") 과 click()의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이다. on("click")은 동적으로 가능하고 click()은 최초에 선언된 element에만 동작한다. 1_click()이벤트 MENU1 MENU2 MENU3 위 코드에서 아무 li 태그에 click()이벤트를 발생시키면 $("#myTask").children().click(function(){ $(this).remove(); }); 해당 li태그가 remove()된다. 여기서 아래 소스처럼 동적으로 새로운 li태그를 추가한 뒤 click()메소드를 실행하면 동작하지 않는다. 왜냐하면 click()이벤트는 최초에 페이지를 로딩할 때 선언되어 있던 element에 이벤트를 바인딩하고 나서는 더이상 동적으로 바인딩..

노드를 대량으로 추가하거나 삭제해야 하는 경우는 노드 내용을 직접 변경하는 방법을 사용한다. 01_소개 노드 내용이란? 노드 내부에 들어 있는 마크업 노드와 텍스트 노드 정보를 문자열로 표현하는 것을 의미한다. 노드 내용은 서버에 보내거나 노드를 다루기 위한 용도로 많이 사용한다. 02_노드 내용을 문자열로 읽기 $대상.html() $대상.text() 노드 내용을 알아내는 방법은 html() 메소드와 text()메서드 두 가지가 있다. 이 둘은 차이점이 있다. html() 메서드를 이용하면 특정 노드의 내부 내용을 마크업까지 확인 할 수 있다. 주의해야 할 사항이 있는데 html()메서드 결과는 자바스크립트 DOM객체가 아닌 단순한 문자열이라는 점이다. 또, 노드 내용에는 자신의 태그 저보는 포함하지 않..

01_소개 노드 삭제 방법 역시 노드 이동과 동일하게 가장 먼저 할 일은 제거할 노드를 찾는 것이다. 그 다음 노드를 제거해야 한다. 02_특정 노드 삭제 $대상.remove() 특정 노드를 삭제하고 싶은 경우 remove()메서드를 이용한다. 02_모든 자식 노드 삭제 $대상.children().remove() 자식 노드를 모두 삭제할 때에도 remove()메서드를 사용한다. 덧붙여 설명하자면 사실 remove()는 특정 노드를 삭제하는 용도이지 내부를 비우는데 사용하기에는 적합하지 않다 이 경우 실무에서는 html()을 이용한다. $("ul").html("");

01_소개 노드 이동은 노드 추가와 동일한 append() appendTo(), insertAfter() after() insertBefore() before() 메서드를 사용하며 방법 역시 거의 동일하다. 차이점이라면, 사용하는 메서드에 넘겨주는 매개변수 값이 신규 노드라면 추가가 되고 기존 노드라면 이동된다. 01_1첫번째 자식 노드로 이동 $부모노드.prepend($이동노드) $이동노드.prependTo($부모노드) 기존 노드를 특정 노드의 첫번째 자식 노드로 이동하고 싶은 경우 신규 노드 추가에서 사용한 prepend()또는 prependTo() 메서드를 이용한다. 01_2 마지막번째 자식 노드로 이동 $부모노드.append($이동노드) $이동노드.appendTo($부모노드) append()와 a..

01_노드 생성 var $신규노드=$("신규DOM"); JQuery에서 노드를 생성하는 가장 일반적인 방법은 $()함수를 이용하는 것이다. $() 함수 내부에서는 매개변수로 받은 태그 노드 정보를 파싱해 태그와 1:1대응하는 HTMLElement객체를 생성하는 작업이 일어난다. 이렇게 만들어진자바스크립트 dom객체를 좀더 쉽게 사용할 수 있는 jQuery객체를 만들어 반환해준다. 02_신규 노드를 첫 번째 자식 노드로 추가 $부모노드.prepend($추가노드) $추가노드.prependTo($부모노드) 신규 노드를 특정 노드의 첫 번째 자식 노드로 추가하는 방법은 prepend()와 prependTo() 두 가지 방법이 있다. 이 두 메서드는 사용법에서 알 수 있는 것처럼 부모 노드와 추가 노드 위치가 다..

01_소개 형제 노드란? 같은 깊이에 있는 노드를 말한다. 02_핵심내용 02_1 이전 형제 노드 찾기 $대상.prev() $대상.prevAll(["선택자"]) 특정 노드의 이전 형제 노드를 찾고 싶은 경우 prev()를 사용한다. 만약 prev()를 연속 두 번 호출하면 이전의 이전 형제 노드에 접근할 수 있다. $대상.next() $대상.nextAll(["선택자"]) next() 메서드는 prev()메서드와 반대되는 메서드로서 특정 노드의 바로 다음에 있는 현제 노드를 찾고 싶을 때 사용한다.

01_ 소개 부모 노드란? 특정 노드를 감싸고 있는 바로 위의 상위 노드를 의미한다. 또, 조상 노드느 특정 노드를 감싸고 있는 모든 노드를 의미한다. 02_ 핵심 내용 02_1 부모 노드 찾기 $대상.parent() 특정 노드의 바로 상위 노드인 부모 노드를 찾고 싶은 경우 parent()메서드를 사용한다. 02_2 조상 노드 찾기 $대상.parents(["선택자"]) 특정 노드의 모든 조상 노드를 찾고 싶은 경우 parents()메서드를 사용한다. 이때, 일반 jQuery메서드와 마찬가지로 선택자를 이용하면 특정 조상 노드만을 쉽게 찾을 수 있다.

01_소개 자식 노드란? 특정 노드의 바로 아래에 위치하고 있는 노드를 말한다. 하위 노드의 하위 노드는 자식 노드가 아니다. 02_ 핵심내용 02_1 모든 자식 노드 찾기 $대상.children() 특정 노드의 바로 하위에 위치한 모든 자식 노드를 찾고 싶을 때 children() 메서드를 사용한다. children()메서드의 결과값은 모든 자손 노드가 아니라 바로 하위에 위치하는 자식 노드만을 구한다. ※children() vs contents() 자식노드를 구하는 메서드 중에는 contents()메서드도 있다. children()은 자식 노드 중 오직 태그 노드 만을 골라 찾아준다. 1. contents()를 사용할 경우 태그 노드는 물론 텍스트 노드 등의 모든 자식 노드를 노드로 찾아준다. 02_..