Javascript VS jQuery
Javscript API에 비해 jQuery는 선택자를 사용하여 DOM(Document Object Model) 요소에 쉽고 편리하게 접근할 수 있다.
// Javascript
document.getElementById('container');
document.querySelector('#container');
// jQuery
$('#container')
아래는 기초적인 선택자만 작성하였으므로 모든 선택자를 확인하려면 jQuery 사이트 참조
직접 선택자
아이디 (#)
id는 페이지내에서 유일해야한다.
// Html
<div id="container">
<div class="nav"></div>
</div>
// jQuery
$('#container')
클래스 (.)
동일한 클래스를 가진 복수의 요소가 될 수 있다.
// Html
<div class="box">
<div class="items">
<div class="items">
</div>
// jQuery
$('.box')
$('.items') // 복수의 요소가 됨
태그
동일한 태그를 가진 복수의 요소가 될 수 있다.
// Html
<div id="container"></div>
<div class="footer">
<a href=".."></a>
</div>
// jQuery
$('div') // 복수의 요소가 됨
$('a')
속성 ([])
동일한 태그의 속성에 접근 할 경우 복수의 요소가 될 수 있다.
// Html
<div data-type="number">
<a href="./main/index.html"></a>
</div>
// jQuery
$('a[href]')
$('div[data-type]')
속성 일치 (=)
// Html
<form>
<input type="tel" name="phoneNumber">
<input type="text" data-type="desc">
</form>
// jQuery
$('input[name="phoneNumber"]')
$('input[data-type"desc"]')
속성 불일치 (!)
// Html
<form>
<input type="tel" name="phoneNumber">
</form>
// jQuery
$('input[name!="phoneNumber"]')
속성 선택 값으로 시작 (^)
// Html
<form>
<input type="tel" name="phoneNumber">
</form>
// jQuery
$('input[name^="phone"]')
속성 선택 값으로 종료 ($)
// Html
<form>
<input type="tel" name="phoneNumber">
<input type="tel" name="userNumber">
</form>
// jQuery
$('input[name$="Number"]')
속성 선택 값과 일치하거나 선택 값 뒤에 '-'를 붙여 시작하는 값 (|)
// Html
<form>
<input type="tel" name="phone-number">
<input type="tel" name="phone-type">
</form>
// jQuery
$('input[name|="phone"]') // 복수의 요소가 됨
속성 선택 값을 포함하고 있음 (*)
// Html
<img src="./assets/image/@sample.png">
<img src="../@today.png">
// jQuery
$('img[src*="@"]') // 복수의 요소가 됨
속성 선택 값 중에 일치하는 단어가 있음 (~)
// Html
<div class="header nav"></div>
<div class="footer nav last_container"></div>
// jQuery
$('div[class~="nav"]') // 복수의 요소가 됨
복수 속성
// Html
<input type="text" data-value="C0808" name="userID">
<input type="text" data-value="C0824" name="userID">
// jQuery
$('input[data-value][name="userID"]') // 복수의 요소가 됨
인접관계
선택자자식 선택자 (>)
// Html
<div id="header">
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
// jQuery
$('#header > div')
$('ul > li') // 복수의 요소가 됨
자식, 후손 선택자
해당하는 태그 아래 일치하는 모든 태그
// Html
<div id="header">
<div>
<div>
<div></div>
</div>
</div>
</div>
// jQuery
$('#header div') // 복수의 요소가 됨
형제자매 선택자 (+, ~)
선택자 + 선택자 : 다음에 오는 하나의 태그
선택자 ~ 선택자 : 형제 자매 중 일치하는 모든 것
// Html
<div>
<div class="box"></div>
<div></div>
<div></div>
</div>
// jQuery
$('.box + div')
$('.box ~ div') // 복수의 요소가 됨
가상선택자(pseudo selector) (:)
input type
// Html
<input type="input">
<input type="button">
<input type="image">
<input type="radio">
<input type="checkbox">
// jQuery
$(':input')
$(':button')
$(':image')
$(':radio')
$(':checkbox')
순서(형제, 자매, 부모)
구문
$(':odd') // 홀수 (index의 시작 = 0)
$('.box > :even') // 짝수 (index의 시작 = 0)
$(':gt(인덱스)') // 해당하는 인덱스 초과 (index의 시작 = 0)
$(':lt(인덱스)') // 해당하는 인덱스 미만 (index의 시작 = 0)
$(':eq(인덱스)') // 해당 인덱스에 맞는 번째 (index의 시작 = 0)
$(':first') // 선택자를 기준으로 첫번째
$(':last') // 선택자를 기준으로 마지막
$(':first-child') // 첫번째*
$(':last-child') // 마지막*
$(':nth-child(인덱스)') // 해당 인덱스에 맞는 번째* (index의 시작 = 1)
$(':nth-of-type(인덱스)') // 해당 인덱스에 맞는 번째 (index의 시작 = 1)*표시는 형제, 자매 태그들이 순서 기준에 영향을 줌을 뜻하므로 예제 참고
예제
// Html
<div class="box">
<div>
1번
<div>1-1번</div>
<div>1-2번</div>
</div>
<p>p다</p>
<div>2번</div>
<div>
3번
<div>3-1번</div>
<div>3-2번</div>
</div>
</div>
// jQuery
$('.box > div:odd') // 2번
$('.box > div:even') // 1번, 3번
$('.box > div:gt(1)') // 3번
$('.box > div:lt(1)') // 1번
$('.box div:eq(1)') // 1-1번
$('.box > div:eq(1)') // 2번
$('.box div:first') // 1번
$('.box div:last') // 3-2번
$('.box > div:first-child') // 1번
$('.box div:first-child') // 1번, 1-1번, 3-1번
$('.box > div:last-child') // 3번
$('.box div:last-child') // 1-2번, 3번, 3-2번
$('.box div:nth-child(1)') // 1번, 1-1번, 3-1번
$('.box div:nth-child(2)') // 1-2번, 3-2번
$('.box div:nth-child(3)') // 2번
$('.box div:nth-of-type(1)') // 1번, 1-1번, 3-1번
$('.box div:nth-of-type(2)') // 1-2번, 2번, 3-2번
$('.box div:nth-of-type(3)') // 3번
그외
// jQuery
$(':selected') // select박스 선택
$(':checked') // check박스 선택
$(':has(선택자)')
$(':contains(텍스트)')
$(':focus') // 포커스
$(':visible') // 투명상태가 아닌
$(':enabled') $(':disabled') // 활성화, 비활성화
$(':hidden') // 감춰진 상태
조합 예시
$('#header ul[class~="nav"] li')
$('.box .items > button:focus')
$('.box + .box')
$('section#container > .slide:nth-of-type(3)')
'Javascript' 카테고리의 다른 글
| [jQuery기초] 요소조작_이벤트_mouseenter, mouseover, mouseleave, mouseout, mousemove (0) | 2020.06.25 |
|---|---|
| [jQuery기초] 요소조작_이벤트_on_one_off_trigger_focus_click_hover (0) | 2020.06.25 |
| [jQuery기초] 요소조작_CLASS (0) | 2020.06.25 |
| [jQuery기초] 탐색 메서드 (0) | 2020.06.23 |
| [jQuery기초] 기본템플릿, load 이벤트 그리고 ready 이벤트 (0) | 2020.06.23 |
| Javascript의 reduce 메서드를 알아보자. (0) | 2020.06.02 |
| require와 import (0) | 2020.04.21 |
| JSDoc를 사용해서 Javasript 문서화해보자! (0) | 2020.03.13 |
