jquery method

1. detach()메서드, remove()메서드

- DOM에서 요소를 제거하는 메서드
- .remove()메서드 : DOM에서 요소를 완전히 제거.
- .detach()메서드 : DOM에서 제거하긴 하지만 제거한 요소를 기억하고 있기 때문에 나중에 다시 삽입할 수 있다.

-.empty()메서드 : 요소의 내용을 지움.

2. DOM 이동 메서드

- .parent() : 해당 요소 위에 있는 요소를 선택.

- .parents() : 조상 요소를 모두 선택.

- .closest() 메서드 : 선택한 요소에서 가장 가까운 부모 요소를 선택. 매개변수에 맞는 요소를 발견하면 거기서 멈춤.

- .children() : 해당 요소 아래에 있는 요소를 선택.

- .prev() : 해당 요소 왼쪽에 있는 형제 요소를 선택

- .next() : 해당 요소 오른쪽에 있는 형제 요소를 선택.

- .siblings() : 선택한 요소와 같은 레벨에 있는 요소를 모두 선택.

3. 변수에 요소도 저장 가능.

- jQuery가 반환하는 요소를 저장할 변수에 보통 $를 붙인다. (안 붙여도 됨)

$f = $(".fish").parent().parent().detach();

4. 배열에 요소도 저장 가능.

- jQuery는 선택한 요소들을 배열 형태로 반환하기 때문.

$f = $(".fish").parent().parent().detach(); // f는 배열이 되고, $f[0], $f[1], $f[2]에 요소가 저장됨.

5. .replaceWith()

- 선택한 요소를 다른 요소로 바꿀 수 있다. 1:1 대체에 적합

$("h2").replaceWith("<h1>My Menu</h1>");

6. DOM에 HTML 콘텐츠를 삽입

- 다:1 대체에서 선택한 요소를 저장하고 있어야 할 경우를 위한 방법.

(예 : 해당 클래스 요소 다음에 바꿀 클래스 li 요소를 삽입->해당 클래스 요소를 떼어내어 변수에 저장)

- .before()메서드 : 선택한 요소 앞에 내용을 삽입

$(".meat").before("<li>Tofu</li>");

- .after()메서드 : 선택한 요소 뒤에 내용을 삽입

$(".meat").after("<li>Tofu</li>");

7. 필터 메서드

- .first()메서드 : 선택한 요소 집합에서 첫 번째 요소만 남긴다.

$(".menu_list').children().first();

- .eq()메서드 : 선택한 요소 중에서 인덱스 번호가 괄호 안의 숫자와 일치하는 요소만 남긴다.

$(".menu_list").children().eq(1);

- .last()메서드 : 선택한 요소 중에서 마지막 요소만 남긴다.

$(".menu_list").children().last();

- .slice()메서드 : 괄호 안에 지정한 두 인덱스 사이에 있는 요소만 남기고 나머지는 모두 버린다.

첫 번째 매개변수 start는 시작 지점(반드시 지정). 시작 지점이 음수이면 뒤에서부터 거꾸로 센다.
두 번째 매개변수 end(필수 아님)
=>앞은 포함하고 뒤는 불포함
$(".menu_list").children().slice(1,3); // 2,3 인덱스 요소만 남김

var a = [a,b,c,d,e];
a..slice(2,4) -> [c,d]

- .filter()메서드 : 괄호 안에 지정한 선택자와 일치하는 요소만 남기고 나머지는 모두 버린다.

$(".menu_list").parents().filter(".organic");

- .not()메서드 : 선택자와 일치하는 요소는 버리고 나머지는 남긴다.

$(".ul.menu_list.organic").children().not(".local");

8. 배열에서 요소를 찾을 때

- .find()메서드 사용.
var $my_elements = $("li");
$my_elements.find("a");


9. 어떤 요소 안에 있는 요소를 래퍼로 감쌀 때

-.wrap()메서드
$("img#oreilly).wrap("<a href='http://www.oreilly.com'></a>");