[jQuery] 제이쿼리, 기본 셀렉터2(all, id, element, class, multiple )

2021.11.05 - [jQuery] - [jQuery] 제이쿼리, 기본 셀렉터1(all, id, element, class, multiple )

[jQuery] 제이쿼리, 기본 셀렉터1(all, id, element, class, multiple )

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑All, ID, Element 셀렉터에 관련된 내용↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

반응형

4. Class 셀렉터

자바스크립트의 getElementByClassName()과 동일한 역할을 합니다.

HTML 안에 있는 여러 Element 중에서 Class값이 동일한 Element를 찾아서 jQuery 변환시킵니다.

jQuery를 적용하기 전의 HTLM 화면

위의 HTML화면에서 class 이름이 myClass를 찾아 테두리색을 파란색으로 바꾸고 싶다면, 아래와 같이 작성하면 됩니다.

jQuery를 적용하기 위한 소스코드

함수 안에 $(".myClass").css("border", "2px solid blue") 를 작성해 줍니다.

class의 값을 설정하기 위해서 $()안에 '.'을 사용하고 HTML문에 class의 값인 content를 작성해주면 됩니다. 뒤에 테투리 색을 설정하는 css문을 작성해 줍니다.

jQuery를 적용한 후의 HTML 화면

class값이 myClass인 sapn, div 요소의 테투리 색이 파란색으로 변경된것을 확인할수 있습니다.

class셀렉터는 class값이 jQuery에서 적용시킨 class 값과 같다면 엘리먼트가 다르더라도 상관없이 적용됩니다.

ID 셀렉터와는 다른점은, ID 셀렉터는 중복되는 값이 있을때에 최상위에 있는 값만 적용하였는데, class 셀렉터는 중복되는 값이 존재하면 그 모든 값에 적용시킬수 있습니다.

 

---

5. Multiple 셀렉터

위에서 설명한 셀렉터들은 나열하거나 조합하여 원하는 개체를 보다 쉽고 정확하게 탐색하기 위해서 사용됩니다.

각각의 셀렉터들을  ','로 나누어서 탐색합니다.

 

$(“#content”, “div”, “a”, “.myclass”) 경우 ID 의 값이 “content”인 개체, “div”, “a” 태그를 가지는 개체, 클래스 명이 “myClass”인 개체를 탐색하여 반환을 하게 되는 반면, $(“div.myClass”)의 경우 “div” 태그로 구성되었으며 동시에 클래스 명이 “myClass”인 개체를 반환합니다.

jQuery를 적용하기 전의 HTLM 화면

위의 HTML화면에서 id값이 content와 div 요소를 찾아 테두리색을 파란색으로 바꾸고 싶다면, 아래와 같이 작성하면 됩니다.

jQuery를 적용하기 위한 소스코드

함수 안에 $("#content, div").css("border", "2px solid blue") 를 작성해 줍니다.

Multiple 셀렉터를 사용하기 위해서 id값과 태그사이에 ','로 구분하였습니다. 뒤에 테투리 색을 설정하는 css문을 작성해 줍니다.

jQuery를 적용한 후의 HTML 화면

적용된 화면을 보시면, id값이 content인 p태그의 내용과, div태그에 파란색 테두리가 생긴것을 볼수 있습니다.

 

다른 유형의 예를 한가지 더 보도록 하겠습니다.

jQuery를 적용하기 위한 소스코드

위의 코드에서 jQuery문만 수정하였습니다.

이 예제에서는 div태그 중 class가 myclass인 개체를 찾아서 테두리를 파란색으로 변경하는 코드입니다.

$("div.myClass").css("border", "2px solid blue")를 통해서 작성해줍니다.

jQuery를 적용한 후의 HTML 화면

이렇게 두가지의 div중에 class가 myClass인 부분에만 파란색 테두리로 변경된 것을 확인할수 있습니다.

이처럼 Multiple 셀렉터를 사용하면 한가지 태그중에 특정 ID나 Class값을 지정해서 변환할수 있습니다.

 

---

저번 포스팅에 이어서 오늘은 jQuery의 기본적인 셀렉터인 Class, Multiple 셀렉터에 대해서 정리해보았습니다.

jQuery를 처음 접하는 분들에게 가장 기본이 되는 부분이기때문에 잘 숙지하여 앞으로 코딩할때 많은 도움이 되셨으면 좋겠습니다.

 

미래의 개발자, 주니어 개발자 여러분들 화이팅입니다.!!