[제이쿼리] 속성 선택자에 대해 알아보자

속성 선택자

제이쿼리의 선택자는 CSS의 선택자와 의미가 같은 게 많습니다. 오늘은 두번째 시간입니다.속성 선택자를 알아볼까요.

1. 기본 선택자 보러가기
2. 속성 선택자
3. 필터 선택자 보러가기
4. 탐색 선택자 보러가기

---

■ 선택자의 기본 형식

$("선택자")
$("#gnb")

■ 속성 선택자

선택자 종류	설명
요소[속성]	$("span[class]")	span 요소 중 class속성을 가지고 있는 요소를 선택합니다.
요소[속성='값']	$("span[class='abc']")	span 요소 중 class가 'abc'인 요소를 선택합니다.
요소[속성!='값']	$("span[class!='abc']")	span 요소 중 class가 'abc'가 아닌 요소를 선택합니다.
요소[속성~='값']	$("span[class~='abc']")	span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다.'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg_abc'는 선택되지 않습니다.
요소[속성*='값']	$("span[class*='abc']")	span요소 중 class가 'abc'를 포함하는 요소를 모두 선택합니다. 'bg abc', 'bg_abc' 모두 선택합니다.
요소[속성|='값']	$("span[class|='abc']")	span요소 중 class가 'abc'나 'abc-'로 시작하는 요소를 선택합니다.
요소[속성^='값']	$("span[class^='abc']")	span요소 중 class가 'abc'로 시작하는 요소를 선택합니다.
요소[속성$='값']	$("span[class$='abc']")	span요소 중 class가 'abc'로 끝나는 요소를 선택합니다.

■ 예시

코드펜을 이용해서 작업했습니다. CDN방식입니다만, 코드펜으로는 CDN활용법을 확인하긴 힘드니깐 CDN쓰는법만 보여드릴게요.

<script src="jquery-3.6.1.min.js"></script>