- 선택자
- JS는 이벤트 드리븐 방식으로 수행
- 그렇기 때문에 이벤트 트리거를 발생시키는 요소를 특정해야 하며 선택자의 사용이 중요
- jQuery선택자는 CSS 선택자 형식과 jQuery에서의 사용 형식으로 구성 됨
- jQuery에서의 클래스는 수도 클래스로 아래와 같음
- 대체 메서드가 있는 경우 대체 메서드 사용이 권장 됨
| jQuery선택자 | 대체 메서드 | 설명 |
|---|
| :first | .first() | 조건이 맞는 첫 번째 요소 |
| :last | .lat() | 조건이 맞는 마지막 요소 |
| :even | .even() | 조건이 맞는 짝수 번째 요소 |
| :odd | .odd() | 조건이 맞는 홀수 번째 요소 |
| :gt() | .slice() | 조건이 맞는 요소 중 매개변수 보다 큰 모든 요소 |
| :lt() | .slice() | 조건이 맞는 요소 중 매개변수 보다 작은 모든 요소 |
| :eq() | .eq() | 조건이 맞는 요소 중 매개변수에 해당하는 요소 |
| :contains() | | 매개변수로 전달되는 문자열을 포함하는 모든 요소 |
| :parent() | | 텍스트 노드를 포함하여 하나 이상의 자식 노드를 갖는 모든 요소 |
| :animated | | 애니메이션 효과를 적용중인 모든 요소 |
| :has() | | 매개변수로 전달되는 선택자 조건을 갖는 모든 요소 |
$('.btn').click(()=>{
$('li.list-group-item').removeClass('active')
})
$('li.list-group-item').first().addClass('active')
$('li.list-group-item').last().addClass('active')
$('li.list-group-item').even().addClass('active')
$('li.list-group-item').odd().addClass('active')
$(선택자).slice(start, [,end])
:gt(n) 은 slice(n+1)과 같다고 보면 됨
$('li.list-group-item').slice(0, 2).addClass('active')
$('li.list-group-item').eq(2).addClass('active')
$('li.list-group-item:contains("An item")').addClass('active')
$('li.list-group-item:parent').addClass('active')
$('li.list-group-item:empty').addClass('active')
$('li.list-group-item:has("em")').addClass('active')
$('li.list-group-item:animated').addClass('active')
- 속성
- 속성은 HTML요소의 DOM속성을 조회하고 설정하는 방법을 제공
| 속성 | 설명 |
|---|
| attr() | getAttribute(), setAttribute()를 결합한 속성 값 조회, 설정 기능을 수행 |
| prop() | 속성의 조회 및 설정을 다루는데 주로 적용 |
| val() | input등에 입력하거나 선택한 값을 조회하거나 설정하는 메서드 |
- DOM조작
- HTML 요소의 DOM을 여러 가지 방법으로 다루는 방법
- 삽입, 삭제, 변경 메서드
| 분류 | DOM메서드 | 설명 |
|---|
| 삽입 | .append() | 선택 요소의 마지막 자식 노드로 매개변수 삽입 |
| 삽입 | .prepend() | 선택 요소의 첫번째 자식 노드로 매개변수 삽입 |
| 삽입 | .before() | 선택 요소의 앞쪽에 형제 노드로 매개변수 삽입 |
| 삽입 | .after() | 선택 요소의 뒤쪽에 형제 노드로 매개변수 삽입 |
| 삭제 | .remove() | 선택된 요소를 DOM에서 삭제 |
| 변경 | .replaceWith() | 선택된 요소를 매개변수로 전달되는 콘텐츠로 교체 |
| 변경 | .replaceAll() | 매개변수에 해당하는 모든 요소를 선택된 콘텐츠로 교체 |
| 변경 | .wrap() | 선택된 요소 각각에 대해 매개변수로 감싸서 표현 |
| 변경 | .wrapAll() | 선택된 요소를 매개변수로 감싸서 표현 |
- 횡단 메서드
- 앞뒤양옆으로 이동하며 요소를 찾아 볼 수 있는 방법
| 횡단 메서드 | 설명 |
|---|
| .find() | 선택된 요소로 부터 하위 노드를 검색 |
| (깊이우선검색) | |
| .filter() | 선택된 요소로 부터 형제 노드를 특정한 조건으로 축약 |
| (너비우선검색) | |
| .children() | 선택된 요소의 자손 노드를 반환 |
| .parent() | 선택된 요소의 부모 노드를 반환 |
| .parents() | 선택된 요소의 상위 노드를 반환 |
| .siblings() | 선택된 요소의 형제 노드를 반환 |
| .prev() | 선택된 요소의 형제 노드 중 바로 앞선 노드를 반환 |
| .next() | 선택된 요소의 형제 노드 중 바로 뒤를 따르는 노드를 반환 |
| .is() | 선택된 요소에 조건에 대한 불리언 값 반환 |
| .end() | 체이닝 환경에서 이전 상태로 되돌려줌 |
| .each() | 선택된 요소에 대하여 반복문 형식을 제공 |
| .map() | 선택된 요소에 대하여 반복문 형식으로 콜백 함수 제공 |
$('ul.list').find('li').eq(2).addClass('active')
$('li').filter('active').removeClass('active')
$('li').filter((index)=>{
return index % 2 === 1
}).addClass('active')
$('ul.list').children('.active').removeClass('active')
