기본적인 jQuery 선택자를 정리 해야겠다.

 

먼저 jQuery의 호출문은 대체로 다음과 같은 형태로 사용된다.

 

$(선택자).메서드();

 

여기서 선택자는 조작할 객체를 찾는 검색이다. 

간단한 엘리먼트, 태그부터 시작해 정밀한 선택과 효율적인 처리를 위해 훨씬 더 복잡한 문법이 필요하다.

 

먼저 간단하게 (h1)엘리먼트를 찾는것 부터

<body><h1>제목입니다.</h1> <h2>제목입니다2.</h2> <h3>제목입니다3.</h3> </body> 이후에 jquery $('h1').css('background', 'red');

 

$('h1') h1 태그의 

.css css 스타일을 
('background', 'red') 배경을 빨간색으로  
 
이렇게 생각하면 될거같다. 
이건 h1태그만 지정해줬으니 실행시켜보면 h1태그 부분만 배경색이 변해있다.
 
이번에는 좀더 다양하게 해본다.
<body> <h1>제목입니다.</h1> <h2 id="para">작은 제목입니다.</h2> <h2 class="sample>샘플 입니다.</h2> <script> $('*').css('background', 'yellow'); $('h1').css('color', 'blue'); $('#para').css('color', 'green'); $('.sample').css('color', 'red'); </script> </body>
 

여기에는 그냥 엘리먼트 뿐만 아니라 아이디 클래스도 나와있다. 

 

하나씩 살펴보면 

$('*') 문서 전체를 의미한다 

$('h1') h1엘리먼트를 지정 

$('#para') 아이디가 para인 엘리먼트를 지정 

$('.sample') 클래스네임이 sample인 엘리먼트를 지정 이렇게 생각하면 될거 같다.

 

이렇게 jquery의 기본적인 셀렉터들은 아이디 태그네임 클래스네임을 가지고 여러가지 속성을 변경해줄수 있다.

 

 

'JavaScript > jquery' 카테고리의 다른 글

필터(FILTER) 3  (0) 2017.10.03
필터(FILTER) 1  (0) 2017.10.03
jQuery 자식 선택자  (0) 2017.09.18
jQuery 명칭 충돌 (noConflict)  (0) 2017.09.18
jQuery 소개  (0) 2017.09.06

티스토리툴바