jQuery는 HTML엘리먼트와 속성들을 변화시키고 다룰 수 있는 파워풀한 메서드를 가지고 있습니다.
즉 DOM을 jQuery를 사용하여 쉽게 조작할 수 있습니다.
DOM이란?
DOM은 HTML과 XML 문서에 액세스하기 위한 표준을 정의하는 W3C 문서 객체 모델입니다.
W3C Document Object Model (DOM)은 프로그램과 스크립트를 동적으로 실행하고 문서내의 컨텐츠와, 구조, 스타일을 업데이트 할 수 있도록 하는 플랫폼이자 언어중립적인 인터페이스입니다.
컨텐츠 얻기 Get Contents
DOM 조작을 위한 세 가지 간단하지만 유용한 방법은 다음과 같습니다.
1. text() : 설정하거나 반환 선택된 요소의 텍스트 내용
2. html() : (HTML 태그를 포함) 선택된 요소의 내용을 설정하거나 반환
3. val() : 폼 필드의 값을 설정하거나 반환
[예제1]Text와 HTML 예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>
[예제2]val 예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
<button>Show Value</button>
</body>
</html>
[예제3]attr 예제
속성값을 얻으려면 attr()을 사용하면 됩니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Show href Value</button>
</body>
</html>
'WEB_TECH > jquery' 카테고리의 다른 글
| [jQuery] 8. HTML Set (0) | 2013.04.22 |
|---|---|
| [jQuery] 6. jQuery method chaining (0) | 2013.04.22 |
| [jQuery] 5. jQuery 이펙트 (0) | 2013.04.22 |
| [jQuery] 4. jQuery이벤트 (0) | 2013.04.22 |
| [jQuery] 3. jQuery 셀렉터 (0) | 2013.04.16 |
| [jQuery] 2. jQuery 문법 (0) | 2013.04.11 |
| [jQuery] 1. jQuery 시작하기 (0) | 2013.04.11 |
