[제이쿼리] jQuery 속성 탐색 선택자(selector)

 

제이쿼리(jQuery) 위치 탐색 선택자(selector)

---

안녕하세요? 장장스입니다.

탐색 선택자 중 위치 탐색 선택자에 대한 포스팅입니다. 속성 탐색 선택자는 선택한 요소에 속성이 일치하는지 혹은 속성에 내가 원하는 값이 포함되어있는지를 알아 볼수 있는 선택자입니다.

 

속성 탐색 선택자()

---

종류	설명
$(["요소 선택[속성]")	선택한 요소 중 지정한 속성이 포함된 요소만 선택합니다.
$("요소 선택[속성^=값]")	선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택합니다.
$("요소 선택[속성$=값]")	선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택합니다.
$("요소 선택[속성*=값]")	선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택합니다.
$(":type 속성 값")	input 요소 중 type 속성 값이 일치하는 요소만 선택합니다.

 

 

 

 

○적용 예시

 

▼javascript

	$(function(){
		$("#wrap01 a[target]")
		.css({"color":"#f00"});

		$("#wrap01 a[href^=https]")
		.css({"color":"#0f0"});

		$("#wrap01 a[href$=net]")
		.css({"color":"#00f"});

		$("#wrap01 a[href*=google]")
		.css({"color":"#000"});

		$("#form01 :text")
		.css({"background-color":"#ff0"});

		$("#form01 :password")
		.css({"background-color":"#0ff"});
	});

▼html

<div>
	<div id="wrap01">
		<p><a href="zangzangs.tistory.com/" target="zzs">zangzangs</a></p>
		<p><a href="http://daum.net">Google</a></p>
		<p><a href="http://google.co.kr">Daum</a></p>
		<p><a href="https://naver.com">Naver</a></p>		
	</div>
	<form action="#" method="get" id="form01">
		<p>
			<label for="user_id">아이디</label>
			<input type="text" name="user_id" id="user_id">
		</p>
		<p>
			<label for="user_pw">비밀번호</label>
			<input type="password" name="user_pw" id="user_pw">
		</p>
	</form>
</div>

▼실행결과

zangzangs

Google

Daum

Naver

아이디비밀번호

 

 

 

속성 탐색 선택자(2)

---

종류	설명
$("요소 선택:[visible | hidden]")	선택한 요소 중 숨겨진 상태 또는 보이는 상태의 요소만 선택합니다.
$(":selected")	선택 상자 중 현재 선택된 옵션 요소만 선택합니다.
$(":checked")	체크 박스 또는 라디오 버튼 요소 중 체크된 요소만 선택합니다.

 

 

○적용 예시

 

▼javascript

	$(function(){
		$("#wrap02 p:hidden").css({
				"display":"block",
				"background":"#ff0"
		});

		var zzs1 = $("#zzszone1 :selected").val( );
		console.log(zzs1);
		
		var zzs2 = $("#zzszone2 :checked").val( );
		console.log(zzs2);

		var zzs3 = $("#zzszone3 :checked").val( );
		console.log(zzs3);
	});

▼html

<div>
	<div id="wrap02">
		<p>conteent1</p>
		<p style="display:none">conteent2</p>
		<p>conteent3</p>
	</div>
	<form action="#">
		<p id="zzszone1">
		<select name="course" id="course">
				<option value="opt1">옵션1</option>
				<option value="opt2" selected>옵션2</option>
				<option value="opt3">옵션3</option>
		</select>
		</p>
		<p id="zzszone2">
				<input type="checkbox" name="hobby1" value="구독"> 구독
				<input type="checkbox" name="hobby2" value="좋아요"> 좋아요
				<input type="checkbox" name="hobby3" value="알림설정" checked> 알림설정
		</p>
		<p id="zzszone3">
				<input type="radio" name="gender" value="남성"> 남성
				<input type="radio" name="gender" value="여성" checked> 여성
		</p>
	</form>
</div>

▼실행결과

conteent1

conteent2

conteent3

옵션1 옵션2 옵션3

구독

좋아요

알림설정

남성

여성

 

 

Post

---

• jQuery 배열(array) 메서드
• jQuery 콘텐츠 탐색 선택자(selector)
• jQuery 위치 탐색 선택자(selector)
• jQuery 인접 관계 선택자(selector)
• jQuery 직접 선택자(selector)

References

---

• 생활코딩: 선택자
• w3schools
• TCP school

 

 

 

 

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)