[제이쿼리] jQuery 콘텐츠 탐색 선택자(selector)

 

제이쿼리(jQuery) 콘텐츠 탐색 선택자(selector)

---

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

콘텐츠 탐색 선택자에 대한 포스팅입니다.

 

 

콘텐츠 탐색 선택자(1)

---

종류	설명
$("요소 선택:contains(텍스트)")	지정한 텍스트를 포함하는 요소만 선택한다.
$("요소 선택").contents()	선택한 요소의 하위 요소 중 1 깊이의 텍스트와 태그 노드를 선택한다.
$("요소 선택:has(요소명)") $("요소 선택").has("요소명")	선택한 요소 중 지정한 태그를 포함하는 요소만 선택한다.
$("요소 선택:not(요소명)") $("요소 선택").not(제외할 요소 선택)	선택한 요소 중 지정한 요소만 제외한 채 선택한다.
$("요소 선택").탐색 선택자().end()	필터링되기 이전의 선택자가 적용 되도록 한다.

 

 

▼javascript

	$(function(){
		$("#inner_zzs1 p:contains(내용1)")
		.css({"background-color":"#ff0"});

		$("#inner_zzs1 p:has(strong)")
		.css({"background-color":"#0ff"});

		$("#outer_wrap01").contents( )
		.css({"border":"1px dashed #00f"});

		$("#inner_zzs1 p").not(":first")
		.css({"background-color":"#0f0"});

		$("#inner_zzs1 p").eq(2).end()
		.css({"color":"#f00"});
	});

▼html

	<div id="outer_wrap01">
		<h1>콘텐츠 탐색 선택자</h1>
		<section id="inner_zzs1">
			<h1>contains탐색자, contents탐색자, has탐색자</h1>
			<p><span>내용1</span></p>
			<p><strong>내용2</strong></p>
			<p><span>내용3</span></p>
		</section>
		<section id="inner_zzs2">
			<h1>not( ), end( )</h1>
			<p>내용4</p>
			<p>내용5</p>
			<p>내용6</p>
		</section>
	</div>

▼실행결과 

콘텐츠 탐색 선택자

contains탐색자, contents탐색자, has탐색자

내용1

내용2

내용3

not( ), end( )

내용4

내용5

내용6

 

 

 

콘텐츠 탐색 선택자(2)

---

종류	설명
$("요소 선택").find("하위 요소 중 필터링할 요소 선택")	선택한 하위 요소 중에서 find()로 필터링한 요소만 선택합니다.
$("요소 선택").filter("선택한 요소 중 필터링할 요소 선택")	선택한 요소 중에서 filter()로 필터링한 요소만 선택합니다.

 

▼javascript

	$(function(){
		$("#inner_zzs001").find(".txt1")
		.css({"background-color":"#ff0"});

		$("#inner_zzs001 p").filter(".txt2")
		.css({"background-color":"#0ff"});

		$("#inner_zzs002 p").filter(function(index, obj){
			console.log(index);
			return index % 2 == 0;
		})
		.css({"background-color":"#0f0"});    
	});

▼html

	<div id="outer_wrap02">
		<h1>콘텐츠 탐색 선택자</h1>
		<section id="inner_zzs001">
			<h2>find탐색자, filter탐색자</h2>
			<p class="txt1">내용1</p>
			<p class="txt2">내용2</p>
		</section>

		<section id="inner_zzs002">
			<h2>filter(function)</h2>
			<p>index 0</p>
			<p>index 1</p>
			<p>index 2</p>
			<p>index 3</p>
		</section>
	</div>

▼실행결과 

콘텐츠 탐색 선택자

find탐색자, filter탐색자

내용1

내용2

filter(function)

index 0

index 1

index 2

index 3

 

 

 

콘텐츠 탐색 선택자(3)

---

종류	설명
$("요소 선택").is(":[checked | selected | visible | hidden | animated]")	선택한 요소의 상태가 지정 속성과 true를 반환하고, 그렇지 않으면 false를 반환한다.
$("요소 선택").is(":[checked | selected | visible | hidden | animated]")	is( ) 메서드는 선택한 요소의 상태가 지정 속성과 true를 반환하고, 그렇지 않으면 false를 반환한다.

▼javascript

	$(function(){
		var result_1 = $("#inner_z01 p")
		.eq(0).is(":visible");
		console.log(result_1);

		var result_2 = $("#inner_z01 p")
		.eq(1).is(":visible");
		console.log(result_2);

		var result_3 = $("#chk1").is(":checked");
		console.log(result_3);

		var result_4 = $("#chk2").is(":checked");
		console.log(result_4);
	});

▼html

<div id="outer_wrap03">
	<h1>is( )</h1>
	<section id="inner_z01">
		<h2>문단 태그 영역</h2>
		<p>내용1</p>
		<p style="display:none;">내용2</p>
	</section>
	
	<section id="inner_z02">
		<h2>폼 태그 영역</h2>
		<p>
			<input type="checkbox" name="chk1" id="chk1" checked>
			<label for="chk1">체크1</label>

			<input type="checkbox" name="chk2" id="chk2">
			<label for="chk2">체크2</label>           
		</p>
	</section>
</div>

▼실행결과 

is 메서드

문단 태그 영역

내용1

내용2

폼 태그 영역

체크1체크2

 

 

 

 

 

 

Post

---

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

 

 

References

---

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

 

 

---

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