일반적으로 이벤트와 함께 사용하는 매개변수 context는 selector가 적용하는 범위를 한정
예) Div 태그를 클릭했을 때 클릭된 div 태그 내부의 h1 태그와 p태그가 가지는 내용을 출력 방법
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0px; padding: 0px }
div
{
margin: 5px; padding: 3px;
border: 3px solid black;
border-radius: 10px;
}
</style>
<script src = "${pageContext.request.contextPath}/resources/js/jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
var header = $("h1", this).text(); // this를 제외하고 쓸 경우 모든 h1, p 태그의 text값이 출력
var paragraph = $("p", this).text();
alert(header + "\n" + paragraph);
});
});
</script>
</head>
<body>
<div>
<h1>Header 1</h1>
<p>Paragraph</p>
</div>
<div>
<h1>Header 2</h1>
<p>Paragraph</p>
</div>
<div>
<h1>Header 3</h1>
<p>Paragraph</p>
</div>
</body>
</html>
출처: 모던 웹을 위한 자바스크립트 & 제이쿼리
'JAVASCRIPT > JQUERY' 카테고리의 다른 글
| [Jquery] 이벤트 발생 객체 안에서 한정된 선택자 찾기 (0) | 2018.03.08 |
|---|---|
| [Jquery]Ajax 보조 메서드 활용(serialize(),serializeArray(),param()) (0) | 2018.02.22 |
| [Jquery]Select에서 선택된 option value -Jquery 입력 양식 필터 선택자 (0) | 2018.02.19 |
| [Jquery]Mask Plgin 사용 (0) | 2018.02.01 |