목록프론트엔드/JavaScript+JQuery (33)
가희의자기개발블로그
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_..
01_소개 여기서 찾은 노드란? 다음과 같이 jQuery 메서드를 활용해 구해 놓은 노드를 말한다. var $divs = $("div"); var $items = $(".menu li"); 위의 구문을 실행하면 $divs와 $items에는 각각 선택자에 해당하는 노드가 담겨 있을 것이다. 이때 담겨 있는 노드의 개수라든지 또는 담겨 있는 노드 중 특정 노드만을 걸러내야 하는 작업을 하게 된다. 02_핵심 내용 02_1 찾은 노드의 개수 구하기 $대상.length jQuery의 length 프로퍼티를 이용하면 jQuery 객체 내부에 들어있는 노드 개수를 구할 수 있다. 02_2 찾은 노드 중 n번째 노드 접근하기 $대상.eq(index) jQuery dml eq()메서드를 이용해면 찾은 노드의 n번째에 ..
01_ $() 의 의미 jQuery에서 가장 많이 사용하는 기능은 $()이다. $("div").css("border","4px solid #f00"); 은 div의 태그에 border속성을 4px solid빨강으로 준것이다. 여기서 $는 함수 그자체 이다. $()는 함수를 호출한 것이다. jQuery 라이브러리 내부를 살펴보면 다음과 같다 window.jQuery = window.$ = jQuery; jQuery함수와 동일하며 jQuery 함수를 좀더 쉽게 사용하기 위한 일종의 단축이름이다. 02_ $() 함수의 리턴값 $("div").css("border","4px solid #f00"); 위의 코드에서 점(.)은 특정 객체에서 제공하는 기능에 접근할 때 사용한 접근 연산자이다. 그리고 css()는 이..
01_ jQuery 라이브러리 삽입 일반 자바스크립트 라이브러리처럼 jQuery 역시 웹 페이지에 라이브러리를 먼저 삽입해야 한다. 두가지 방법이 있다. 1_1_ CDN(Content Deliverty Network)에 올려져 있는 jQuery 파일을 이용하는 방법 CDN이란 콘텐츠를 여러 서버에 분산 배치해서 콘텐츠를 전송하는 과정에서 발생하는 트래핑 집중 & 병목 현상 및 데이터 손실을 해결하기 위한 기술이다. 이러한 목적으로 JQuery 파일도 아래 CDN에 올려져 있는데 , 이 파일을 웹 페이지에 삽입하는 방법이다. 1_2 파일을 다운로드해 이용하는 방법 JQuery 홈페이지에서 최신파일을 내려 받아 다음과 같이 링크를 웹 페이지에 삽입하는 방법 02_진입점인 ready() 메서드 삽입 대부분의 ..