기본적인 선택자 (jQuery)

다음과 같은 구조가 제이쿼리의 기본적인 구성형태입니다 .

$ ('  ') 안에는 

말근대로 선택자  예시를 들었을때 h1이라는 선택자를 선택하면 

h1태그를 사용한 모든 메서드는 .css의 안에 내용들을 포함하게 됩니다. 

그렇다면 포괄적인 경우가아닌 하나만 적용하고 싶다면 어떻게 해야하나요?

저희가 평소에 id를 사용했듯이 

jquert 선택자 안에도 id를 입력할 수 있습니다. 

예를들어 html 안에 

<h1 id=name> 이라는 태그가 존재한다면 제이쿼리에서는 

$('#name'). 이라는 선택자를 넣어줘서 특정 문구를 선택할 수 도 있습니다. 

조금 더 구체적으로 지정하기 위해 

$('h1#name').으로 지정하는게 좋습니다. 

 

마지막으로는 class를 사용하는 선택자를 살펴보도록 할게요

일반적인 class구조입니다 이 부분은 복잡할 수도 있으니 실제 실행화면을 보면서 이해하도록 할게요 

제이쿼리를 사용하지않는 실행화면은 위와 같습니다. 

아래의 코드를 추가해볼게요.

.item은 item이라는 클래스를 가지는 모든 문구를 포함하게 됩니다. 

css를 이용해 이 item들에 oragne 색을 입혀줬어요

다음과 같이 class에 디자인이 입혀진걸 확인할수있습니다.  원래는 class는 그룹으로 묶기때문에, 이런식으로 

한번에 스타일을 바꾸는것도 가능합니다. 

 

특정 클래스에만 디자인을 입히기 위한방법입니다. select값을 가지고 있는 클래스는

Header-1이 유일하기 때문에 이 클래스에만 스타일이 입혀질거에요 

이렇게 

위에서 사용된 선택자들이 가장 범용성있게 자주 사용됩니다. 

그만큼 외우시는걸 추천드려요 

태그에 따라 아이디에 따른 클래스에 따른 

또 전체적인 부분에 메서드를 적용시키는 $('*')까지 

많은 내용이 아니니 한번 사용해보고 감을 익히면 좋을 것 같습니다. 

*css만 사용됐다고 해서 css만 사용할 수 있는건 아닙니다. 말그대로 메서드 css만이 아닌 

모든 메서드를 제이쿼리를 사용해 한줄로 사용할수있습니다. 그만큼 편의성이 높습니다.