jQuery11 jQuery 요소의탐색 트리 탐색(tree traversing) 트리 탐색(tree traversing)이란 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정을 의미합니다. 이러한 트리 탐색은 다음과 같이 세 영역으로 나눌 수 있습니다. 1. 조상(ancestor) 요소 탐색 2. 형제(sibling) 요소 탐색 3. 자손(descendant) 요소 탐색 조상(ancestor) 요소의 탐색 DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드는 다음과 같습니다. 1. .parent() 2. .parents() 3. .parentsUntil() 4. .closest() .parent() 메소드 .parent() 메소드는 선택한 요.. 2020. 7. 3. jQuery 요소의조작 요소의 추가 제이쿼리는 새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메소드를 제공합니다. 기존 요소의 내부에 추가 다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있습니다. 1. .append() 2. .prepend() 3. .appendTo() 4. .prependTo() .append() 메소드 .append() 메소드는 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가합니다. 예제 $(function() { $("button").on("click", function() { $("#list").append("새로 추가된 아이템이에요!"); }); }); .prepend() 메소드 .prepend() 메소드는 선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 .. 2020. 7. 3. jQuery 요소의선택 요소의 선택 제이쿼리를 사용하면 손쉽게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 설정할 수 있습니다. 제이쿼리에서는 요소를 선택하기 위해 대부분의 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지 제공하고 있습니다. CSS 선택자를 이용한 선택 제이쿼리에서는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있습니다. 태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소를 모두 선택할 수 있습니다. 이것은 자바스크립트의 getElementsByTagName() 메소드와 같은 동작을 합니다. 예제 $(function() { $("p").on("click", function() { // 요소를 모두 선택함. $("span").css("fontSize", "28px"); // 요소를 모두 .. 2020. 7. 3. jQuery 기본 제이쿼리 문법 제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있습니다. 제이쿼리의 기본 문법은 다음과 같습니다. 문법 $(선택자).동작함수(); 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다. $() 함수 $() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 합니다. $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있습니다. 이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(jQu.. 2020. 7. 3. jQuery 기초 제이쿼리(jQuery) 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다. 제이쿼리를 배우기 위한 사전지식 제이쿼리는 자바스크립트 라이브러리이므로, 자바스크립트 언어에 대한 기초 지식이 필요합니다. 또한, HTML 요소을 선택하고, CSS 스타일을 변경하는 등 HTML과 CSS와도 많은 연관이 있습니다. 따라서 제이쿼리를 배우기 전에 여러분은 다음과 같은 기초 지식이 필요합니다. - HTML - CSS - 자바스크립트 제이쿼리(jQuery)란? 제이쿼리(.. 2020. 7. 3. 이전 1 2 다음
