[jQuery] add(), is()

JS 관련/JQuery

[jQuery] add(), is()

씨네 2022. 2. 15. 09:57

728x90

add() - 선택한 엘리먼트에 추가적으로 selector 표현식을 작성할 때 사용

is() - 선택한 엘리먼트들 중에 원하는 엘리먼트가 있는지 확인

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

	$(function(){
		$("p:eq(0)").add("span").css("color","red");
		
		$("div").children().click(function(){
			if($(this).prop("tagName") == "SPAN"){
				alert("span tag click!");
				$(this).css("color","darkblue");
			}
			
			if($(this).is("p")){
				$(this).css("background-color","pink");
			}
		});
		
		$("b").click(function(){
			$("p:eq(0)").add("span").css("color","red");
			$("div").children().css("background-color","");
		});
	});

</script>
</head>
<body>

	<div>
		<p>add()</p>
		<span>선택한 엘리먼트에 추가적으로 selector 표현식을 작성할 때 사용</span>
		<p>is()</p>
		<b>선택한 엘리먼트들 중에 원하는 엘리먼트가 있는지 확인</b>
	</div>

</body>
</html>

$("p:eq(0)").add("span").css("color","red");

첫번째 p태그에 span태그까지 color를 red로 변경합니다.

$("div").children().click(function(){
	if($(this).prop("tagName") == "SPAN"){
		alert("span tag click!");
		$(this).css("color","darkblue");
	}
			
	if($(this).is("p")){
		$(this).css("background-color","pink");
	}
});

div태그의 자식을 클릭하면 위의 함수가 실행됩니다.

우선 클릭한것의 태그이름이 SPAN이면 span tag click! 이라는 메세지를 출력하고 배경색을 다크블루로 변경합니다.

클릭한 태그가 p이면 그것의 배경색을 pink로 변경합니다.

위에서부터 순차적으로 클릭한 결과입니다.

$("b").click(function(){
			$("p:eq(0)").add("span").css("color","red");
			$("div").children().css("background-color","");
		});

b태그를 클릭하면 모든것을 처음으로 되돌립니다!

728x90