jQuery :: 1. 기본 선택자

 

 

선택자를 사용하여 문서객체 불러오기

  $( ) 에 CSS 선택자를 입력하여 가져옴.

 

1. $('CSS 선택자').css('스타일 속성명', '값');

2. $('CSS 선택자').attr('속성명', '값');

 

 

 

  선택자 사용하기  

방법 1 $( function( ){   $('CSS 선택자').css('스타일 속성명', '값');   } );

방법 2 $( function( ){   $('CSS 선택자').css({   '스타일 속성명':'값'   }); });

 

 

ex.

 

 

 

 

 

 

 

 

  기본 선택자   : css에서 요소 선택하는 방법과 동일함.

 

 

 

 

직접 선택자

$('*')	모든 요소 선택.
$('#아이디명')	id 속성에 지정한 값을 가진 요소 선택.
$('.클래스명')	class 속성에 지정한 값을 가진 요소 선택.
$('요소명')	지정한 요소명과 일치하는 요소들 선택.
$('선택1, 선택2, …')	지정된 요소들을 같이 선택.
$('요소.클래스명')   $('요소#아이디명')	ex. $('p.txt')          // p요소 중 class가 txt인 요소 선택.   ex. $('ul#name')    // ul요소 중 id가 name인 요소 선택.

 

  ex.

 

 

 

 

 

인접 관계 선택자

$('요소 선택').parent( )	선택한 요소의 부모 요소 선택.
$('요소 선택').parents( )	선택한 요소의 상위 요소 모두 선택.
$('요소 선택').closest('div')	선택한 요소의 상위 요소 중 가장 가까운 div만 선택.
$('요소 선택 하위 요소')	선택한 요소에 지정한 하위 요소 선택. (선택요소와 하위요소 사이에 공백)
$('요소 선택>자식 요소')	선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택.
$('요소 선택').children( )	선택한 요소의 모든 자식 요소 선택.
$('요소 선택').prev( )	선택한 요소의 바로 이전 요소 선택.
$('요소 선택').prevAll( )	선택한 요소의이전 요소 모두 선택.
$('요소 선택').prevUntil('요소명')	선택한 요소부터 지정한 이전 요소까지 모두 선택.
$('요소 선택').next( )   $('요소 선택 + 다음 요소')	선택한 요소의 다음 요소 선택.
$('요소 선택').nextAll( )	선택한 요소의 다음 요소 모두 선택.
$('요소 선택').nextUntil('요소 지정')	선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택.
$('.box').siblings( )	class 값이 box인 요소의 형제 요소 전체 선택.

 

  ex.

 

 

 

 

 

+

반복되는 스타일이 있을 땐 변수를 사용하여 간단하게 표현 가능.