jQuery 선택자

전체 선택자

$(*) 

아이디 선택자

$("#아이디") 

document.getElementById('title')

document.querySelector('#title')

클래스 선택자

$(".클래스명") 

document.getElementsByClassName('title')

document.querySelectorAll('.title')

요소명 선택자

$("div")

document.getElementsByTagName('div')

자식요소 (바로 한단계 하위)

$("ul > li") 

후손요소 (모든 하위)

$("#title div")

document.getElementById('title').getElementsByTagName('div')

document.querySelectorAll('#title div')

결합 선택

태그가 div이고, id는 title이고, p태그 선택

$('div#title:p')

id title class, bottom-btn, div태그를 모두 선택

$('#title, .bottom-btn, div')

속성

속성과 값이 동일함

$('input[name=address]') 

속성안의 특정값이 ~와 동일함

$('input[name|=address]') 

속성안의 값이 ~단어로 시작함

$('input[name~=address]') 

속성안의 값이 ~으로 시작함

$('input[name^=address]') 

속성안의 값이 ~으로 끝이남

$('input[name$=address]') 

속성안의 값이 ~값을 포함

$('input[name*=address]') 

document.querySelectorAll('[value]') 

document.querySelectorAll('[value="show"]') 

HTML read / write

태그까지 읽어오기

.innerHTML  <= JavaScript    
.html() 	<= jQuery

태그는 제외하고 읽어오기

.innerText 	<= JavaScript
.text()		<= jQuery 

attr() 으로 속성값 읽기 & 쓰기

$('title_div').attr('style')
$('title_div').attr('style', 'color : red')

입력태그 값 읽기 & 쓰기( select, input )

.value 	<= JavaScript
.val() 	<= jQuery

first_name.value = 'Hello';
$('first_name').val('Hello');