과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi
15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분
15.1 문서객체의클래스속성추가 addclass( 클래스 _ 속성 _ 값 ) / addclass( 함수 ) 문서객체에 class 속성을추가하는메소드 코드 15-1, 15-2 $('h1').addclass('item'); <h1> 태그에 class = item 속성을추가함 코드 15-3 addclass( ) 의인자로함수를전달하여 class 속성을지정함 $('h1').addclass(function (index) { return 'class' + index; });
15.2 문서객체의클래스속성제거 removeclass( 클래스 _ 속성 _ 값 ) 해당 class 속성을제거하는메소드 코드 15-4, 15-5 $('h1').removeclass('select'); 속성값이 select 인클래스속성을제거함 removeclass( ) 매개변수에아무것도입력하지않으면, 문서객체의모든클래스속성을제거함
15.3 문서객체의속성검사 attr( ) 문서객체의속성과관련된모든기능을제공하는메소드 코드 15-6, 15-7 var src = $('img').attr('src'); <img> 태그중 src 속성의값을 src 변수에담는다. 첫번째발견한 <img> 태그를선택한다. ( 주의 ) jquery에서값을얻어오는메소드의경우는일반적으로첫번째선택된문서객체에대해서만동작한다.
15.4 문서객체의속성추가 문서객체에속성을추가할때에도 attr( ) 메소드를사용함 세가지형태 (1) $(selector).attr(name, value); (2) $(selector).attr(name, function(index, attr){ }); 속성의값이함수에의한결정됨 (3) $(selector).attr(object); 인자 object: 속성이름과값쌍들로이루어진객체
15.4 문서객체의속성추가 (1) 번형태 코드 15-9 $( img ).attr( width, 200); 모든 <img> 태그에 width= 200 속성을추가함
15.4 문서객체의속성추가 (2) 번형태 코드 15-10 $('img').attr('width', function (index) { return (index + 1) * 100; }); => 첫번째 <img> 태그의 width 속성값은 100 => 두번째 <img> 태그의 width 속성값은 200 => 세번째 <img> 태그의 width 속성값은 300
15.4 문서객체의속성추가 (3) 번형태 코드 15-11 $('img').attr({ width: function (index) { return (index + 1) * 100; }, height: 100}); => width 속성과 height 속성을 <img> 태그에추가함
15.5 문서객체의속성제거 removeattr(name) 문서객체의속성을제거하는메소드 코드 15-12, 15-13 $('h1').removeattr('data-index'); 모든 <h1> 태그의 data-index 속성을제거함
15.6 문서객체의스타일검사 css( ) 스타일과관련된모든기능을수행하는메소드 코드 15-14, 15-15 var color = $('h1').css('color'); 첫번째 <h1> 태그의 color 스타일속성의값을얻어옴 background-color 스타일속성의경우아래둘다가능함 (1) css( background-color ) (2) css( backgroundcolor )
15.7 문서객체의스타일추가 문서객체에스타일을추가하는 3 가지형태 (1) $(selector).css(name, value); (2) $(selector).css(name, function(index, currentvalue) { }); 함수를이용해서스타일속성의값을결정함 index: 선택된태그의인덱스 currentvalue: 현재선택된태그의 name 스타일속성의값 (3) $(selector).css(object) object: 스타일속성과값의쌍들로이루어진객체
15.7 문서객체의스타일추가 (1) 번형태 코드 15-17 $('h1').css('color', 'red');
15.7 문서객체의스타일추가 (2) 번형태 코드 15-18 var color = ['red', 'white', 'purple']; // 문서객체의스타일을변경합니다. $('h1').css('color', function (index) { return color[index]; }); => 함수가 color 스타일속성의값을결정함
15.7 문서객체의스타일추가 (3) 번형태 코드 15-9 var color = ['red', 'white', 'purple']; // 문서객체의스타일을변경합니다. $('h1').css( { color: function (index) { return color[index]; }, backgroundcolor: black } ); => color 와 background-color 스타일속성의값을설정함
15.8 문서객체의내부검사 문서객체의내부를검사하는메소드 html() 문서객체의내부글자와관련된모든기능을수행함 HTML 태그를인식해서가져옴 문서객체의 innerhtml와관련있음 text() 문서객체의내부글과와관련된모든기능을수행함 HTML 태그를무시하고스트링 ( 텍스트 ) 만가져옴 HTML 태그문서객체의 textcontent와관련있음
15.8 문서객체의내부검사 코드 15-21 var html = $('h1').html(); 첫번째 <h1> 태그의내부내용물을가져옴 HTML 태그가포함되어있다면이를인식하여 HTML 태그도가져옴 코드 15-22 var text = $('h1').text(); 모든 <h1> 태그의내부텍스트를가져옴 HTML 태그가있다면무시하고텍스트만가져옴
15.9 문서객체의내부추가 문서객체의내부내용물추가방법 (1) $(selector).html(value) / $(selector).text(value); (2) $(selector).html(function(index, currenthtml) { }); $(selector).text(function(index, currenttext) { });
15.9 문서객체의내부추가 코드 15-23, 15-24 $('div').html('<h1>$().html() Method</h1>'); 모든 <div> 태그에내부내용물을설정함 <h1> 태그를인식하여, <h1> 태그를생성하여 DOM 트리의 <div> 아래에붙인후그아래에 $().html() Method 를가지는텍스트노드를붙인다. 코드 15-25 $( div ).text( <h1>$().html() Method</h1> ); <h1> 을태그로인식하지않고, 텍스트로인식하여전체가텍스트노드로서 <div> 태그의내부내용물이된다.
15.9 문서객체의내부추가 코드 15-26 $('div').html(function (index) { return '<h1>header-' + index + '</h1>'; }); => 함수를이용해서내부내용물을결정함 코드 15-27, 15-28 $('h1').html(function (index, html) { return ' ' + html + ' '; }); => 모든 <h1> 태그의현재내용물양쪽에별표를붙여서다시 <h1> 태그의내용물로설정함
15.10 문서객체제거 문서객체제거메소드 remove() 선택된문서객체를제거함 empty() 선택된문서객체의내부에들어있는모든문서객체를제거함 코드 15-29, 15-30 $('h1').first().remove(); 첫번째 <h1> 태그를제거함 코드 15-31 $('div').empty(); <div> 태그내부의모든문서객체가제거됨
15.11 문서객체생성 (1) 문서객체의 2 종류 (1) 텍스트노드를갖는문서객체 (2) 텍스트노드를갖지않는문서객체 문서객체생성 $( ) 메소드를이용함
15.11 문서객체생성 (1) 코드 15-32, 15-33 $('<h1></h1>'); <h1> 문서객체생성 코드 15-34 $('<h1></h1>').html('hello World..!'); <h1> 태그내부에텍스트노드생성 코드 15-35 $('<h1></h1>').html('hello World..!').appendTo('body'); <h1> 태그내부에텍스트노드를생성하여, <body> 태그에붙임
15.11 문서객체생성 (1) 코드 15-36 $('<h1>hello World..!</h1>').appendTo('body'); $( ) 안에, 텍스트내용을직접넣을수도있다.
15.12 문서객체생성 (2) 텍스트노드를갖지않는문서객체생성 $( ) 와 attr( ) 메소드이용 코드 15-37 $( img ): img 태그선택 $('<img />').attr('src', 'Chrysanthemum.jpg').appendTo('body'); <img> 태그를생성하고, src 속성을지정한후 <body> 태그에붙임 코드 15-38 $('<img />', { src: 'Chrysanthemum.jpg', width: 350, height:250 }).appendto('body'); }); $( ) 메소드의두번째인자로속성을지정하는객체를넣어줌
15.13 문서객체삽입 (1) 선택된문서객체 A 를인자로들어온문서객체 B 에삽입하는메소드 $(A).appendTo(B) A를 B의내부의뒤부분에추가함 (A가 B의자식이됨 ) $(A).prependTo(B) A 를 B 의내부의앞부분에추가함 (A 가 B 의자식이됨 ) $(A).insertAfter(B) A 를 B 뒤에추가함 (A 가 B 의형제가됨 ) $(A).insertBefore(B) A 를 B 의앞에추가함 (A 가 B 의형제가됨 )
15.14 문서객체삽입 (2) 선택된문서객체 A 에인자로들어온문서객체 B 를삽입하는메소드 $(A).append(B) B를 A의내부의뒤부분에추가함 (B가 A의자식이됨 ) $(A).prepend(B) B 를 A 의내부의앞부분에추가함 (B 가 A 의자식이됨 ) $(A).after(B) B 를 A 의뒤에추가함 (B 가 A 의형제가됨 ) $(A).before(B) B 를 A 의앞에추가함 (B 가 A 의형제가됨 )
15.14 문서객체삽입 (2) append( ) 메소드사용방법 (1) $(selector).append(content, content,, content); content: 문자열, 또는문서객체가들어갈수있음 선택된문서객체내부의뒤부분에, content 들을추가함 예 $( div ).append( h1 ); // 모든 <div> 뒤부분에 h1 텍스트노드추가 $( div ).append( <h1> ); // 모든 <div> 뒤부분에 <h1> 태그추가 $( div ).append( <h1>csh</h1> ); // 모든 <div> 뒤부분에태그 + 텍스트노드추가 (2) $(selector).append(function(index) { }); 함수를이용하여추가할문서객체를생성함
15.14 문서객체삽입 (2) 코드 15-39, 15-40 $('body').append(h1, h2, h1, h2); <body> 태그내부의뒷부분에변수 h1 과 h2 에담긴내용을추가함 코드 15-41, 15-42, 15-43 코드연구
15.15 문서객체이동 문서객체이동방법 기존의문서객체를선택한후, 문서객체삽입메소드를사용함 코드 15-44, 15-45 $( <img /> ).appendto( body ); // 생성해서붙임 $('img').first().appendto('body'); 첫번째 <img> 태그를선택하여, <body> 태그내의뒤부분으로옮긴다. 코드 15-46 이미지크기조정후 1초에한번씩첫번째이미지를뒤로옮김 (setinterval( ) 이용 )
15.16 문서객체복제 코드 15-47 $('div').append($('h1')); 모든기존의 <h1> 태그를선택하여 <div> 태그내부뒤부분으로이동시켜라 문서객체복제메소드 clone( ) 문서객체를복제함
15.16 문서객체복제 clone( ) 메소드형태 (1) $(selector).clone( ) (2) $(selector).clone(boolean dataandevents) 이벤트핸들러도복제될지말지지정함 코드 15-48 $('div').append($('h1').clone()); 모든 <h1> 태그들을복제하여, <div> 태그뒤부분에추가함