.contents()

Định nghĩa và sử dụng

.contents(): Lấy phần tử con của mỗi thành phần trong tập hợp các phần tử phù hợp, bao gồm cả nốt văn bản (text nodes) và nốt bình luận (comment nodes), node có thể hiểu như sau: Theo DOM, tất cả mọi thứ trong tài liệu XML là một node.
- Toàn bộ văn bản (document) là một document node
- Mỗi thành phần XML (XML element) là một element node
- Text trong thành phần XML là text node
- Mỗi thuộc tính (attribute) là một attribute node
- Comment là commnet node
.contents() có thể sử dụng để lấy hoặc điều khiển nội dung iframe, nếu iframe có cùng domain với trang sử dụng .content().

Cấu trúc

Đã được thêm vào từ phiên bản 1.2

$('.test').contents();

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('.test').contents().filter('p').css('color','red');
});
</script>
</head>

<body>
<div class="test">
<p>Thành phần p</p>
<span>Thành phần span</span>
</div>
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng trên ta đã lọc ra được nội dung của thành phần p nằm trong div có class="test".

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<div class="test"> <p>Thành phần p</p> <span>Thành phần span</span> </div>	<div class="test"> <p style="color: red;">Thành phần p</p> <span>Thành phần span</span> </div>

.contents() với text nodes

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('.test').contents().filter(function() {
        return this.nodeType == 3;
    })
    .wrap('<p></p>')
    .end()
    .filter('br')
    .remove();
});
</script>
</head>

<body>
<div class="test">
Đây là đoạn text đầu.<br /> Đây là đoạn text thứ 2.<br /> Đây là đoạn text cuối.
</div>
</body>
</html>

Hiển thị trình duyệt:

Đoạn code trên sẽ bao (wrap) các đoạn text lại bằng thẻ p, và loại bỏ (remove) các thẻ <br />.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<div class="test"> Đây là đoạn text đầu.<br /><br /> Đây là đoạn text thứ 2.<br /><br /> Đây là đoạn text cuối. </div>	<div class="test"> <p> Đây là đoạn text đầu.</p> <p> Đây là đoạn text thứ 2.</p> <p> Đây là đoạn text cuối.</p> </div>

Ví dụ thêm với text nodes

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p').contents().not("[nodeType=1]").wrap('<strong></strong>');
});
</script>
</head>

<body>
<p>Đây là đoạn text <span>có sử dụng function</span> .content().</p>
</body>
</html>

Hiển thị trình duyệt:

Đoạn code trên sẽ bao (wrap) các đoạn text lại bằng thẻ p, và loại bỏ (remove) các thẻ <br />.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<div class="test"> Đây là đoạn text đầu.<br /><br /> Đây là đoạn text thứ 2.<br /><br /> Đây là đoạn text cuối. </div>	<div class="test"> <p> Đây là đoạn text đầu.</p> <p> Đây là đoạn text thứ 2.</p> <p> Đây là đoạn text cuối.</p> </div>

.content() - điều khiển nội dung iframe

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('#test').contents().find('a').css('color','yellow');
});
</script>
</head>

<body>
<iframe src="http://hocwebchuan.com/" width="98%" height="150" id="test"></iframe>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy tất cả thành phần <a> đều đã thêm style với color="yellow", để làm được điều này chúng ta phải đảm bảo trang sử dụng .content() và trang sử dụng trong iframe phải có cùng domain:

http://hocwebchuan.com/reference/
jquery/jquery_contents.php : trang sử dụng .content()
http://hocwebchuan.com/ : trang sử dụng trong iframe

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery - nội dung iframe	Sau khi có jQuery - nội dung iframe
<a>	<a style="color: yellow">

Chúng ta có thể sử dụng .content() kèm các function khác để điều khiển nội dung của iframe, như:

Thêm nội dung cho iframe: .append()

$('ifame').contents().find('').append('<p>Nội dung thêm vào</p>');

Loại bỏ nội dung cho iframe: .remove()

$('ifame').contents().find('').remove('<p.test>Nội dung bị loại bỏ</p>');

.closest()

.context