[jQuery] add(), is()

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

'JS 관련 > JQuery' 카테고리의 다른 글

[jQuery] 이벤트 전파( stopPropagation(), preventDefault(), return false ) (0)	2022.02.17
[jQuery] DOM탐색 메서드 (0)	2022.02.16
[jQuery] find(), children(), parent(), next() (0)	2022.02.14
[jQuery] checkbox( 전체선택 ) (1)	2022.02.12
[jQuery] submit 활용해보기 (0)	2022.02.11

'JS 관련 > JQuery' 카테고리의 다른 글

티스토리툴바