자바스크립트의 문서 객체 모델(DOM, Document Object Model)은 브라우저 간 호환성이 떨어져 크로스 브라우징이 힘들다는 단점이 있다.
제이쿼리 문서 객체 모델은 이러한 문제를 해결할 수 있다.
제이쿼리란
- 제이쿼리 모질라 사의 자바스크립트 개발자였던 존 레식(Jhon Resig)이 자바스크립트를 이용해 만든 라이브러리 언어이다.
- 제이쿼리는 다양한 함수들을 사용자에게 제공함으로써 자바스크립트에서 사용할 때 불편했던 몇 가지 점들을 간편하게 사용할 수 있도록 개선함.\
1. 호환성 문제 해결
- 자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체(Event Object)는 호환성(크로스 브라우징)이 떨어진다는 단점이 있다. 예를 들면 인접 요소 선택자 중 다음 요소 선택자(nextSibiling)는 IE 8 이하의 브라우저에서 문서 객체를 선택했을 때와 다른 브라우저에서 문서 객체를 선택했을 때의 결과가 다르다. 이런 문서 객체 선택자의 호환성 문제가 제이쿼리에서는 모두 해결됨.
2. 쉽고 편리한 애니메이션 효과 기능 구현
- 자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 하기 때문에 개발에 많은 시간이 필요했지만 제이쿼리는 애니메이션과 다양한 효과(Effect)를 지원하는 메서드를 제공하기 때문에 개발 시간을 많이 단축할 수 있다.
제이쿼리 라이브러리 연동하기
- 제이쿼리를 연동하는 방법
1. 다운로드 방식
- 제이쿼리 라이브러리를 제공하는 사이트에서 제이쿼리 라이브러리 파일을 직접 내려받아 HTML에
불러오는 방식
2. 네트워크 전송 방식
- 온라인에서 제공하는 제이쿼리 라이브러리 파일을 네트워크를 통해 HTML에 불러오는 방식
두 방식의 차이점
다운로드 방식은 네트워크 상태와 상관없이 언제든 개발할 수 있다는 장점이 있으나 컴퓨터에 라이브러리 파일을 내려받아야 한다. 간단히 테스트할 목적이라면 간편하게 연동할 수 있는 네트우크 전송방식을 추천
-- 추후 다시 작성
선택자
- 선택자는 HTML 요소를 선택하여 가져옴
- 제이쿼리 선택자는 CSS 선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. 이때 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 CSS는 '정적이다.'라고 표현한다.
제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있다.
선택자를 좀 더 정확하고 깊이 있게 공부하려면 문서 객체 모델에 대해 알아두는 것이 좋다
문서 객체 모델
- 문서 객체 모델(DOM Object Model)이란 HTML 문서 객체 구조를 말한다
- 문서의 기본 객체 구조는 최상위 객체인 <html>이 있고 하위 객체로 <head>, <body>가 있다
<body> 태그는 문단 태그, 테이블 태그, 폼 태그 등을 포함할 수 있고 이때 문서 객체 모델에서는 모든 모든 태그를 객체라고 불며, 태그에는 기능과 속성이 포함되어 있다.
예를들어 <img> 태그는 이미지를 출력하는 기능이 있고, src, alt, width, height와 같은 속성을 포함하고 있다.
HTML의 문서 객체 구조를 그림으로 표현하면 트리구조가 된다.
가장 상위에 위치하는 <html>은 뿌리(Root)라고 부르고, 뿌리로부터 가지처럼 뻗어나가는 모양의 요소를 노드(Node)라고 부른다.
노드의 종류에는 요소 노드(Element Node), 텍스트 노드(Text Node), 속성노드(Attribute Node)가 있다.
선택자 사용하기
- 선택자를 사용하기 위해서는 문서 객체를 부러와야 한다.
기본형
1. 선택한 요소에 지정한 스타일을 적용
$("CSS 선택자").css("스타일 속성명", "값");
2. 선택한 요소에 지정한 속성을 적용
$("CSS 선택자").attr("속성명", "값");
기본 선택자
| 구분 | 종류 | 사용법 | 설명 |
|
직접 선택자 |
전체 선택자 | $("*") | 모든 요소를 선택 |
| 아이디 선택자 | $("#아이디명") | id 속성에 지정한 값을 가진 요소를 선택 | |
| 클래스 선택자 | $(".클래스명") | class 속성에 지정한 값을 가진 요소를 선택 | |
| 요소 선택자 | $("요소명") | 지정한 요소명과 일치하는 요소들만 선택 | |
| 그룹 선택자 | $("선택1, 선택2, 선택3, ... 선택n") | 선택1, 선택2, 선택3, ... 선택n에 지정된 요소들을 한 번에 선택 | |
| 종속 선택자 | $("p.txt_1"), $("p#txt_1") | <p> 요소 중 class 값이 txt_1인 요소 또는 id 값이 txt_1인 요소를 선택 | |
| 인접 관계 선택자 | 부모 요소 선택자 | $("요소 선택").parent() | 선택한 요소의 부모 요소를 선택 |
| 상위 요소 선택자 | $("요소 선택").parents() | 선택한 요소의 상위 요소를 모두 선택 | |
| 가장 가까운 상위 요소 선택자 | $("요소 선택").closest("div") | 선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택 | |
| 하위 요소 선택자 | $("요소 선택 하위 요소") | 선택한 요소에 지정한 하위 요소를 선택 | |
| 자식 요소 선택자 | $("요소 선택 > 자식 요소") | 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택 | |
| 자식 요소들 선택자 | $("요소 선택").children() | 선택한 요소의 모든 자식 요소를 선택 | |
| 형(이전) 요소 선택자 | $("요소 선택").prev() | 선택한 요소의 바로 이전 요소를 선택 | |
| 형(이전) 요소들 선택자 | $("요소 선택").prevAll() | 선택한 요소의 이전 요소 모두를 선택 | |
| 지정 형(이전) 요소들 선택자 | $("요소 선택").preUntil("요소명") | 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택 | |
| 동생(다음) 요소 선택자 | $("요소 선택").next(), $("요소 선택 + 다음 요소") | 선택한 요소의 다음 요소를 선택 | |
| 동생(다음) 요소들 선택자 | $("요소 선택").nextAll() | 선택한 요소의 다음 요소 모두를 선택 | |
| 지정 동생(다음) 요소들 선택자 | $("요소 선택").nextUntil("h2") | 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택 | |
| 전체 형제 요소 선택자 | $(".box_1").siblings() | class 값이 box_1인 요소의 형제 요소 전체를 선택 |
직접 선택자
- 직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자
- 종류 : 전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,)
* 체이닝 기법
- 선택한 요소에는 메서드를 연속해서 사용할 수 있는데, 이를 마치 체인이 엮인 모양과 같다고 하여 '체이닝 기법'이라고 한다.
- 제이쿼리에서는 한 객체에 다양한 메서드를 줄줄이 이어서 사용할 수 있다 메서드 사용이 완료되면 문장 마지막에는 세미콜론(;)을 작성하여 마무리한다.
- 선택한 요소의 CSS 메서드를 연속해서 2회 적용
$(요소 선택).css(속성1, 값1).css(속성2, 값2).css(속성3, 값3);
$(function(){
$("#tit").css("background-color", "#ff0")
.css("border", "2px solid #f00");
});인접 관계 선택자
- 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는(이전과 다음 요소) 요소를 선택할 때 사용
- 인접 관계 선택자를 자유자재로 사용하려면 문서 객체 구조와 관계를 잘 이해하고 있어야 한다ㅏ.
<body>
<div id = "wrap"> --------------- ⓐ a는 c의 상위(dosest)요소
<div id = 'inner_wrap'> --------- ⓑ c는 a의 하위 요소
|--- <h1>제목</h1> ---------------- ⓓ b는 c의 부모(parant) 요소
ⓒ ---| <h2>제목</h2> ---------------- ⓔ c는 b의 자식(children) 요소
|--- <p>내용1</p> ---------------- ⓕ d는 e의 형(prev) 요소
</div> f는 e의 동생(nexy) 요소
</div>
</body>
$("h2").next().css("color","green");
$("h2").parent().css("border","1px solid #f00");제이쿼리 탐색 선택자
- 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다.
- 위치 탐색 선택자 : 배열의 인덱스를 사용해 선택
- 속성 탐색 선택자 : 배열에 담겨진 요소 중 지정된 속성과 값으로 선택
위치 탐색 선택자
| 종류 | 사용법 | 설명 |
|
$("요소 선택 : first") $("요소 선택").first() |
$("li : first") $("li").first() |
전체 <li> 요소 중 첫 번째 요소만 선택 |
|
$("요소 선택 : last") $("요소 선택").last() |
$("li : last") $("li").last() |
전체 <li> 요소 중 마지막 요소만 선택 |
| $("요소 선택 : odd") | $("li : odd") | <li> 요소 무리 중 짝수 번째(홀수 인덱스) 요소만 선택 |
| $("요소 선택 : even") | $("li : even") | <li> 요소 무리 중 홀수 번째(짝수 인덱스) 요소만 선택 |
| $("요소 선택 : first-of-type") | $("li : first-of-type") | <li> 요소 무리 중 첫 번째 요소만 선택 |
| $("요소 선택 : last-of-type") | $("li : last-of-type") | <li> 요소 무리 중 마지막 요소만 선택 |
| $("요소 선택 : nth-child(숫자)") | $("li : nth-child(3)") | <li> 요소 무리 중 세 번째 요소만 선택 |
| $("요소 선택 : nth-child(숫자n)") | $("li : nth-child(3n)") | <li> 요소 무리 중 3의 배수 번째에 있는 요소만 선택 |
| $("요소 선택 : nth-last-of-type(숫자)") | $("li : nth-last-of-type(2)") | <li> 요소 무리 중 마지막 위치로부터 두 번째에 있는 요소만 선택 |
| $("요소 선택 : only-child") | $("li : only-child") | 부모 요소 내에 <li> 요소가 1개뿐인 <li> 요소만 선택 |
|
$("요소 선택 : eq(index)") $("요소 선택").eq(index) |
$("li : eq(2)") $("li").eq(2) |
<li> 요소 중 인덱스 2가 참조하는 요소를 불러옴 |
| $("요소 선택 : gt(index)") | $("li : gt(1)") | <li> 요소 중 인덱스 1보다 큰 인덱스가 참조하는 요소를 불러옴 |
| $("요소 선택 : lt(index)") | $("li : lt(1)") | <li> 요소 중 인덱스 1보다 작은 인덱스가 참조하는 요소를 불러옴 |
| $("요소 선택").slice(index) | $("li").slice(index) | <li> 요소 중 인덱스 2부터 참조하는 요소를 불러옴 |
제이쿼리 배열 관련 메서드
배열 관련 메서드의 종류
| 종류 | 사용법 | 설명 |
| each() / $.each() |
$("요소 선택").each(function) $.each($("요소 선택"), function) |
배열에 저장된 문서 객체만큼 메서드가 반복 실행된다. 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구한다. |
| $.map() | $.map(Array, function) | 배열에 저장된 데이터의 수만큼 메서드가 반복 실행된다 함수에서 반환된 데이터는 새 배열에 순서대로 저장된다. 새로 저장된 배열 객체를 반환 |
| $.grep() | $.grep(Array, function) | 배열에 저장된 데이터 수만큼 메서드가 반복 실행 됨. 반화값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배열을 반환한다. |
| $.inArray() | $.inArray(data, Array, start index) | 배열 안에서 데이터를 찾는다. 데이터를 찾으면 가장 맨 앞 데이터의 인덱스를 반환하고, 찾지 못하면 -1을 반환한다 start index의 값을 지정하면 해당 위치부터 데이터를 찾는다. |
| $.isArray() | $.isArray(object) | 입력한 객체가 배열 객체라면 true를, 아니면 false를 반환 |
| $.merge() | $.merge(Array1, Array2) | 인자값으로 입력한 2개의 배열 객체르 하나로 그룹화 |
| index() | $("요소 선택").index("지정 요소 선택") | 선택자로 요소를 먼저 선택, 그런 다음 지정한 요소의 인덱스 정보를 가져옴 |
속성 탐색 선택자
- 속성 탐색 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자
ex) 선택자 이미지(img) 요소 중 경로(src)가 [images/logo.gif]와 일치하는 이미지 요소만 선택하고자 할 때 사용한다.
속성 탐색 선택자의 종류
| 종류 | 사용법 | 설명 |
| $("요소 선택[속성]") | $("li[title]") | <li> 요소 중 title 속성이 포함된 요소만 선택 |
| $("요소 선택[속성=값]") | $("li[title='리스트']") | <li> 요소 중 title 속성값이 '리스트'인 요소만 선택 |
| $("요소 선택[속성^=텍스트]") | $("a[href^='http://']") | <li> 요소 중 href 속상값이 'http://'로 시작하는 요소만 선택 |
| $("요소 선택[속성$=텍스트]") | $("a[href$=http://]") | <li> 요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택 |
| $("요소 선택[href*=텍스트]") | $("a[href*='easyspub']") | <li> 요소 중 href 속성값 중에서 'easyspub'을 포함하는 요소만 선택 |
| $("요소 선택:hidden") | $("li : hidden") | <li> 요소 중 숨겨져 있는 요소만 선택 |
| $("요소 선택:visible") | $("li : visible") | <li> 요소 중 보이는 요소만 선택 |
| $(":text") | $(":text") | <input> 요소 중 type 속성값이 "text"인 요소만 선택 |
| $(":selected") | $(":selected") | selected 속성이 적용된 요서만 선택 |
| $(":checked") | $(":checked") | checked 속성이 적용된 요소만 선택 |
속성과 값에 따른 탐색 선택자
기본형
1. $("요소 선택[속성]") --- 선택한 요소 중 지정한 속성이 포함된 요소만 선택
2. $("요소 선택[속성^=값]") --- 선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택
3. $("요소 선택[속성$=값]") --- 선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택
4. $("요소 선택[속성*=값]") --- 선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택
5. $(":type 속성값]") --- input 요소 중 type 속성값이 일치하는 요소만 선택
속성 상태에 따른 탐색 선택자
기본형
$("요소 선택 : [visible | hidden]") --- 선택한 요소 중 숨겨진 상태 또는 보이는 상태의 요소만 선택
$(":selected") --- 선택 상자 중 현재 선택된 옵션 요소만 선택
$(":checked") --- 체크박스(checkbox) 또는 라디오(radio) 버튼 요소 중 체크된 요소만 선택그 외의 선택자 - 콘텐츠 탐색 선택자
- 콘텐츠 탐색 선택자는 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자
| 종류 | 사용법 | 설명 |
| $("요소 선택:contains(텍스트)") | $(li:contains("내용2")) | <li> 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택 |
| $("요소 선택").contents() | $("p").contents() | 선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택 |
|
$("요소 선택:has(요소명)") $("요소 선택").has(요소명) |
$("li:has('span')") $("li").has('span') |
<li> 요소 중 <span>을 포함하는 요소만 선택 |
|
$("요소 선택 :not(:제외 요소)'") $("요소 선택").not(:제외 요소) |
$("li:not(:first)") $("li").not(:first) |
<li> 요소 중 첫 번째 요소만 제외하고 선택 |
| $(요소 선택).filter(필터 요소) | $("li").filter(".list2") | <li> 요소 중 class 값이 "list2"인 요소만 선택 |
| $(요소 선택1).find(요소 선택2) | $("li").find("strong") | <li> 요소의 하위 요소인 <strong>만 선택 |
| $("요소 선택1").closest("요소 선택2)" | $("strong").closest("div") | <strong>을 감싸는 상위 <div> 요소 중 가장 가까운 상위 요소를 선택 |
| end() | $("li").children("a").end() | 필터링이 실행되기 이전의 요소인 <li>가 선택 됨 |
선택자와 함께 알아두면 유요한 메서드
메서드 종류
| 종류 | 사용법 | 설명 |
| is("요소 상태") | $(".txt1").is(".visible") | 선택한 요소가 보이면 true를 반환 |
| $.noConflict() |
var 변수 = $.noConflict(); 변수("요소 선택") |
$.noConflict() 함수를 이용하면 현재 제이쿼리에서 사용 중인 $ 메서드 사용을 중단하고 새로 지정한 변수명 메서드를 사용 |
| get() | $("요소 선택").get(0).style.color = "#f00" | 선택자에 get(0)을 적용하면 자바스크립트 DOM 방식의 스타일을 사용할 수 있다. |
* 제이쿼리로 선택한 요소는 자바스크립트 DOM 방식의 스타일을 사용할 수 없다.
객체 조작 메서드
- 객체를 생성, 복제, 삭제, 속성 변환하는 객체 조작 메서드
- 속성 조작 메서드와 수치 조작 메서드, 객체 편집 메서드가 있다.
종류
- 속성 조작 메서드 : 요소의 속성을 바꿀 때 사용
- 수치 조작 메서드 : 요소의 너빗값 또는 높잇값 같은 수치를 바꿀때 사용
- 객체 편집 메서드 : 객체를 생성하거나 삭제 또는 복제할 때 사용
* 속성조작 메서드와 수치조작 메서드는 선택한 요소의 속성을 바꾸는 메서드 이므로 성격이 비슷하다고 볼 수 있다.
속성 조작 메서드
| 종류 | 사용법 | 설명 |
|
html() html("새 요소") |
$("요소 선택").html(); $("요소 선택").html("새 요소"); |
선택한 요소의 하위요소를 가져옴 선택한 요소의 하위 요소를 모두 제거하고, 그 위에 지정한 새 요소를 생성 |
|
text() text("새 텍스트") |
$("요소 선택").text(); $("요소 선택").text("새 텍스트"); |
선택한 요소가 감싸는 모든 텍스트를 가져옴 선택한 요소의 하위 요소를 모두 제거하고 그 위에 지정한 새 텍스트를 생성 |
|
attr("속성명") attr("속성명","새 값") |
$("요소 선택").attr("속성명"); $("요소 선택").attr("속성명", "새 값"): |
선택한 요소의 지정한 속성(attribute)값을 가져옴 요소를 선택하여 지정한 속성에 새 값을 적용 |
| removeAttr("속성명") | $("요소 선택").removeAttr("속성명"); | 선택한 요소의 지정한 속성만 제거 |
|
prop("상태 속성명") prop("상태 속성명", 새 값) |
$("요소 선택").prop("상태 속성명"); $("요소 선택").prop("상태 속성명", "새 값"); |
선택한 요소의 상태 속성값을 가져옴 요소를 선택하여 상태 속성에 새 값을 적용 |
|
val() val("새 값") |
$("요소 선택").val(); $("요소 선택").val("새 값"); |
선택한 폼 요소의 value 값을 가져옴 폼 요소를 선택하여 value 속성에 새 값을 적용 |
|
css("속성명") css("속성명", "새 값") |
$("요소 선택").("속성명"); $("요소 선택").("속성명", "새 값"); |
선택한 요소의 지정한 스타일(CSS) 속성값을 가져옴 요소를 선택하여 지정한 스타일(CSS) 속성에 새 값을 적용 |
| addClass("class 값") | $("요소 선택").addClass("class 값") | 선택한 요소의 class 속성에 새 값을 추가 |
| removeClass("class 값") | $("요소 선택").removeClass("class 값") | 선택한 요소의 class속성에서 지정한 값만 제거 |
| toggleClass("class 값") | $("요소 선택").toggleClass("class 값") | 선택한 요소의 class값에 지정한 값이 포함되어 있으면 제거하고 속성값이 없으면 추가 |
| hasClass("class 값") | $("요소 선택").hasClass("class 값") | 선택한 요소의 class 값에 지정한 클래스 값이 포함되어 있으면 true, 없으면 false를 반환 |
수치 조작 메서드
| 종류 | 사용법 | 설명 |
| height() |
$("요소 선택").height(); $("요소 선택").height(100); |
안쪽 여백과 선을 제외한 높잇값을 반화하거나 변환 |
| width() |
$("요소 선택").width(); $("요소 선택").width(100); |
안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환 |
| innerHeight() |
$("요소 선택").innerHeight(); $("요소 선택").innerHeight(300); |
안쪽 여백을 포함한 높잇값을 반환하거나 변환 |
| innserWidth() |
$("요소 선택").innerWidth(); $("요소 선택").innerWidth(100); |
안쪽 여백을 포함한 너빗값을 반환하거나 변환 |
| outerHeight() |
$("요소 선택").outerHeight(); $("요소 선택").outerHeight(100); |
선과 안쪽 여백을 포함한 높잇값을 반환하거나 변환 |
| outerWidth() |
$("요소 선택").outerWidth(); $("요소 선택").outerWidth(100); |
선과 안쪽 여백을 포함한 너빗값을 반환하거나 변환 |
| position() |
$("요소 선택").position().left; $("요소 선택").position().top; |
선택한 요소의 포지션 위칫값을 반환 |
| offset() |
$("요소 선택").offset().left; $("요소 선택").offset().top; |
선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지에 대한 값을 반환 |
| scrollLeft() | $(window).scrollLeft(); | 브라우저의 수평 스크롤 이동 높잇값으 반환 |
| scrollTop() | $("window").scrollTop(); | 브라우저의 수직 스크롤 이동 너빗값을 반환 |
객체 편집 메서드
| 종류 | 사용법 | 설명 |
| before() | $("요소 선택").before("새 요소"); | 선택한 요소의 이전 위치에 새 요소를 추가 |
| after() | $("요소 선택").after("새 요소"); | 선택한 요소의 다음 위치에 새 요소를 추가 |
| append() | $("요소 선택").append("새 요소"); | 선택한 요소의 마지막 위치에 새 요소를 추가 |
| appendTo() | $("요소 선택").appendTo("요소 선택"); | 선택한 요소의 마지막 위치에 새 요소를 추가 |
| prepend() | $("요소 선택").prepend("새 요소"); | 선택한 요소의 맨 앞 위치에 새 요소를 추가 |
| prependTo() | $("요소 선택").prependTo("요소 선택") | 선택한 요소의 맨 앞 위치에 새 요소를추가 |
| insertBefore() | $("요소 선택").insertBefore("요소 선택") | 선택한 요소의 이전 위치에 새 요소를 추가 |
| insertAfter() | $("요소 선택").insertAfter("요소 선택"); | 선택한 요소의 다음 위치에 새 요소를 추가 |
| clone() | $("요소 선택").clone(ture of false); |
선택한 문서 객체를 복제, 이때 인자값이 true 일 경우 하위 ㅛ소까지 모두 복제하고, false일 경우에는 선택한 요소만 복제 |
| empty() | $("요소 선택").empty(); | 선택한 요소의 하위 내용들을 모두 삭제 |
| remove() | $("요소 선택").remove(); | 선택한 요소를 삭제 |
|
replaceAll()/ replaceWith() |
$("요소 선택").replaceAll("요소 선택"); $("요소 선택").replaceWith("새 요소"); |
선택한 요소들을 새 요소로 교체 |
| unwrap() | $("요소 선택").unwrap(); | 선택한 요소의 부모 요소를 삭제 |
| wrap() | $("요소 선택").wrap(새 요소); | 선택한 요소를 새 요소로 각각 감쌈 |
| wrapAll() | $("요소 선택").wrapAll(); | 선택한 요소를 새 요소로 한꺼번에 감쌈 |
| wrapInner() | $("요소 선택").wrapInner(새 요소); | 선택한 요소의 내용을 새 요소로 각각 감쌈 |
'IT 개발 > JavaScript' 카테고리의 다른 글
| 07. 제이쿼리 이벤트 (3) : 마우스 이벤트 (0) | 2020.03.15 |
|---|---|
| 07. 제이쿼리 이벤트 (1) : 이벤트 메서드 종류 및 이벤트 발생 / 제거 (0) | 2020.03.08 |
| 05. 함수 (0) | 2020.01.10 |
| 04. 객체 (0) | 2019.12.30 |
| 03. 제어문 (0) | 2019.12.22 |
