반응형
기본 selector
- * : 모든요소
- element : 지정된 요소 이름을 가진 모든 요소
- #id: 지정된 id 특성값을 가진 모든 요소들
- .class: 지정된 class특성값을 가진 모든 요소들
- selector1, selector2 : 하나이상의 셀렉터와 일치하는 모든 요소들 (셀렉터 조합시 .add() 메서드를 사용하면 효율적)
계층 탐색 selector
- 조상과 후손 요소 : ancestor(공백)descendant : 다른요소 하위요소들 탐색 selector ex) li a
- 부모와 자식 요소 : parent > child : 다른 요소의 직접적인 자식 요소들 탐색 selector (특정부모 요소의 모든 자식요소 탐색하려면 자식요소자리에 * 사용)
- 이웃 요소 : previous + next : 이전 요소의 바로 다으멩 따라오는 근접한 이웃 요소 탐색 selector
- 모든 이웃요소: previous ~ silbings :이전요소의 모든 이웃요소들 탐색 selector
선택자 |
사용 예시 |
설명 |
자식 Child |
$("#a > h1") |
직계 자식 요소 선택 #a 요소의 직계자식 중 h1을 선택. |
후손 Descendant |
$("#a h1") |
후손 요소 선택 #a 요소의 내부에 포함된 후손요소 중 h1 선택. |
다음 인접 |
$("#a + h1") |
#a 요소의 동등계층 구조에서 다음요소가 h1인것을 선택 |
다음 형제 |
$("#a ~ h1") |
#a 요소의 동등계층 구조에서 #a 다음에 나오는 형제요소 h1 선택 |
활용예제)
id 요소내의 input 요소의 값:
$("#id input:option[name='~~']").val();
ex) $("#m_" + ukey + " input:checkbox[name=ukey]").prop("checked", true);
// id: m_abcd1234 인 요소내의 체크박스(name:"ukey"인)를 활성화하라.
** input앞에 공백 주의 (공백 :'이하'를 의미)
예제의 경우 id 내에 있는 input 요소이므로 id가 상위, input요소가 하위.
--> #id (공백) input:option[~~~]
반응형
'Back-end > JavaScript' 카테고리의 다른 글
[java script] map() / filter() 함수란? 배열 가공하기. (0) | 2022.07.28 |
---|---|
[javaScript] input text 태그 엔터 시 새로고침 현상 막기 (2) | 2021.06.14 |
[jquery] 콜백함수 란? Call-back function (0) | 2019.01.06 |
스크립트 script 란? (0) | 2019.01.06 |
제이쿼리란? 에이젝스란? 제이큐그리드란? JQuery / Ajax / Jqgrid (0) | 2018.10.15 |