2013/11/26 - [Web/jQuery] - 제이쿼리(jQuery) 문서 객체 조작 - #1
1. 문서 객체 내부 검사
- 기존의 자바스크립트에서 innerHTML, textContent 속성과 관련된 html() 메서드와 text() 메서드
- HTML 태그 인식 여부의 차이점을 가짐
메서드명 |
설명 |
html() |
문서 객체 내부의 글자와 관련된 모든 기능을 수행(HTML 태그 인식) |
text() |
문서 객체 내부의 글자와 관련된 모든 기능을 수행 |
<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { var html = $('h1').html(); alert(html); var text = $('h1').text(); alert(text); }); </script> </head> <body> <h1>Header0</h1> <h1>Header1</h1> <h1>Header2</h1> <h1>Header3</h1> <h1>Header4</h1> <h1>Header5</h1> </body>
2. 문서 객체 내부 추가
- 내부에 내용물을 추가하고 싶을 때 html() 메서드와 text() 메서드를 사용
- $(selector).html(value);
- $(selector).text(valeu);
- $(selector).html(function(index, html) {} );
- $(selector).text(function(index, html) {} );
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div').html('<h1>$().html() Method</h1>');
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div').text('<h1>$().thml() Method</h1>');
});
</script>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').html(function(index, html) {
return ' ▶ ' + html + '-' + index + ' ◀ ';
});
});
</script>
</head>
<body>
<h1>Header</h1>
<h1>Header</h1>
<h1>Header</h1>
</body>
3. 문서 객체 제거
- 문서 객체를 제거할 때는 remove() 메서드와, empty() 메서드를 사용
메서드명 |
설명 |
remove() |
문서 객체를 제거 |
empty() |
문서 객체 내부를 비움 |
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').first().remove();
});
</script>
</head>
<body>
<div>
<h1>Header0</h1>
<h1>Header1</h1>
</div>
</body>
<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div').empty(); }); </script>
4. 문서 객체 생성
- jQuery() 메서드는 선택자로 문서 객체를 선택하는 기능 이외에도 문서 객체를 생성하는 기능을 함
- 매개변수에 HTML 태그를 문자열로 넣음
- 생성한 문서 객체를 body 태그에 추가하려면 appendTo()메서드를 사용
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('<h1></h1>').html('Header1').css('color', 'red').appendTo('body');
$('<h1>Header2</h1>').css('color', 'blue').appendTo('body');
$('<img />').attr('src', 'desert.jpg').attr('width', 400).appendTo('body');
$('<img />', { src: 'tulip.jpg', width: 400 }).appendTo('body');
});
</script>
</head>
<body>
</body>
5. 문서 객체 삽입
- 문서 객체에 문서 객체를 추가하는 메서드는 앞 뒤 순서에 따라 두 가지 형태가 존재
메서드명 |
설명 |
$(A).appendTo(B) |
A를 B의 뒷부분에 추가 |
$(A).prependTo(B) |
A를 B의 앞부분의 추가 |
$(A).insertAfter(B) |
A를 B의 뒤에 추가 |
$(A).insertBefore(B) |
A를 B의 앞에 추가 |
$(A).append(B) |
B를 A의 뒷부분에 추가 |
$(A).prepend(B) |
B를 A의 앞부분에 추가 |
$(A).after(B) |
B를 A의 뒤에 추가 |
$(A).before(B) |
B를 A의 앞에 추가 |
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var h1 = '<h1>Header1</h1>'
var h2 = '<h2>Header2</h2>'
$('body').append(h1, h2, h1);
var content = [
{ name: '갤럭시노트3', manufacturer: '삼성' },
{ name: 'G2', manufacturer: '엘지' },
];
$('div').append(function(index) {
var item = content[index];
var output = '';
output += '<h1>' + item.name + '</h1>';
output += '<h2>' + item.manufacturer + '</h2>';
return output;
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
6. 문서 객체 이동
- 기존 문서 객체를 선택하고 문서 객체 삽입 메서드를 사용하여 다른 곳으로 이동
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').css('width', 100);
setInterval(function() {
$('img').first().appendTo('body');
}, 1000);
});
</script>
</head>
<body>
<img src="chrysanthemum.jpg" />
<img src="desert.jpg" />
<img src="hydrangea.jpg" />
<img src="jellyfish.jpg" />
<img src="lighthouse.jpg" />
<img src="penguin.jpg" />
<img src="tulip.jpg" />
</body>
7. 문서 객체 복제
- 문서 객체를 복제해서 추가할 때는 clone() 메서드를 사용
- $(selector).clone()
- $(selector).clone(Boolean dataAndEvents)
- $(selector).clone(Boolean dataAndEvents, Boolean deepDataAndEvents)
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div').append($('h1').clone());
});
</script>
</head>
<body>
<h1>Header</h1>
<hr />
<div></div>
<hr />
</body>
'Web > jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) 문서 객체 조작 - #1 (0) | 2013.11.26 |
|---|---|
| 제이쿼리(jQuery) 선택자 - #2 (0) | 2013.11.26 |
| 제이쿼리(jQuery) 선택자 - #1 (2) | 2013.11.26 |
| 제이쿼리(jQuery) 기본 (0) | 2013.11.25 |