선택자

선택자

▶ 문서 객체 모델 (DOM)의 HTML 문서 객체 구조

선택자 사용을 위해서는 문서 객체를 불러와야 한다. javascript 에서 body 영역 생성 후 script 코드 실행이 되어야 원하는 결과를 얻을 수 있는 것처럼, 제이쿼리도 마찬가지이다. jquery를 body의 소스코드 영역보다 상위에 위치시킨후, body영역을 먼저 실행하고 싶다면 다음과 같은 body 영역을 가져오는 코드를 수행해야 한다.

 

dom 객체를 읽기 완료 후에 ready 메서드의 함수를 실행한다.

위와 같은 함수로, 사용하기 편하게 제이쿼리 언어 자체에서 다음처럼 요약하여 사용이 가능하다.

제이쿼리가 dom 객체 읽기 완료 후에 실행할 준비가 되었다는 뜻이다.

하지만, html 코드를 동적으로 생성시에는 적용 되지 않는다. (단점!)

 

▶ 선택자 사용방법

선택자 : 제이쿼리 함수 실행하면서 인수값으로 css 선택자와 동일한 방법으로 삽입한다.

사용법 : $('선택자')

 

▶ 선택자의 종류

자주 쓰이는 선택자의 종류를 소개하겠다.

 

⊙ 직접 선택자

제이쿼리 함수에 선택자를 인수 값으로 삽입하여 실행하는 경우 사용한다.

- $('#아이디'): 선택 아이디의 객체를 검색하여 객체를 반환한다. (id 속성에 지정한 값을 가진 요소를 선택한다.)

- $('.클래스'): 선택 클래스의 객체를 검색하여 전체 반환한다. (class 속성에 지정한 값을 가진 요소를 선택한다.)

- $('[속성명]'): 인수값과 일치하는 속성명 전체를 선택하여 객체를 반환한다.

- $('[속성명==속성값]'): 인수값과 일치하는 조건의 속성명, 속성값 전체를 선택하여 객체를 반환한다.

- $('선택자, 선택자, 선택자'): 인수값의 전체에 해당되는 선택자 객체를 한번에 선택하여 객체를 반환한다.

- $('선택자1 선택자2'): 선택자1의 하위(자식)인 선택자2를 선택하여 객체를 반환한다.

- $('태그명선택자'): 태그명과 일치하면서 선택자와 일치하는 객체를 선택하여 반환한다.

  ☞ $('h1.title') - h1태그이면서 title 이라는 클래스를 가진 객체

  ☞ $('h1#title') - h1태그이면서 title 이라는 아이디를 가진 객체

  ☞ $('h1[class]') - h1태그이면서 class라는 속성을 가진 객체

 

⊙ 인접관계 선태자

직접선택자로 선택 이후 상세하게 객체를 검색 할 수 있다.

- $('선택자').parent(): 선택된 객체의 부모 객체를 검색하여 객체를 반환한다.

- $('선택자').parents(): 선택된 객체의 부모 객체 전체를 검색하여 객체를 반환한다.

  ☞ 인수값이 있을 경우 선택된 객체의 인수값과 일치하는 부모 객체만 반환한다.

- $('선택자').children(): 선택된 객체의 자식 요소를 검색하여 객체 반환.

- $('선택자').prev(): 선택된 객체의 동일선상 이전 객체 선택 반환(body -> head)

- $('선택자').next(): : 선택된 객체의 동일선상 이후 객체 선택 반환(head-> body )

- $('선택자').find('자식요소 선택자'): 선택된 개체의 자식 요소 중 find 메서드의 인수값과 일치하는 객체를 반환한다.

 

<!> 선택자 this ??

 

article 이라는 태그 선택자를 클릭시 클릭한 선택자가 제거(remove)가 되는 소스코드이다.

this와 $(this)의 차이는 분명하다. this는 객체를 반환하는 반면 $(this)는 태그를 반환한다.

 

 

클릭시 다음이 실행되는 실습을 해보자.

 

실습1. article 태그 내부(자식)태그 중 a태그의 객체를 삭제한다.

$('article').click(function(){
	$(this).find('a').remove();
})

 

실습2. entry-summary 클래스 상위인 article 객체를 삭제한다.

$('.entry-summary').click(function(){
	$(this).parent('article').remove();		
});

 

 

실습3. article 태그 하위의 entry-title 클래스 내의 a태그의 텍스트를 바꾸기.

$('.entry-summary').click(function(){
	$(this).parent('article')
	.find('.entry-title a')
	.text('제이쿼리TEXT');
});