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

오늘은 jQuery의 기능중 한가지인 HTML DOM을 탐색하는 기능에 대해서 알아보겠습니다.

 

jQuery의 DOM은 CSS 셀렉터를 사용하고 있습니다. CSS에 사용한 표현식을 알고 있다면 보다 수월하게 셀럭터에 대해 이해 할 수 있습니다.

 

내가 원하는 요소를 찾기 위해서 $(Selector), jQuery(Selector)와 같은 표현식을 사용하는데, $는 jQuery의 축약어입니다. 

 

다음과 같이 DOM요소들을 선택할수 있습니다.

셀렉터의 종류	셀렉터 표현방법
All 셀렉터	$("*")
ID 셀렉터	$("#idName")
Element 셀렉터	$("elementName")
Class 셀렉터	$(".className")
Multiple 셀렉터	$("셀렉터1, 셀렉터2, 셀렉터3...")

 

---

반응형

1. All 셀렉터 

HTML DOM를 탐색하여 모든 요소를 배열형식의 jQuery 개체로 변환시킵니다.

jQuery를 적용하기 전의 HTLM 화면

위의 HTML화면에서 모든 태그 요소에 빨간 선을 표시하고 싶다면, 아래와 같이 작성해주시면 됩니다.

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

$(function () {})는 페이지의 HTML DOM이 모두 로드가 되면 실행이되는 함수입니다. 자바스크립트의 onload 메서드의 확장된 역할을 하고 있다고 생각하시면 됩니다.

함수 안에 $("*").css("border", "1px solid red");를 작성해줍니다.

모든 셀렉터를 선택하기 위해서 *을 사용하고 테두리를 그리고 색을 주기위해 .css("border", "속성")를 입력해 주시면 됩니다.

jQuery를 적용한 후의 HTML 화면

jQuery를 통해서 HTML에 있는 모든 태그 요소에 빨간 선이 표시된것을 확인 할 수 있습니다.

 

---

 

2. ID 셀렉터

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

jQuery를 적용하기 전의 HTLM 화면

위의 HTML화면에서 ID값이 content에 초록색 배경으로 표시하고 싶다면, 아래와 같이 작성해주시면 됩니다.

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

함수 안에 $("#content").css("background", "green") 을 작성해줍니다.

ID의 값을 설정하기 위해서 $()안에 '#'을 사용하고 HTML문에 ID의 값인 content를 작성해주면 됩니다.

jQuery를 적용한 후의 HTML 화면

jQuery를 통해서 HTML에 있는 ID값이 contnet인 요소의 배경이 초록색으로 표시된것을 확인 할 수 있습니다.

 

하지만, 코드를 보면 ID값이 content인 것이 두개가 존재하는데, 한가지만 적용된 것을 볼 수 있습니다. 그 이유는 동일한 ID값이 여러 개가 존재 할 경우에는 최상위에 있는 ID값을 선택해서 반환하기 때문입니다.

그 이유는, HTML에는 한 ID값만이 존재하는 것을 원칙으로 정했기 때문입니다. 만일, 동일한 값을 통해 접근을 하고 싶을 경우에는 class를 사용하길 권장합니다.

 

---

 

3. Element 셀렉터

자바스크립트의 getElementByTagName("tagName")와 비슷한 역할을 합니다.

HTML 안에 있는 여러 엘리먼트들 중에서 jQuery를 통해서 선택된 엘리먼트의 개체를 찾아서 변환해줍니다.

jQuery를 적용하기 전의 HTLM 화면

위의 HTML화면에서 div가 적혀있는 div 태그의 테두리 색을 파란색으로 바꾸고 싶다면, 아래와 같이 작성하면 됩니다.

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

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

엘리먼트를 선택해 주기 위해서 $()안에 변환시켜주고자하는 태그인 div를 작성하고 테두리를 그려주기위한 css문을 작성해줍니다.

jQuery를 적용한 후의 HTML 화면

div 태그에 테투리 색이 파란색으로 변경된것을 확인할수 있습니다.

 

태그 요소를 사용해서 jQuery를 설정하게되면 태그에 ID값이나 Class값이 설정이 되어있더라도 모든 태그 요소에 적용이 가능합니다. 

 

---

오늘은 jQuery의 기본적인 셀렉터인 All, ID, Element 셀렉터에 대해서 정리해보았습니다. 다음 포스팅에 나머지 Class, Multiple 셀렉터에 대해서 정리하도록 하겠습니다.

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

 

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

 

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

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

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ Class, Multiple 셀렉션 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑