티스토리 뷰
DOM TREE
이동 메소드
.parent( ) : 해당 요소 위에 있는 요소 선택
$('p').parent() //body
.children( ) : 해당 요소 아래에 있는 요소 선택
$('ul').children() //li
.prev( ) : 해당 요소 왼쪽에 있는 형제 요소 선택
$('p').prev() //h1
.next( ) : 해동 요소 오른쪽에 있는 형제 요서 선택
$('title').next() //meta
메소드 체인 사용
- 더 높이, 더 낮게, 더 깊이 이동할 때 사용
- 더 효율적으로 이동하고 수정 가능
- 메소드를 추가하너가 여러개를 조합하여 사용 가능
$('a').parent().parent() //body$('title').parent().next(.parent() //html
요소 제거 메소드
.detach( ) : 선택한 요소를 DOM에서 제거하긴 하지만, 요소를 기억하고 있기 때문에 나중에 다시 삽입 가능
.remove( ) : DOM에서 요소를 완전히 제거
요소 대체 메소드
1 : 1 대체
.replaceWith( ) : 선택한 요소를 다른 요소 바꿀 수 있음
$('h2').replaceWith('<h1>My Menu</h1>');-> 위와 같을 때, <h2>의 모든 요소를 <h1>My Menu</h1>로 바꾼다는 뜻
다 : 1 대체
.before( ) : 선택한 요소 앞에 내용 삽입
.after( ) : 선택한 요소 뒤에 내용 삽입
필터 메소드
.first( ) : 선택한 요소 집합에서 첫 번째 요소만 남김
.eq( ) : 선택한 요소 중에서 인덱스 번호가 괄호 안의 숫자와 일치하는 요소만 남김
.last( ) : 선택한 요소 중에서 마지막 요소만 남김
<ul class="list">
<li class="a">aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
<li>ddddd</li>
</ul>$('.list').children().first(); //aaaaa$('.list').children().last(); //ddddd$('.list').children().eq(0); //aaaaa
$('.list').children().eq(1); //bbbbb
$('.list').children().eq(2); //ccccc
$('.list').children().eq(3); //ddddd
.slice( ) : 괄호 안에 지장한 두 인덱스 사이에 있는 요소만 남기고 나머지는 모두 버림
.filter( ) : 괄호 안에 지정한 선택자와 일치하는 요소만 남기고 나머지는 모두 버림
.not( ) : 선택자와 일치하는 요소는 버리고 나머지는 남김
<body>
<ul class="list">
<li class="a">aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
<li>ddddd</li>
<ul class="another list">
<li class="num">11111</li>
<li class="num">22222</li>
<li>33333</li>
</ul>
</ul>
</body>
$('.list').children().slice(1,3); //bbbbb, ccccc
//두번째와 세번째 li 요소만 남기고 버림$('.another').parents().filter(".list") //<ul class="list">, <ul class="ul list">,$('ul.another.list').children().not(".num") //33333
'FRONT-END > JQUERY' 카테고리의 다른 글
| [JQUERY] WINDOW 객체 (0) | 2019.02.05 |
|---|---|
| [JQUERY] 내장 이펙트 (0) | 2019.02.01 |
| [JQUERY] EVENT (0) | 2019.01.28 |
| [JQUERY] GRAMMER - 문법 (0) | 2019.01.24 |
| [JQUERY] 애니메이션 효과 (0) | 2019.01.24 |