웹개발16 - 선택자(selector), 자식요소

2019. 06. 25-26 필기

 

이번 챕터에서는 선택자를 검색해 조건에 맞는 요소들을 걸러내고, 원하는 메소드를 적용시키는 문법을 보도록 하겠다.

 

선택자로 요소 검색

jQuery에서는 다음과 같이 태그 선택자(selector)를 이용하여 엘리먼트를 검색할 수 있다.
$("selector"); 

아이디 선택자(단일) 또는 클래스 선택자(다수)를 이용하여 검색할 수도 있다. 
$(".classname");
$("#idname");

저번에 jQuery는 모두 메소드라고 했었다. 선택자 검색으로 걸러낸 요소들에 메소드를 적용할 수 있다.
$("selector").method();

메소드의 ( ) 안이 비어있으면 메소드 실행한다.
("속성", "변환값")과 같이 전달값이 있으면 속성의 기존값을 전달값으로 변경한다.
$(".classname").method("속성", "변환값");
$("#idname").method("속성", "변환값");

 

 메소드 체인  : jQuery 객체로 메소드를 연속적으로 호출할 수 있는 기능(. 점 연산자 이용)
$(".classname").method1().method2().method3();

메소드 호출 시 전달값이 여러개인 경우  { }(Object 객체) 안에 프로퍼티를 이용하여 전달
 => Object 객체 : {"propertyName":PropertyValue,...}

*cf*
단일 메소드 호출 : $(".classname").method("속성", "변환값");
연속 메소드 호출 : $(".classname").method("속성": "변환값");

 

자식요소 검색

부모요소 바로 아래에 존재하는 요소 검색 --- > 연산자
$("parent > children");

부모요소 하위에 존재하는 모든 요소 검색 --- 띄어쓰기
$("parent children");

부모요소 중 다시 선택자로 자식요소 검색
$(selector).children(selector);

부모요소 검색 후, 후손 요소 중 선택자를 이용해 특정한 --- find() 메소드에 반드시 선택자를 입력(에러 발생)
$(selector).find(selector);

부모 선택자로 검색된 엘리먼트 중 특정 엘리먼트 검색 --- 선택자의 순서는 상관 없음
$(selector).filter(selector);

특정 엘리먼트를 제외하여 검색
$(selector).not(selector);

 

 가상 선택자  : 앞부분의 선택자로 검색된 엘리먼트 중 특정 엘리먼트를 검색하기 위해 엘리먼트 상태(위치)

:nth-child	n번째 자식
:first	첫번째 자식
:last	마지막 자식
:odd	홀수
:even	짝수