다음 예제는 context 객체를 활용한 자기 자신의 태그의 내용을 출력하는 예제입니다.
기존의 $(‘h1’).text() 이런식이였다면 이번에는 두 번째 매개변수를 this로 놔서 자기자신의 값을 가져오게 합니다.
$(‘h1’, this).text();
<!DOCTYPE html>
<html>
<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();
var paragraph = $('p', this).text();
//출력합니다.
alert(header + '\n' + paragraph);
});
});
</script>
</head>
<body>
<div>
<h1>Header-0</h1>
<p> para</p>
</div>
<div>
<h1>Header-1</h1>
<p> para</p>
</div>
<div>
<h1>Header-2</h1>
<p> para</p>
</div>
</body>
</html>
출력화면
클릭한 부분의 h1과 p가 출력이 됩니다.
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - window객체를 활용하며 무한 스크롤 구현하기 (0) | 2014.10.18 |
|---|---|
| jquery - keyup메소드를 이용한 글자수세기프로그램 만들기 (0) | 2014.10.11 |
| jquery - delegate 방법을 사용한 이벤트 연결 범위 한정 (0) | 2014.10.11 |
| jquery - 기본 이벤트를 제거하고 이벤트 전달 막는 법 2가지 (0) | 2014.10.11 |
| jquery - on메소드를 이용한 이벤트 연결 (0) | 2014.10.11 |
| Jquery - $.extend 메소드 사용법 (0) | 2014.09.12 |
| Jquery - $.each 메소드 사용법 두번째 (0) | 2014.09.12 |
| Jquery - $.each 메소드 사용법 (0) | 2014.09.12 |