<!DOCTYPE html>
<html lang="en">
<head>
<style>
* { margin: 0px; padding: 0px }
div
{
margin: 5px; padding: 3px;
border: 3px solid black;
border-radius: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("div").click(function(){
/* 이벤트가 발생한 문서 객체 안에서 한정된 태그를 찾고 싶을 경우 */
var header = $("h1", this).text();// 두번째 매개변수 자리가 이벤트 발생 객체(this)를 한정
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]Ajax 보조 메서드 활용(serialize(),serializeArray(),param()) (0) | 2018.02.22 |
|---|---|
| [Jquery]selector 범위를 한정하는 context - $(selector, context) 사용 (0) | 2018.02.20 |
| [Jquery]Select에서 선택된 option value -Jquery 입력 양식 필터 선택자 (0) | 2018.02.19 |
| [Jquery]Mask Plgin 사용 (0) | 2018.02.01 |