jquery 의 셀렉터 접근 시에,
아이디나 name 이 유동적일 때, 접근하는 방법
$("input[name='aaa']") =>'aaa' 란 name 접근
$("input[name^='aaa']") =>'aaa' 로 시작하는 name 접근 DB에서 like 'aaa%' 와 동일
$("input[name*='aaa']") =>'aaa' 가 포함된 name 접근 DB에서 like '%aaa%' 와 동일
$("input[name$='aaa']") =>'aaa' 로 끝나는 name 접근 DB에서 like '%aaa' 와 동일
생각보다 유용하다. 여러개의 name을 접근할때 많이 쓰고, 유동적인 ID일 경우 $("input[id^='aaa']") 로 많이 쓴다. ID 뒷부분에 유동적인 key 값을 많이 붙이는 경우가 있어서...
jQuery에는 다양한 셀렉터들이 있다.
이걸 잘 사용하면 쉽게 jQeury 코딩이 가능하다 (Javascript도 사용가능)
이번 포스팅에서는 간단하게 예시로만 설명할것이다.
자세한 내용은 다음 파일을 받아서 보도록 하자
(파일은 압축을 풀면 SELECTOR 폴더안에 index.html만 키면 모든 내용을 확인할 수 있다)
지금 부터 내가 설명하고자 하는 다중 셀렉터와 해당 속성의 값이 주어진 값으로 시작되면 선택 된다는 ^기호를 사용하는 것을 보여주고자 한다.
만약 다음과 같이 체크박스가 4개가 있다.
<input type="checkbox" name="postData" id="Name1" class="CheckBox"> <input type="checkbox" name="postData" id="Phone1" class="CheckBox"> <input type="checkbox" name="postData" id="Name2" class="CheckBox"> <input type="checkbox" name="postData" id="Phone2" class="CheckBox"> <input type="checkbox" name="postData" id="Name3" class="CheckBoxOther"> <input type="checkbox" name="postData" id="Phone3" class="CheckBoxOther">이 중에 1) Class가 CheckBox이며,
2) id가 Name이라는 문자열로 시작하는 input 박스를 체크하기를 원한다.
그렇다면, Jqeury 소스는 다음과 같아진다.
$('input[id^="Name"][class="CheckBox"]').attr('checked', true);
Name으로 시작하는 id CheckBox가 class
: 두 조건을 모두 만족하는 input tag (다중 셀렉터)
하면
<input type="checkbox" name="postData" id="Name1" class="CheckBox"> <input type="checkbox" name="postData" id="Name2" class="CheckBox">만 체크가 된다.
속성
| [name] | name속성이 있는 요소를 선택 |
| [name="value"] [name2="value2"] | name속성의 값이 value이고 name2 속성의 값이 value2 인 요소를 선택 |
| [name="value"] | name속성의 값이 value인 요소를 선택 |
| [name!="value"] | name속성의 값이 value가 아닌 요소를 선택 |
| [name^="value"] | name속성의 값이 value로 시작하는 요소를 선택 |
| [name|="value"] | name속성의 값이 value 이거나 value로 시작하는 요소를 선택 |
| [name*="value"] | name속성의 값에 value가 들어 있는 요소를 선택 |
| [name~="value"] | name속성의 값이 value를 포함하는, 쉼표로 구분된 문자열 요소를 선택 |
| [name$="value"] | name속성의 값이 value로 끝나는 요소를 선택 |
태그
| div | 태그명이 div인 모든 Element 선택 |
| div p | div 요소의 자식 요소중 태그명이 p인 요소 선택 |
| div, p | div 요소와 p 요소를 선택 |
| div > p | div 요소의 바로아래 자식 요소중 태그명 p인 요소 선택 |
| div + p | div의 형제 요소로 바로 다음에 나오는 요소 p인 요소 선택 |
| div ~ p | div의 형제 요소로 다음에 나오는 모든 요소 p인 요소 선택 |
| div:has(p) | 태그명이 p인 자손을 하나 이상 가지는 div 요소 선택 |
| div.code | 클래스명 code를 가지는 모든 div 요소 선택 |
| div#name | id가 name인 div 요소 선택 |
| div[A] | 속성 A를 가지는 모든 div 요소 선택 |
| div[A=B] | 값이 B인 A 속성 값을 가진 div 요소 선택 |
| div[A^=B] | 값이 B로 시작하는 값인 A 속성을 가진 div 요소 선택 |
| div[A$=V] | 값이 V로 끝나는 값인 A 속성을 가진 div 요소 선택 |
| div[A*=V] | 값에 V를 포함하는 값인 A 속성을 가진 div 요소 선택 |
선택자
| :animated | 움직이는 요소 |
| :header() | <h2>, <h2>, <h3> 등 제목 요소 |
| :input | input, textarea 모든 입력 컨트롤 |
| :text | <input type="text"> |
| :button | <input type="button"> |
| :radio | <input type="radio"> |
| :checkbox | <input type="checkbox"> |
| :password | <input type="password"> |
| :file | <input type="file"> |
| :hidden | <input type="hidden"> |
| :image | <imput type="image"> |
| :submit | <input type="submit"> |
| :reset | <input type="reset"> |
| :selected | <select>의 <option selected> |
| :checked | <input type="checkbox"> <input type="radio">의 체크된 요소 |
| :contains() | 해당 인자를 가지고 있는 요소 $('div:contains("text")'); |
| :visible | 눈에 보이는 요소 |
| :enabled | 활성화된 요소 |
| :disabled | 비활성화된 요소 |
| :empty | 해당 요소가 비어있는 요소(text도 포함) |
| :odd | 홀수 요소 |
| :even | 짝수 요소 |
| :parent | 부모요소 |
| :parents | 부모요소중에 |
| :first | 첫번째 요소 |
| :first-child | 첫번째 자식요소 |
| :last | 마지막 요소 |
| :last-child | 마지막 자식요소 |
| :nth-child() | 자식 요소 집합에서 인자의 위치한 자식 $('li:nth-child(1)') |
| :eq() | 인자의 순번에 있는 요소 $('td:eq(2)"); |
| :only-child | 형제가 없는 요소 |
| :gt() | 인자보다 큰 요소 $(":gt(index)"); |
| :lt() | 인자보다 작은 요소 선택 $(":lt(index)"); ▶ index 값보다 작은 요소 |
| :has() | 인자요소를 가지고 있는 요소 $('div:has(p)'); |
| :not() | 인자의 조건이 아닌 요소 $(':not(div)'); |
| :focus | focus 상태 요소 선택 |