[JQuery] 그외 선택자

그 외 선택자

콘텐츠 탐색 선택자

요소나 속성의 포함 여부에 따라 특정요소를 선택.

종류	사용법	설명
$("요소선택:contains(텍스트)")	$("li:contains("내용")")	<li>요소 중 "내용"이라는 텍스트를 포함하는 요소만 선택
$("요소선택").contents()	$("p").contents()	선택한 요소의 하위 요소 중 가장 가까운 하위 요소 선택
$("요소선택:has(요소명)") $("요소선택").has(요소명)	$("li:has("span")")	<li>요소 중 <span>을 포함하는 요소만 선택
$("요소선택:not(:제외요소)") $("요소선택").not(:제외요소)	$("li:not(:first)")	<li>요소 중 첫번째 요소만 제외하고 선택
$("요소선택").filter(필터요소)	$("li").filter(".class2")	<li>요소 중 class 속성값이 "class2"인 요소만 선택
$("요소선택1").find(요소선택2)	$("li").find("strong")	<li>요소에 하위 요소인 <strong>만 선택
$("요소선택1").closeest("요소선택2")	$("strong").closest("div")	<strong>을 감싸는 상위 <div> 요소 중 가장 가까운 상위요소를 선택
end()	$("li").children("a").end()	필터링이 일어나기 이전의 요소인 <li>가 선택된다

end()

<div id="box">
    <span>
    	<strong>
        	<a href="#">Content</a>
        </strong>
    </span>
</div>

$("#box").find("span").find("strong").css("border", "1px solid red")
    .end().css("background-color","yellow");

- find 이전의 <span>태그의 배경을 노란색으로 지정.

- <div id="box">에서 find()를 이용해 2번의 필터링 발생 > 최종적으로 <strong>요소가 선택됨.

여기에 border를 적용했고,

end()를 이용해 <strong>을 필터링하기 이전 요소인 <span>을 선택해서 배경을 노란색으로 적용

종류	사용법	설명
is()	$("li").children().is("p")	특정요소가 선택요소와 관련값 또는 현재 상태 등을 확인하고 true / false 값을 리턴한다. <li>가 의 하위요소가 <p>인지
noConflict()	var m = $.noConflict(); m("h1").width(100)	- $ 식별자 충돌 방지 - "$"문자대신 임의의 문자를 지정해서 사용가능. ex) $ 대신에 m을 쓴다
get() , get(숫자)	$("li").get(0).style.color = 'red';	선택한 / (숫자) 에 해당하는 모든요소를 가져온다. ex) <li>로 선
each() / $.each()	$("li").each( function() { ... }); $.each($("li").function() { ... });	선택한 요소들을 각각 순차적으로 접근해 선택 <foreach문을 생각하면 될까나?>
map()	배열 객체.map(함수)	배열 데이터를 변환시켜 다시 새로운 배열 객체를 만든다