jQuery DOM 제어 : JavaScript
본 포스트는 jQuery 를 깊이있게 다루지 않았다.
jQuery 공식 사이트에 자세히 설명되있어 간단한 몇 부분만 골라 샘플과 함께 설명하도록 하겠다.
<html>
<head>
<script type="text/javascript">
jQuery(function() {
// ① form_one 접근
var form = jQuery("#form_one");
// ② form_one 폼의 ele 접근하여 값 one 을 출력함.
alert(jQuery("#ele",form).val());
// ③ form_one 폼의 ele 접근하여 value 값을 Syaku blog 변경함.
jQuery("#ele",form).val("Syaku blog");
// ④ form_one 폼의 ele 접근하여 id 속성 값 ele 를 출력함.
alert(jQuery("#ele",form).attr("id"));
// ⑤ form_one 폼의 ele 접근하여 id 속성 값 choi 로 변경함.
jQuery("#ele",form).attr("id","choi");
// ⓐ div 엘리먼트 접근
var div = jQuery("div");
// ⓑ innerHtml 를 이용하여 소스 출력
alert(div.html());
// ⓒ innerHtml 를 이용하여 소스 변경
div.html("정말 쉽죠?");
// ⓓ 스타일시트 속성 변경
div.css("border","3px solid #000");
// ⓔ 체크박스 전체선택
jQuery("#form_two #chk").click(function() {
// form_two 폼의 ele 속성에 checkbox 엘리먼트에 접근하여 모두 반복시킴.
jQuery("#form_two input[@name='ele']:checkbox").each(function (i) {
(this.checked == true) ? this.checked = false : this.checked = true;
});
});
});
</script>
</head>
<body>
<form id="form_one">
텍시트 박스 : <input type="text" id="ele" value="one" /> <br />
</form>
<div>강력한 jQuery</div>
<form id="form_two">
<input type="button" id="chk" value="전체선택" />
1번 체크박스 : <input type="checkbox" name="ele" value="1" /> <br />
2번 체크박스 : <input type="checkbox" name="ele" value="2" /> <br />
3번 체크박스 : <input type="checkbox" name="ele" value="3" /> <br />
4번 체크박스 : <input type="checkbox" name="ele" value="4" /> <br />
</form>
</body>
</html>
① id 속성에 접근하기 위해 # 을 사용해야 하며, 엘리먼트는 태그소스 그대로 사용하면 된다. (ⓐ 참조)
② value 속성 값을 얻기 위해 val() 사용한다. val("내용") 할 경우 값을 변경 및 삽입한다.
④ 접근자 속성을 제어하기 위해 attr("속성명") 사용한다. attr("속성명","속성값") 할 경우 속성 값을 변경 및 삽입한다.
ⓓ 스타일시트 속성을 변경하기 위해 css("별칭","값") 사용한다.
ⓔ 난이도가 있는 작업이다. 접근할 때 뛰어쓰기를 구분하여 자식의 속성이나 엘리먼트에 접근할 수 있다.
// form_two 폼의 chk 속성에 접근하여 click 액션이 이루어 질 경우 함수가 실행된다.
jQuery("#form_two #chk").click(function() {
1. 접근법에 대한 이해
DOM 특성상 모든 접근 순서는 위에서 아래이다. 다음 소스를 참조한다.
<div>
<p>안녕하세요. 최석균입니다.</p>
<h1>블로그</h1>
<div id="good">
<span>하하하</span>
</div>
</div>
p 엘리먼트에 접근하기 위한 순서는 다음과 같다. div > p
span 엘리먼트에 접근하기 위한 순서는 다음과 같다. div > div > span
jQuery 이용하면 다음과 같다.
jQuery("div p"); // p 엘리먼트 접근
jQuery("div div span") // span 엘리먼트 접근
혹은
jQuery("#good span"); // id 속성을 이용한 span 엘리먼트 접근
접근자 별칭은 스타일시트 형식과 같다.
id 는 # 별칭을 사용하고 class 는 . 닷 별칭을 사용한다.
여러 개의 엘리먼트에 접근하려면? , 콤마를 사용한다.
jQuery("div div span, #good span");
그럼 배열로 리턴받게 되며 jQuery().each() 를 이용하여 반복적으로 제어할 수 있다.
내용 담고있는 득정한 객체에 접근하려면 jQuery("접근자","객체"); 하면 된다. 아래의 소스를 참조한다.
<div>
<div id="good">
<p>안녕하세요. 최석균입니다.</p>
<h1>블로그</h1>
<span>하하하</span>
</div>
</div>
-- good id 속성에 접근 후 그 자식에 접근하기
var good = jQuery("#good");
var child_p = jQuery("p",good);
var child_h1 = jQuery("h1",good);
var child_span = jQuery("span",good);
위와 같이 접근하려는 특정 엘리먼트가 있을 경우
객체로 담고 객체를 이용해 자식 엘리먼트에 접근하는 것이 더 효율적이다.
그럼 상위 즉, 자식이 부모를 접근하기 위한 방법은 무엇일까?
DOM 개념을 이해한다면 jQuery 도움말(Traversing 도움말)을 참조하면 제어할 수 있을 것이다.
자바스크립트와 유사한 parent 를 설명하도록 하겠다.
<div>
<h1>블로그</h1>
<div id="good">
<p>안녕하세요. 최석균입니다.</p>
<span>하하하</span>
</div>
</div>
span 엘리먼트에 접근 후 부모 div 엘리먼트에 접근하기.
var target = jQuery("#good span");
target.parent().css("border","3px solid #000");
** jQuery 참조 도움말
jQuery Core : http://docs.jquery.com/Core
Selectors : http://docs.jquery.com/Selectors
Attributes : http://docs.jquery.com/Attributes
Traversing : http://docs.jquery.com/Traversing
CSS : http://docs.jquery.com/CSS
'개발노트 > jQuery' 카테고리의 다른 글
| jQuery Syaku LightBox : 이미지 라이트박스 자바스크립트 (0) | 2011.08.16 |
|---|---|
| jQuery SimpleTree Drag&Drop plugin (0) | 2010.10.21 |
| jQuery Action : JavaScript (1) | 2010.06.01 |
| jQuery 기본기 : JavaScript (4) | 2009.08.24 |