[jQuery] 컨텍스트

고동이의 IT·2021년 11월 22일
0

컨텍스트

  • $(선택자,[컨텍스트])
    var myJquery1 = $(“p”);
    var myJquery2 = $(“p”, document.forms[2]);
    $(‘p’, this) -> this안에 p this는 p의 부모가 됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src = "../js/jquery-3.6.0.min.js"></script>

<script type="text/javascript">

$(function(){
	// 모든 p태그를 선택한다.
	$('p').css('border', '2px solid blue');
	
	// box클래스안의 div 안의 p태그를 선택한다.
	$('.box div').on('click', function(){
		// this는 div
		$('p', this).css('font-size', '+=3px');
	})
	
	// 첫번째form 내부의 p태그를 선택
	$('p', document.forms[0]).css('background' , 'yellow');
	
})


</script>
</head>
<body>

<div class="box">
	
	// 모든 p태그를 선택한다. <br>
	$('p').css('border', '2px solid blue');<br>
	
	// box클래스안의 div 안의 p태그를 선택한다.<br>
	$('.box div').on('click', function(){<br>
		// this는 div<br>
		$('p', this).css('font-size', '+=3px');<br>
	})<br>
	
	// 첫번째form 내부의 p태그를 선택<br>
	$('p', document.forms[0]).css('background' , 'yellow');<br>
	
	<br>
	
	<div>
	 <p>무궁화 꽃이 피었습니다.</p>
	</div>
	
	<p>흰 눈이 펄펄 내려옵니다.</p>
	
	<form>
	   <p>우리집 강아지는 뽀글 갱얼쥐</p>
	</form>
	
	<div>
	   <p>무궁화 꽃이 피었습니다</p>
	   
	</div>
	
</div>
</body>
</html>
profile
삐약..뺙뺙

0개의 댓글