컨텍스트
- $(선택자,[컨텍스트])
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').css('border', '2px solid blue');
$('.box div').on('click', function(){
$('p', this).css('font-size', '+=3px');
})
$('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>