[jQuery] 제이쿼리의 시작, 노드 선택자 정리

들어가며.

jQuery 처음 생겨났을 때 DOM 선택자가 CSS의 선택 방식과 동일하여 많은 인기를 얻었었고 그만큼 DOM 노드에 쉽게 접근 할수 있다

선택자 규약(?)이 많은 편이지만 외울 필요는 없을 거 같다. 많은 것들 중에 자주 사용하는 것은 자동적으로 외워지고, 이런 게 필요한데 하고 찾아보면 있기 때문이다. 그리고 선택자, 필터 등을 조합하면 다 찾을 수 있다. 물론 그렇게 안되도록 간결한 html 문서를 작성해야 하겠지만 말이다.

 

공식 문서에 잘 되어 있지만, 지금까지 아무 생각 없이 사용하던 것을 정리하는 차원에서 기록 한다.

 

jQuery API Documentation - Selectors

 

1. 기본 선택자

jQuery 의 DOM 노드(요소, 엘리먼트, Element)를 선택하는 것은 스타일 시트의 CSS 선택 방식과 동일하다.

스타일 시트에서 a 태그의 색을 지정시 a {color: #dddddd} 라고 한다면 jquery에서는 $('a').css('color','#dddddd'); 로 설정하면 된다.

$('a') 
// 모든 a 노드(anchor)

$('#link1')	
// 아이디가 link1인 노드(id='link1')

$('.link2')	
// 클래스 속성에 link2가 있는 모든 노드

$('div a')
// div 요소 안에 있는 모든 a 노드

$('div > a')
// div 바로 아래(자식)에 있는 모든 a 노드

$('div, span, a.link1')
// 콤마(,)로 구분하여 지정된 모든 노드, 각 노드는 독립적으로 선택된다.

$('ul.list > li:nth-child(n)')
// list를 클래스로 하는 ul의 자식 노드 li 중 1을 시작으로 n번째 노드를 선택

$('ul > li:first-child')
// 첫번째 li 노드를 선택

$('ul > li:last-child')
// 마지막 li 노드를 선택

$('ul.list > li:even')
// list를 클래스로 하는 ul의 자식 노드 li 중 0을 포함한 짝수번째 노드들을 선택

$('ul.list > li:odd')
// list를 클래스로 하는 ul의 자식 노드 li 중 홀수번째 노드들을 선택

$('ul > li:eq(n)')
// 0으로 시작하는 인덱싱으로 n번째 li 노드를 선택 jQuery 3.4 버전 부터 사용되지 않는다.
// 아래의 선택자를 사용해야 한다.
$('ul > li').eq(n)

$('ul > li:gt(n)')
// 0로 시작하여 n번째 이후 li 노드들을 선택, 3.4 버전 부터 사용되지 않으며 아래의 함수를 사용해야 한다.
$('ul > li').slice(n)

$('ul > li:lt(n)')
// :gt와 반대이며 0으로 시작하는 인덱스 중 n번째 요소 이전 것을 선택, 역시 3.4부터 사용안함
$('ul > li').slice(0,n)

$('span:empty')
// 노드에 공백, 자식노드, 텍스트 등이 아무것도 없는 것을 선택
$('span:parent')
// empty와 반대로 뭔가가 있는 것을 선택

$('div:has(p)')
// 자식 노드로 p를 가진 div 노드를 선택

$('div:not(.block)')
// 지정된 노드 중 not 안의 속성값이 아닌 노드를 선택

$("span:contains('Test')")
// 지정된 문자가 있는 노드를 선택(대소문자 구분함)

$("div[data|='test']")
// 속성 data의 값이 test 이거나 "test-"로 시작하는 값을 가진 div 노드

$("div[data*='test']")
// 속성 data의 값이 test 문자열과 동일하거나 포함한 값을 가진 div 노드

$("div[data~='test']")
// 속성 data의 값에 띄어쓰기 기준으로 여러 문자들 중 온전한 test가 있는 div 노드
// 가능한 경우 data='test' data='this is test' data='test is done'
// 선택 안되는 경우 data='test-time' data='test1'

$("div[data$='test']")
// data 속성이 test로 끝나는 div 노드

$("div[data^='test']")
// data 속성이 test로 시작하는 div 노드

$("div[data!='test']")
// data 속성 값이 test가 아닌 div 노드

$("div[data='test']")
// data 속성 값이 test인 div 노드

$('td#first').closest('tr')
// td#first 노드에서 상위 노드들 중 가장 가까운(첫번째) tr 노드를 선택

이것 보다 많지만 자주 사용하던 것들만 추려 보았다.

 

2. 폼노드 관련 선택자

폼은 많이 사용하기도 하지만 자주 잊어버리거나 헷갈리는 부분들이 많았다. 역시 자주 사용하는 것들을 기록한다.

$(':button')
// 버튼을 선택한다.

$(':checkbox')
// 체크박스를 선택한다.

$(':checked')
// 체크박스 또는 라디오 버튼 중에 체크된 노드를 선택

$(':disabled')
// 폼요소들 중에 disabled 설정된 노드들을 선택

$(':enabled')
// :disabled 의 반대로 활성화 된 것을 선택

$(':file')
// type='file' 인것을 선택

$(':image')
// type='iamge'

$(':input')
// 모든 폼요소 input, textarea, select, button 선택

$(':password')
// type='password'

$(':radio')
// type='radio'

$(':reset')
// type='reset'

$(':selected')
// select 노드의 option 중에 selected 된 것을 선택

$(':submit')
// type='submit'

$(':text')
// type='text'

 

3. 응용편

3-1. 이메일 입력 받기를 선택하면 이메일 주소 입력창을 활성화하기

<label><input type="checkbox" name="email_enabled" value="1"> 이메일 주소 입력 받기</label>
<input type="text" name="email_userid" placeholder="이메일 아이디" disabled>
@
<input type="text" name="email_domain" placeholder="이메일 도메인" disabled>

$("input:checkbox[name='email_enabled']").click(function(){
	$("input[name^='email']").prop("disabled", ! $(this).is(":checked")).eq(1).focus();
})

$("input:checkbox[name='email_enabled']") 는 체크박스 중에서 name 속성이 email_enabled 인 노드를 선택해서 클릭 이벤트를 생성한다.

$("input[name^='email']") input 노드 중 name이 email로 시작하는 노드를 선택하는데 2개가 된다.

.eq(1).focus() 선택된 2개의 노드 중 첫번째에 포커싱한다.

 

3-2. 검색 폼에서 분류를 체크박스로 해서 분류 전체를 선택한 경우 나머지 분류는 비활성화 하기

<laberl><input type='checkbox' name='category' value='all'>전체</lable>
<laberl><input type='checkbox' name='category' value='notebook'>노트북</lable>
<laberl><input type='checkbox' name='category' value='desktop'>데스크탑</lable>
<laberl><input type='checkbox' name='category' value='monitor'>모니터</lable>

$("input:checkbox[name='category[]']").eq(0).click(function(){
   $("input:checkbox[name='category[]']").slice(1)
   		.prop('disabled', $(this).is(':checked'));   
})

$("input:checkbox[name='category[]']").eq(0) 분류 체크박스 중 첫번째 노드를 선택할 경우

$("input:checkbox[name='category[]']").slice(1) 첫번째 이후 모든 분류 체크박스를 선택하여 비활성화

 

3-3. 테이블 목록에서 체크박스를 체크하면 해당 row 의 배경색을 변경하기

  <table id="student_lists">
    <tr>
      <td><input type='checkbox' name='checkit[]' class='selected-students' valuie='1'></td>
      <td>홍길동</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='checkit[]' class='selected-students' valuie='2'></td>
      <td>홍길동</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='checkit[]' class='selected-students' valuie='3'></td>
      <td>홍길동</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='checkit[]' class='selected-students' valuie='4'></td>
      <td>홍길동</td>
    </tr>
  </table>

$("#student_lists input.selected-students").click(function(){
	$tr = $(this).closest("tr");
    if($(this).is(':checked')){
    	$tr.css('background','#ffff00');
    }else{
    	$tr.css('background','');
    }
})

$("#student_lists input.selected-students") : 아이디가 #student_lists 인 노드의 자식 노드 중 input 이면서 selected-students클래스를 가진 노드에 클릭 이벤트를 생성한다.

$(this).closest("tr") : 클릭한 노드의 상위 노드들 중 첫번째 tr을 선택하여 생상을 변경한다.