Home > Web > jQuery – Sửa đổi DOM

jQuery – Sửa đổi DOM

jQuery cung cấp nhiều phương thức cho phép can thiệp DOM theo nhiều cách như thay đổi các attribute của một phần tử (Attributes category), thiết lập các properties cho phần tử (CSS category) hay sửa đổi hoàn toàn các phần tử  ( hoặc là các nhóm phần tử ) : thêm, loại bỏ, sao chép, … Tất cả các phương thức này được coi như các “setters”, chúng làm thay đổi value của properties.

Một vài phương thức khác như .attr(), .html, .val() là các “getters”, truy vấn thông tin từ thành phần DOM để sử dụng sau đó.

Các phương thức chèn thành phần mới vào DOM: (DOM Insertion)

Bao gồm :

  • Các phương thức chèn bên ngoài:
    • .after()
    • .insertAfter()
    • .before()
    • .insertBefore()
  • Các phương thức chèn bên trong:
    • .append()
    • .appendTo()
    • .html()
    • .prepend()
    • .prependTo()
    • .text
  • Các phương thức chèn xung quanh:
    • .wrap
    • .unwrap
    • .wrapAll
    • .wrapInner

Các phương thức chèn bên ngoài (DOM Insertion, Outside)

.after()

Mô tả : Chèn nội dung được chỉ định trong tham số sau mỗi phần tử trong tập các phần tử so khớp

Kiểu trả về : đối tượng jQuery

Cú pháp:

  • .after(content[,content])
    • Tham số :
      • content : chuỗi HTML, phần tử DOM hay đối tượng jQuery để chèn vào sau mỗi phần tử trong tập các phần tử so khớp
      • content : Một hoặc nhiều hơn một các phần tử DOM, các mảng của các phần tử, các chuỗi HTML hay các đối tượng jQuery được chèn vào sau mỗi phần tử trong tập các phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .after(function(index))
    • Tham số :
      • function(index): Một function trả về một chuỗi HTML, các phần tử DOM, hay một đối tượng jQuery để  chèn vào sau mỗi phần tử trong tập các phần tử so khớp. Chỉ số vị trí của phần tử trong tập hợp được truyền vào như một tham số. Bên trong hàm, từ khóa “this” chỉ đến phần tử hiện tại trong tập hợp.
    • Phiên bản được thêm vào : 1.4

Phương thức .after() và .insertAfter() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .after(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .insertAfter(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector hay một thẻ.

Ví dụ bạn có tài liệu HTML sau :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Nội dung có thể được tạo và sau đó chèn vào sau một vài phần tử một lúc :

$('.inner').after('<p>Test</p>')

Kết quả sau khi thực hiện câu lệnh trên là :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <p>Test</p>
    <div class="inner">Goodbye</div>
    <p>Test</p>
</div>

Một phần tử trong DOM cũng có thể được chọn và chèn vào sau một phần tử khác :

$('.container').after($('h2'));

Nếu một phần tử được chọn theo cách này để chèn thì nó sẽ được di chuyển thay vì sao chép.

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Chèn Disconnected DOM nodes

Từ phiên bản jQuery 1.4, phương thức .before() và .after() cũng làm việc với disconnected DOM nodes. Ví dụ, xét đoạn code sau :

$('<div/>').after('<p></p>');

Kết quả là một tập hợp jQuery chứa 1 thẻ div và 1 thẻ p theo thứ tự mà ta có thể thao tác với nó sau này hoặc thậm chí trước khi nó được chèn vào tài liệu.

$('<div/>').after('<p></p>').addClass('foo')
.filter('p').attr('id', 'bar').html('hello')
.end()
.appendTo('body');

Kết quả là các thành phần dưới đây được chèn vào trước thẻ đóng </body> :

<div class="foo"></div>
<p class="foo" id="bar">hello</p>

Truyền vào một Function

Từ phiên bản 1.4, phương thức .after hỗ trợ truyền vào tham số một function trả về các phần tử để insert

$('p').after(function() {
 return '<div>' + this.className + '</div>';
});

Ví dụ trên sẽ chèn một thẻ <div> sau mỗi thẻ p với mỗi thẻ div có thuộc tính className là className của thẻ p trước nó.

Thêm các tham số : 

Tương tự như các phương thức thêm nội dung khác như .prepend() và .before(), phương thức .after cũng hỗ trợ truyền vào nhiều tham số đầu vào, bao gồm các thành phần DOM, các đối tượng jQuery, chuỗi HTML và các mảng phần tử DOM.

Ví dụ sau sẽ insert 2 thẻ <div> mới và một thẻ <div> đã tồn tại vào sau thẻ p đầu tiên.

var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('p').first().after($newdiv1, [newdiv2, existingdiv1]);

Trong khi .after có thể chấp nhận nhiều tham số thêm, chúng ta có thể thu được cùng kết quả với ví dụ trên khi truyền vào 3 thẻ div như sau :

$('p').first().after($newdiv1, newdiv2, existingdiv1)

Loại và số lượng các tham số nhiều hay ít phụ thuộc vào các phần tử được thu thập trong code.

Ví dụ 1 : Thêm một chuỗi HTML vào sau tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>I would like to say: </p>
    <script>$("p").after("<b>Hello</b>");</script>
</body>
</html>

Ví dụ 2 : Thêm một phần tử DOM vào sau tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
   <style>p { background:yellow; }</style>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <p>I would like to say: </p>
   <script>$("p").after( document.createTextNode("Hello") );</script>
</body>
</html>

Ví dụ 3: Thêm một đối tượng jQuery ( tương tự như một Mảng của các phần tử DOM ) vào sau tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <b>Hello</b><p>I would like to say: </p>
    <script>$("p").after( $("b") );</script>
</body>
</html>

.insertAfter(target)

Mô tả : Chèn mỗi phần tử trong tập các phần tử so khớp vào sau target

Kiểu trả về : đối tượng jQuery

Cú pháp:

  • .insertAfter(target)
    • Tham số:
      • target : là một selector, phần tử, chuỗi HTML hay đối tượng jQuery; Tập các phần tử so khớp sẽ được chèn vào sau các phần tử được chỉ định bởi tham số này.
    • Phiên bản được thêm vào : 1.0

Xem xét tài liệu HTML sau :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Chúng ta có thể tạo nội dung và chèn nó vào sau vài phần tử cùng một lúc :

$('<p>Test</p>').insertAfter('.inner');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <p>Test</p>
    <div class="inner">Goodbye</div>
    <p>Test</p>
</div>

Chúng ta cũng có thể chọn một phần tử trên trang và chèn nó vào sau một phần tử khác :

$('h2').insertAfter($('.container'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển đến sau target ( không phải sao chép ) :

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Ví dụ : Chèn tất cả các thẻ p vào sau phần tử có id =”foo”. Việc này tương tự như sử dụng : $(‘#foo”).after(“p”)

<!DOCTYPE html>
<html>
<head>
    <style>#foo { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p> is what I said... </p><div id="foo">FOO!</div>
    <script>$("p").insertAfter("#foo"); // check after() examples</script>
</body>
</html>

.before()

Mô tả : Chèn nội dung được chỉ định trong tham số trước mỗi phần tử trong tập các phần tử so khớp.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .before(content[,content])
    • Tham số :
      • content : chuỗi HTML, phần tử DOM hay đối tượng jQuery để chèn vào sau mỗi phần tử trong tập các phần tử so khớp
      • content : Một hoặc nhiều hơn một các phần tử DOM, các mảng của các phần tử, các chuỗi HTML hay các đối tượng jQuery được chèn vào sau mỗi phần tử trong tập các phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .before(function(index))
    • Tham số :
      • function(index): Một function trả về một chuỗi HTML, các phần tử DOM, hay một đối tượng jQuery để  chèn vào sau mỗi phần tử trong tập các phần tử so khớp. Chỉ số vị trí của phần tử trong tập hợp được truyền vào như một tham số. Bên trong hàm, từ khóa “this” chỉ đến phần tử hiện tại trong tập hợp.
    • Phiên bản được thêm vào : 1.4

Phương thức .before() và .insertBefore() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .before(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .insertBefore(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector hay một thẻ.

Ví dụ bạn có tài liệu HTML sau :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Bạn có thể tạo nội dung và sau đó chèn vào trước một vài phần tử cùng lúc:

$('.inner').before('<p>Test</p>');

Mỗi phần tử div.inner sẽ nhận được nội dung mới :

<div class="container">
    <h2>Greetings</h2>
    <p>Test</p>
    <div class="inner">Hello</div>
    <p>Test</p>
    <div class="inner">Goodbye</div>
</div>

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào trước một phần tử khác:

$('.container').before($('h2'));

Nếu một phần tử được chọn theo cách này để chèn thì nó sẽ được di chuyển thay vì sao chép.

<h2>Greetings</h2>
   <div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.
Từ phiên bản jQuery 1.4, phương thức .before() và .after() cũng làm việc với disconnected DOM nodes.

$("<div/>").before("<p></p>");

Kết quả là một tập hợp jQuery chứa 1 đoạn văn và 1 thẻ div theo thứ tự.

Thêm các tham số : 

Tương tự như các phương thức thêm nội dung khác như .prepend() và .after(), phương thức .before cũng hỗ trợ truyền vào nhiều tham số đầu vào, bao gồm các thành phần DOM, các đối tượng jQuery, các chuỗi HTML và các mảng phần tử DOM

Ví dụ sau sẽ chèn 2 thẻ <div> mới và một thẻ <div> đã tồn tại vào trước thẻ p đầu tiên.

var $newdiv1 = $('<div id="object1"/>'),
 newdiv2 = document.createElement('div'),
 existingdiv1 = document.getElementById('foo');
$('p').first().before($newdiv1, [newdiv2, existingdiv1]);

Vì .before có thể chấp nhận nhiều tham số thêm, chúng ta có thể thu được cùng kết quả với ví dụ trên khi truyền vào 3 thẻ div như sau :

$('p').first().before($newdiv1, newdiv2, existingdiv1)

Loại và số lượng các tham số nhiều hay ít phụ thuộc vào các phần tử được thu thập trong code.

Ví dụ 1 : Chèn một chuỗi HTML vào trước tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p> is what I said...</p>
    <script>$("p").before("<b>Hello</b>");</script>
</body>
</html>

Ví dụ 2 : Chèn một phần tử DOM vào trước tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p> is what I said...</p>
    <script>$("p").before( document.createTextNode("Hello") );</script>
</body>
</html>

Ví dụ 3: Chèn một đối tượng jQuery ( tương tự như một Mảng của các phần tử DOM ) vào trước tất cả các thẻ p

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p> is what I said...</p><b>Hello</b>
    <script>$("p").before( $("b") );</script>
</body>
</html>

.insertBefore()

Mô tả : Chèn mỗi phần tử trong tập các phần tử so khớp vào trước target

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .insertBefore(target)
    • Tham số :
      • target : là một selector, phần tử, chuỗi HTML hay đối tượng jQuery; Tập các phần tử so khớp sẽ được chèn vào trước các phần tử được chỉ định bởi tham số này.
    • Phiên bản được thêm vào : 1.0

Phương thức .before() và .insertBefore() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .before(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .insertBefore(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector hay một thẻ.

Xem xét tài liệu HTML sau :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Chúng ta có thể tạo nội dung và chèn nó vào trước vài phần tử cùng một lúc :

$('<p>Test</p>').insertBefore('.inner');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<div class="container">
    <h2>Greetings</h2>
    <p>Test</p>
    <div class="inner">Hello</div>
    <p>Test</p>
    <div class="inner">Goodbye</div>
</div>

Chúng ta cũng có thể chọn một phần tử trên trang và chèn nó vào trước một phần tử khác :

$('h2').insertBefore($('.container'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển đến trước target ( không phải sao chép ) :

<h2>Greetings</h2>
   <div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Ví dụ : Chèn tất cả các thẻ p vào trước phần tử có id =”foo”. Việc này tương tự như sử dụng : $(‘#foo”).before(“p”)

<!DOCTYPE html>
<html>
<head>
    <style>#foo { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div id="foo">FOO!</div><p>I would like to say: </p>
    <script>$("p").insertBefore("#foo"); // check before() examples</script>
</body>
</html>

Các phương thức chèn bên trong: (DOM Insertion, Inside)

Gồm có :

  • .append()
  • .appendTo()
  • .html()
  • .prepend()
  • .prependTo()
  • .text()

.append()

Mô tả : Chèn nội dung được chỉ định bởi tham số vào cuối của mỗi phần tử trong tập các phần tử so khớp.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .append(content[,content])
    • Tham số:
      • content : phần tử DOM , chuỗi HTML hay đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập các phần tử so khớp.
      • content: Một hoặc nhiều phần tử DOM, mảng các phần tử, các chuỗi HTML hay các đối tượng jQuery để chèn vào cuối của mỗi phần tử trong tập các phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .append(function(index,html))
    • Tham số:
      • function(index,html) : Một hàm trả về một chuỗi HTML, các phần tử DOM hoặc đối tượng jQuery để chèn vào cuối của mỗi phần tử trong tập các phần tử so khớp. Hàm này nhận vị trí index của phần tử trong tập hợp và giá trị HTML cũ của phần tử như là các tham số. Bên trong hàm, từ khóa this chỉ đến phần tử hiện tại trong tập hợp.
    • Phiên bản được thêm vào : 1.4

Phương thức .append() chèn nội dung được chỉ định vào con cuối cùng của mỗi phần tử trong tập hợp jQuery. (Để chèn vào con đầu tiên, sử dụng .prepend()).

Phương thức .append() và .appendTo() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .append(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .appendTo(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector

Xem xét tài liệu HTML sau :

<h2>Greetings</h2>
    <div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Bạn có thể tạo nội dung mới và chèn nó vào trong một vài phần tử cùng một lúc :

$('.inner').append('<p>Test</p>');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<h2>Greetings</h2>
<div class="container">
    <div class="inner">
       Hello
       <p>Test</p>
    </div>
    <div class="inner">
        Goodbye
       <p>Test</p>
    </div>
</div>

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào trong một phần tử khác:

$('.container').append($('h2'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển vào trong target ( không phải sao chép ) :

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
    <h2>Greetings</h2>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Thêm các tham số: 

Tương tự như các phương thức thêm nội dung khác như .prepend() và .before(), phương thức .append() cũng hỗ trợ truyền nhiều tham số đầu vào, bao gồm các phần tử DOM, các đối tượng jQuery, các chuỗi HTML và các mảng các phần tử DOM.

Ví dụ sau sẽ chèn 2 thẻ div mới và một thẻ div đã tồn tại như là 2 node con cuối cùng của thẻ body.

var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('body').append($newdiv1, [newdiv2, existingdiv1]);

Vì .append() có thể chấp nhận nhiều tham số đầu vào, kết quả tương tự như trên cũng đạt được bằng cách truyền vào 3 thẻ div như là các tham số như sau:

$('body').append($newdiv1, newdiv2, existingdiv1)

Loại và số lượng các tham số nhiều hay ít phụ thuộc vào các phần tử được thu thập trong code

Ví dụ 1: Nối thêm một số HTML vào tất cả các đoạn văn

<!DOCTYPE html>
<html>
<head>
    <style>
       p { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>I would like to say: </p>
<script>
    $("p").append("<strong>Hello</strong>");
</script>
</body>
</html>

Ví dụ 2: Append một phần tử vào tất cả các đoạn văn

<!DOCTYPE html>
<html>
<head>
    <style>
       p { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>I would like to say: </p>
    <script>
        $("p").append(document.createTextNode("Hello"));
    </script>
</body>
</html>

Ví dụ 3: Append một đối tượng jQuery ( tương tự như một Mảng của các phần tử DOM) vào tất cả các đoạn văn:

<!DOCTYPE html>
<html>
<head>
    <style>
        p { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <strong>Hello world!!!</strong><p>I would like to say: </p>
    <script>
        $("p").append( $("strong") );
    </script>
</body>
</html>

.appendTo()

Mô tả : Chèn mỗi phần tử trong tập các phần tử so khớp vào cuối của target

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .appendTo(target)
    • Tham số:
      • target : Một selector, phần tử DOM , chuỗi HTML hay đối tượng jQuery; so khớp với tập các phần tử sẽ được chèn vào cuối của các phần tử được chỉ định bởi tham số này.
    •  Phiên bản được thêm vào : 1.0

Phương thức .append() và .appendTo() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .append(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .appendTo(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector

Xem xét tài liệu HTML sau :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Bạn có thể tạo nội dung mới và chèn nó vào trong một vài phần tử cùng một lúc :

$('<p>Test</p>').appendTo('.inner');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">
      Hello
      <p>Test</p>
   </div>
   <div class="inner">
      Goodbye
      <p>Test</p>
   </div>
</div>

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào trong một phần tử khác:

$('h2').appendTo($('.container'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển vào trong target ( không phải sao chép )

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
    <h2>Greetings</h2>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Ví dụ : Append tất cả các thẻ span vào phần tử có id=”foo”

<!DOCTYPE html>
<html>
<head>
    <style>#foo { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>I have nothing more to say... </span>
  <div id="foo">FOO! </div>
  <script>$("span").appendTo("#foo"); // check append() examples</script>
</body>
</html>

.prepend()

Mô tả : Chèn nội dung được chỉ định bởi tham số vào đầu của mỗi phần tử trong tập các phần tử so khớp.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .prepend(content[,content]) :
    • Tham số :
      • content : phần tử DOM , chuỗi HTML hay đối tượng jQuery để chèn vào đầu mỗi phần tử trong tập các phần tử so khớp.
      • content: Một hoặc nhiều phần tử DOM, mảng các phần tử, các chuỗi HTML hay các đối tượng jQuery để chèn vào đầu của mỗi phần tử trong tập các phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .append(function(index,html)) :
    • Tham số :
      • function(index,html) : Một hàm trả về một chuỗi HTML, các phần tử DOM hoặc đối tượng jQuery để chèn vào đầu của mỗi phần tử trong tập các phần tử so khớp. Hàm này nhận vị trí index của phần tử trong tập hợp và giá trị HTML cũ của phần tử như là các tham số. Bên trong hàm, từ khóa this chỉ đến phần tử hiện tại trong tập hợp.
    • Phiên bản được thêm vào : 1.4

Phương thức .prepend() chèn nội dung được chỉ định vào con đầu tiên của mỗi phần tử trong tập hợp jQuery. (Để chèn vào con cuối cùng, sử dụng .append()).

Phương thức .prepend() và .prependTo() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .prepend(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .prependTo(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector

Xem xét tài liệu HTML sau :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Bạn có thể tạo nội dung mới và chèn nó vào trong một vài phần tử cùng một lúc :

$('.inner').prepend('<p>Test</p>');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">
      <p>Test</p>
      Hello
   </div>
   <div class="inner">
     <p>Test</p>
     Goodbye
   </div>
</div>

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào trong một phần tử khác:

$('.container').prepend($('h2'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển vào trong target ( không phải sao chép ) :

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Thêm các tham số: 

Tương tự như các phương thức thêm nội dung khác như .append() và .before(), phương thức .prepend() cũng hỗ trợ truyền nhiều tham số đầu vào, bao gồm các phần tử DOM, các đối tượng jQuery, các chuỗi HTML và các mảng các phần tử DOM.

Ví dụ sau sẽ chèn 2 thẻ div mới và một thẻ div đã tồn tại như là 2 node con cuối cùng của thẻ body.

var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('body').prepend($newdiv1, [newdiv2, existingdiv1]);

Trong khi .prepend() có thể chấp nhận nhiều tham số đầu vào, kết quả tương tự như trên cũng đạt được bằng cách truyền vào 3 thẻ div như là các tham số như sau:

$('body').prepend($newdiv1, newdiv2, existingdiv1)

Loại và số lượng các tham số nhiều hay ít phụ thuộc vào các phần tử được thu thập trong code

Ví dụ 1: Prepends một chuỗi HTML vào tất cả các đoạn văn

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <p>there, friend!</p>
   <p>amigo!</p>
   <script>$("p").prepend("<b>Hello </b>");</script>
</body>
</html>

Ví dụ 2: Prepend một phần tử DOM vào tất cả các đoạn văn

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>is what I'd say</p>
    <p>is what I said</p>
    <script>$("p").prepend(document.createTextNode("Hello "));</script>
</body>
</html>

Ví dụ 3: Prepend một đối tượng jQuery ( tương tự như một Mảng của các phần tử DOM) vào tất cả các đoạn văn:

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p> is what was said.</p><b>Hello</b>
    <script>$("p").prepend( $("b") );</script>
</body>
</html>

.prependTo()

Mô tả : Chèn mỗi phần tử trong tập các phần tử so khớp vào đầu của target.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .prependTo(target) :
    • Tham số :
      • target : Một selector, phần tử DOM , chuỗi HTML hay đối tượng jQuery; so khớp với tập các phần tử sẽ được chèn vào đầu của các phần tử được chỉ định bởi tham số này..
    • Phiên bản được thêm vào : 1.0

Phương thức .prepend() và .prependTo() thực hiện cùng một tác vụ. Điểm khác biệt chính là trong cú pháp, cụ thể là ở việc sắp đặt giữa content và target.Đối với .prepend(), biểu thức selector đứng trước hàm, sau đó là nội dung được chèn vào. Còn đối với .prependTo(), nội dung được chèn vào đứng trước hàm, sau đó là một biểu thức selector

Xem xét tài liệu HTML sau :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Bạn có thể tạo nội dung mới và chèn nó vào trong một vài phần tử cùng một lúc :

$('<p>Test</p>').prependTo('.inner');

Mỗi thẻ div.inner sẽ nhận nội dung mới này :

<h2>Greetings</h2>
<div class="container">
   <div class="inner">
     <p>Test</p>
        Hello
     </div>
     <div class="inner">
        <p>Test</p>
        Goodbye
     </div>
</div>

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào trong một phần tử khác:

$('h2').prependTo($('.container'));

Nếu một phần tử được chọn theo cách này thì nó sẽ được di chuyển vào trong target ( không phải sao chép ) :

<div class="container">
   <h2>Greetings</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích ( target element), việc sao chép bản sao của phần tử được chèn sẽ được tạo cho mỗi phần tử đích sau phần tử đầu tiên.

Ví dụ: Prepend tất cả các thẻ span vào phần tử có id =”foo”

<!DOCTYPE html>
<html>
<head>
   <style>div { background:yellow; }</style>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <div id="foo">FOO!</div>
   <span>I have something to say... </span>
   <script>$("span").prependTo("#foo"); // check prepend() examples</script>
</body>
</html>

.html()

Có 2 dạng sử dụng: .html().html(htmlString)

.html()

Mô tả : Lấy (Get) nội dung HTML của phần tử đầu tiên trong tập các phần tử so khớp

Kiểu trả về : String

Phiên bản được thêm vào : 1.0

Phương thức này không có sẵn trong các tài liệu XML.

Trong một tài liệu HTML, phương thức .html() có thể được dùng để lấy nội dung của bất kỳ phần tử nào. Nếu biểu thức selector so khớp với nhiều hơn một phần tử thì chỉ phần tử so khớp đầu tiên sẽ trả về nội dung HTML của nó.

Xem xét đoạn code sau :

$('div.demo-container').html();

Nó sẽ lấy nội dung của thẻ div đầu tiên có class = “demo-container” trong tài liệu.

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
</div>

Kết quả sẽ là :

<div>Demonstration Box</div>

Phương thức này sử dụng thuộc tính innerHTML của trình duyệt. Một vài trình duyệt có thể không trả về chuỗi HTML chính xác như trong tài liệu nguyên bản. Ví dụ như Internet Explorer thi thoảng bỏ dấu quotes bao quanh giá trị nếu chúng chỉ chứa ký tự chữ – số (anphanumeric).

Ví dụ: Click vào một đoạn văn để chuyển nội dung của nó từ html sang text

<!DOCTYPE html>
<html>
<head>
    <style>
       p { margin:8px; font-size:20px; color:blue; 
 cursor:pointer; }
       b { text-decoration:underline; }
       button { cursor:pointer; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>
       <b>Click</b> to change the <span id="tag">html</span>
    </p>
    <p>
       to a <span id="text">text</span> node.
    </p>
    <p>
       This <button name="nada">button</button> does nothing.
    </p>
   <script>
        $("p").click(function () {
           var htmlStr = $(this).html();
           $(this).text(htmlStr);
        });
   </script>
</body>
</html>

.html(htmlString)

Mô tả : Thiết lập (Set) nội dung HTML của mỗi phần tử trong tập các phần tử so khớp

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .html(htmlString)
    • Tham số :
      • htmlString: một chuỗi HTML để thiết lập nội dung cho mỗi phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .html(function(index,oldhtml))
    • Tham số :
      • function(index,oldhtml) : Một hàm trả về nội dung HTML để thiết lập. Hàm này nhận chỉ số vị trí của phần tử trong tập hợp và giá trị HTML cũ làm tham số. jQuery sẽ làm trống phần tử trước khi gọi hàm; sử dụng tham số oldhtml để tham chiếu đến nội dung trước đó. Bên trong hàm, từ khóa this ám chỉ đến phần tử hiện tại trong tập hợp.
    • Phiên bản được thêm vào : 1.4

Phương thức này không có sẵn trong các tài liệu XML.

Khi phương thức .html() được sử dụng để thiết lập nội dung của một phần tử, mọi nội dung đã có của phần tử sẽ được thay thế hoàn toàn bằng nội dung mới.

Xem xét đoạn HTML sau:

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
</div>

Nội dung của <div class=”demo-container”> có thể được thiết lập như sau:

$('div.demo-container')
    .html('<p>All new content. <em>You bet!</em></p>');

Dòng code này sẽ thay thế mọi thứ bên trong <div class=”demo-container”>:

<div class="demo-container">
    <p>All new content. <em>You bet!</em></p>
</div>

Từ phiên bản 1.4, phương thức .html() cho phép nội dung HTML có thể được thiết lập bằng cách truyền trong một hàm.

$('div.demo-container').html(function() {
    var emph = '<em>' + $('p').length + ' paragraphs!</em>';
    return '<p>All new content for ' + emph + '</p>';
});

Nếu một tài liệu có 6 đoạn văn, ví dụ này sẽ thiết lập nội dung là :

<div> to <p>All new content for <em>6 paragraphs!</em></p>

Phương thức này sử dụng thuộc tính innerHTML của trình duyệt. Một số trình duyệt không sinh ra một DOM chính xác như mã nguồn HTML được cung cấp. Ví dụ , Internet Explorer trước phiên bản 8 sẽ chuyển tất cả các thuộc tính href trong link sang URL tuyệt đối và IE trước phiên bản 9 sẽ không xử lý chính xác các phần tử HTML5 mà không có thêm một compatibility layer riêng.

Lưu ý: Trong IE trước và cả phiên bản 9, việc thiết lập nội dung text của một phần tử HTML có thể làm hỏng các text nodes của con của nó đã được loại bỏ khỏi tài liệu như là một kết quả của toán tử. Nếu bạn giữ lại các tham chiếu đến các phần tử DOM này và cần chúng không thay đổi thì có thể dùng .empty().html(string) thay vì .html(string) bởi vì việc đó sẽ khiến các phần tử được loại bỏ khỏi tài liệu trước khi một chuỗi mới được gán cho phần tử.

Ví dụ 1: Thêm một chuỗi html vào mỗi thẻ div

<!DOCTYPE html>
<html>
<head>
    <style>
      .red { color:red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <span>Hello</span>
    <div></div>
    <div></div>
    <div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
</body>
</html>

Ví dụ 2: Thêm một chuỗi html vào mỗi thẻ div và ngay sau đó thao tác với nó để chèn thêm html.

<!DOCTYPE html>
<html>
<head>
    <style>
       div { color:blue; font-size:18px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
<script>
    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
    .css("color", "red");
</script>
</body>
</html>

.text()

Có 2 dạng sử dụng: .text().text(textString)

.text()

Mô tả : Lấy (Get) nội dung text hỗn hợp của mỗi phần tử trong tập các phần tử so khớp, bao gồm cả các con cháu của chúng.

Kiểu trả về : String

Phiên bản được thêm vào : 1.0

Không giống như phương thức .html(), .text() có thể được sử dụng trong cả tài liệu XML và HTML. Kết quả của phương thức .text() là một chuỗi bao gồm text hỗn hợp của tất cả các phần tử so khớp. (Do có sự khác nhau trong việc parsers HTML trong các trình duyệt khác nhau nên text trả về có thể khác nhau về newlines và các khoảng trắng khác).

Xem xét đoạn mã HTML sau :

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
    <ul>
       <li>list item 1</li>
       <li>list <strong>item</strong> 2</li>
    </ul>
</div>

Lệnh $(‘div.demo-container’).text() sẽ trả về kết quả là :

Demonstration Box list item 1 list item 2

Phương thức .text() không thể được sử dụng trong các các input của form hay các scripts. Để set hay get giá trị text của một phần tử input hay textarea, hãy sử dụng phương thức .val(). Để get giá trị của một phần tử script, hãy sử dụng phương thức .html().

Từ phiên bản jQuery 1.4, phương thức .text() có thể trả về giá trị của text và các nodes CDATA cũng như là các element nodes.

Ví dụ: Tìm nội dung text trong đoạn văn đầu tiên (stripping out the html), sau đó set html của  đoạn văn cuối cùng để hiển thị text đúng của nó.

<!DOCTYPE html>
<html>
<head>
    <style>
       p { color:blue; margin:8px; }
       b { color:red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p><b>Test</b> Paragraph.</p>
    <p></p>
    <script>
       var str = $("p:first").text();
       $("p:last").html(str);
    </script>
</body>
</html>

.text(textString)

Mô tả : Thiết lập (Set) nội dung của mỗi phần tử trong tập các phần tử so khớp với nội dung text được chỉ định.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .text(textString)
    • Tham số :
      • textString: một chuỗi text để thiết lập nội dung cho mỗi phần tử so khớp.
    • Phiên bản được thêm vào : 1.0
  • .text(function(index,text))
    • Tham số :
      • function(index,text) : Một hàm trả về nội dung text để thiết lập. Hàm này nhận chỉ số vị trí của phần tử trong tập hợp và giá trị text cũ làm tham số.
    • Phiên bản được thêm vào : 1.4

Không giống như phương thức .html(), .text() có thể được sử dụng cả trong tài liệu XML và HTML.

Chúng ta cần nhận thức được rằng phương thức này sẽ trả lại một cách chính xác nội dung chuỗi trong HTML. Để làm việc đó, nó gọi phương thức DOM .createTextNode() sẽ thay thế các ký tự đặc biệt bằng các entity HTML tương ứng ( chẳng hạn như &lt; cho <).

Xem xét đoạn HTML sau:

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
    <ul>
        <li>list item 1</li>
        <li>list <strong>item</strong> 2</li>
    </ul>
</div>

Câu lệnh $(‘div.demo-container’).text(‘<p>This is a test.</p>’); sẽ cho ra kết quả là :

<div class="demo-container">
   &lt;p&gt;This is a test.&lt;/p&gt;
</div>

Nó sẽ xuất hiện trên trang được trả lại với các tag được hiển thị như sau:

<p>This is a test</p>

Phương thức .text() không thể sử dụng được đối với các phần tử input. Đối với các trường text input, hãy sử dụng phương thức .val()

Từ phiên bản jQuery 1.4, phương thức .text() cho phép chúng ta có thể thiết lập nội dung text bằng cách truyền vào trong một hàm.

$('ul li').text(function(index) {
    return 'item number ' + (index + 1);
});

Chẳng hạn có một unordered list có 3 phần tử <li> thì kết quả của đoạn code trên là :

<ul>
 <li>item number 1</li>
 <li>item number 2</li>
 <li>item number 3</li>
</ul>

Ví dụ: Thêm text vào đoạn văn (chú ý là thẻ bold được escaped)

<!DOCTYPE html>
<html>
<head>
    <style>
       p { color:blue; margin:8px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Test Paragraph.</p>
    <script>$("p").text("<b>Some</b> new text.");</script>
</body>
</html>

Các phương thức chèn xung quanh :

.wrap

.unwrap

.wrapAll

.wrapInner

Các phương thức thay thế phần tử DOM (DOM Replacement)

Bao gồm :

  • .replaceAll
  • .replaceWith

.replaceAll

Mô tả : Thay thế mỗi phần tử đích bởi một tập các phần tử so khớp

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .replaceAll(target)
    • Tham số :
      • target : là một biểu thức selector chỉ ra các thành phần nào được thay thế.
    • Phiên bản được thêm vào : 1.0

Phương thức .replaceAll() là hệ quả của .replaceWith() nhưng với nguồn và đích đảo ngươc lại.

Xem xét cấu trúc DOM sau:

<div class="container">
    <div class="inner first">Hello</div>
    <div class="inner second">And</div>
    <div class="inner third">Goodbye</div>
</div>

Chúng ta có thể tạo một phần tử, sau đó thay thế các phần tử khác bởi nó:

$('<h2>New heading</h2>').replaceAll('.inner');

Kết quả là :

<div class="container">
    <h2>New heading</h2>
    <h2>New heading</h2>
    <h2>New heading</h2>
</div>

Hoặc chúng ta cũng có thể chọn một phần tử để thay thế cho phần tử khác :

$('.first').replaceAll('.third');

Kết quả là :

<div class="container">
    <div class="inner second">And</div>
    <div class="inner first">Hello</div>
</div>

Ở ví dụ này, chúng ta nhận thấy phần tử được chọn đó thay thế phần tử đích bằng cách di chuyển từ vị trí cũ của nó mà không phải là sao chép.

Ví dụ: Thay thế tất cả các đoạn văn bằng những từ in đậm

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
    <script>$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples</script>
</body>
</html>

.replaceWith()

Mô tả : Thay thế mỗi phần tử trong tập các phần tử so khớp bởi một nội dung mới được cung cấp.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .replaceWith(newContent)
    • Tham số :
      • newContent : Nội dung để chèn, có thể là một chuỗi HTML, phần tử DOM hoặc một đối tượng jQuery.
    • Phiên bản được thêm vào : 1.2
  • .replaceWith(function)
    • Tham số :
      • function : Một hàm trả về nội dung là cái mà sẽ thay thế cho một tập các phần tử so khớp.
    • Phiên bản được thêm vào : 1.4

Phương thức .replaceWith() sẽ bỏ đi nội dung từ DOM và chèn nội dung mới vào vị trí của nó bằng một lần gọi .

Xem xét cấu trúc DOM sau:

<div class="container">
    <div class="inner first">Hello</div>
    <div class="inner second">And</div>
    <div class="inner third">Goodbye</div>
</div>

Thẻ div inner second có thể được thay thế bởi một đoạn HTML được chỉ định :

$('div.second').replaceWith('<h2>New heading</h2>');

Kết quả là :

<div class="container">
    <div class="inner first">Hello</div>
    <h2>New heading</h2>
    <div class="inner third">Goodbye</div>
</div>

Tất cả các phần tử div.inner có thể là đích cùng một lúc:

$('div.inner').replaceWith('<h2>New heading</h2>');

Kết quả là :

<div class="container">
    <h2>New heading</h2>
    <h2>New heading</h2>
    <h2>New heading</h2>
</div>

Một phần tử cũng có thể được chọn như một sự thay thế

$('div.third').replaceWith($('.first'));

Kết quả là :

<div class="container">
    <div class="inner second">And</div>
    <div class="inner first">Hello</div>
</div>

Ở ví dụ này, chúng ta nhận thấy phần tử được chọn đó thay thế phần tử đích bằng cách di chuyển từ vị trí cũ của nó mà không phải là sao chép.

Phương thức .replaceWith() giống như hầu hết các phương thức jQuery, trả về một đối tượng jQuery do đó các phương thức khác có thể nối tiếp vào nó. Tuy nhiên, cần lưu ý rằng đối tượng jQuery nguyên bản ( original jQuery ) được trả về. Đối tượng này có nghĩa là phần tử đã được loại bỏ từ DOM, không phải là phần tử mới được thay thế.
Từ phiên bản jQuery 1.4, phương thức .replaceWith() có thể làm việc với disconnected DOM nodes.

Ví dụ trong đoạn code sau, .replaceWith() trả về một tập hợp jQuery chỉ chứa một đoạn văn.

$("<div/>").replaceWith("<p></p>");

Phương thức .replaceWith() có thể mang một function như là một tham số của nó:

$('div.container').replaceWith(function() {
    return $(this).contents();
});

Kết quả là các nội dung trong <div class=”container”> được thay thế bởi 3 thẻ div con.

Giá trị trả về của hàm này có thể là một chuỗi HTML, phần tử DOM hay một đối tượng jQuery.

Ví dụ 1: Khi click vào một nút sẽ thay thế nút đó bởi một thẻ div chứa cùng nội dung

<!DOCTYPE html>
<html>
<head>
 <style>
    button { display:block; margin:3px; color:red; width:200px; }
    div { color:red; border:2px solid blue; width:200px;
    margin:3px; text-align:center; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <button>First</button>
   <button>Second</button>
   <button>Third</button>
   <script>
       $("button").click(function () {
           $(this).replaceWith( "<div>" + $(this).text() + "</div>" );
       });
   </script>
</body>
</html>

Ví dụ 2: Thay thế tất cả các đoạn văn bởi các từ in đậm

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <p>Hello</p>
   <p>cruel</p>
   <p>World</p>
<script>
   $("p").replaceWith( "<b>Paragraph. </b>" );
</script>
</body>
</html>

Ví dụ 3: Khi click vào một đoạn văn sẽ thay thế mỗi đoạn văn bởi một thẻ div có sẵn trong DOM và được chọn bởi hàm $(). Chú ý rằng nó không phải là sao chép đối tượng mà đúng hơn là di chuyển nó để thay thế đoạn văn.

<!DOCTYPE html>
<html>
<head>
 <style>
    div { border:2px solid blue; color:red; margin:3px; }
    p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
    <div>Replaced!</div>
   <script>
      $("p").click(function () {
          $(this).replaceWith( $("div") );
      });
   </script>
</body>
</html>

Ví dụ 4: Khi click vào một nút, sẽ thay thế nội dung của 1 thẻ div bởi các thẻ div con của nó và nối thêm tên class của phần tử được chọn vào đoạn văn.

<!DOCTYPE html>
<html>
<head>
 <style> 
    .container { background-color: #991; }
    .inner { color: #911; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <p>
      <button>Replace!</button>
   </p>
   <div class="container">
      <div class="inner">Scooby</div>
      <div class="inner">Dooby</div>
      <div class="inner">Doo</div>
   </div>
   <script>
      $('button').bind("click", function() {
          var $container = $("div.container").replaceWith(function() {
             return $(this).contents();
          });
          $("p").append( $container.attr("class") );
      });
   </script>
</body>
</html>

Các phương thức xóa phần tử DOM (DOM Removal)

Bao gồm :

  • .remove
  • .detach
  • .empty
  • .unwrap

.remove()

Mô tả : Xóa một tập các phần tử so khớp từ DOM.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .remove([selector])
    • Tham số :
      • selector : Một biểu thức selector để lọc (filter) một tập các phần tử được xóa.
    • Phiên bản được thêm vào : 1.0

Tương tự như .empty(), phương thức remove() sẽ loại bỏ các phần tử ra khỏi DOM. Sử dụng .remove() khi bạn muốn loại bỏ chính bản thân phần tử và mọi thứ bên trong nó ( tất cả các events và jQuery data liên kết với phần tử sẽ được loại bỏ ). Để loại bỏ các phần tử mà không loại bỏ data và events, bạn có thể sử dụng .detach()

Xem xét tài liệu HTML sau:

<div class="container">
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>

Chúng ta có thể tìm bất kỳ phần tử đích nào để loại bỏ :

$('.hello').remove();

Kết quả là :

<div class="container">
   <div class="goodbye">Goodbye</div>
</div>

Nếu chúng ta có nhiều phần tử lồng nhau bên trong div.hello, tất cả chúng cũng sẽ bị loại bỏ và các construct jQuery khác như data hoặc event handlers cũng sẽ bị xóa.
Chúng ta cũng có thể thêm một selector như một tham số tùy chọn. Ví dụ chúng ta có thể viết lại đoạn code loại bỏ DOM ở trên như sau:

$('div').remove('.hello');

Kết quả thu được cũng giống như kết quả ở trên:

<div class="container">
    <div class="goodbye">Goodbye</div>
</div>

Ví dụ 1: Loại bỏ tất cả các đoạn văn khỏi DOM

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; margin:6px 0; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Hello</p> 
    how are 
    <p>you?</p>
    <button>Call remove() on paragraphs</button>
    <script>
        $("button").click(function () {
           $("p").remove();
        });
     </script>
</body>
</html>

Ví dụ 2: Loại bỏ tất cả các đoạn văn có chứa “Hello” khỏi DOM. Tương tự như thực hiện : $(“p”).filter(“:contains(‘Hello’)”).remove()

<!DOCTYPE html>
<html>
<head>
    <style>p { background:yellow; margin:6px 0; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p class="hello">Hello</p>
    how are 
    <p>you?</p>
    <button>Call remove(":contains('Hello')") on paragraphs</button>
<script>
    $("button").click(function () {
       $("p").remove(":contains('Hello')");
    });
</script>
</body>
</html>

.empty()

Mô tả : Loại bỏ tất cả các node con của tập các phần tử so khớp từ DOM

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .empty()
    • Phiên bản được thêm vào : 1.0

Phương thức này sẽ loại bỏ không chỉ các phần tử con ( và các con cháu khác) mà còn bất kỳ nội dung nào bên trong tập các phần tử so khớp. Đó là vì tùy theo DOM được chỉ định, mọi chuỗi của văn bản bên trong một phần tử được xem như một node con của phần tử đó.

Xem xét tài liệu HTML sau:

<div class="container">
    <div class="hello">Hello</div>
    <div class="goodbye">Goodbye</div>
</div>

Chúng ta có thể tìm bất kỳ phần tử đích nào để loại bỏ :

$('.hello').empty();

Kết quả là nội dung “Hello” bên trong div.hello bị xóa

<div class="container">
    <div class="hello"></div>
    <div class="goodbye">Goodbye</div>
</div>

Để tránh memory leaks, jQuery loại bỏ các construct khác như data và event handler khác từ các phần tử con trước khi loại bỏ chính bản thân các phần tử.

Nếu bạn muốn loại bỏ các phần tử mà không triệt tiêu data và event handlers của chúng ( do đó chúng có thể được add lại về sau) thì hãy sử dụng .detach() thay vì .empty().

Ví dụ : Loại bỏ tất cả các node con ( bao gồm cả text node) từ tất cả các đoạn văn.

<!DOCTYPE html>
<html>
<head>
 <style>
    p { background:yellow; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>
    Hello, <span>Person</span> <a href="javascript:;">and person</a>
</p>
<button>Call empty() on above paragraph</button>
<script>
 $("button").click(function () {
    $("p").empty();
 });
</script>
</body>
</html>

.detach()

Mô tả : Loại bỏ tập các phần tử so khớp từ DOM

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .detach()
    • Phiên bản được thêm vào : 1.0

Phương thức .detach() tương tự như .remove(), ngoại trừ .detach() giữ lại tất cả các jQuery data liên quan đến các phần tử được loại bỏ. Phương thức này rất hữu ích khi loại bỏ các phần tử và sau này sẽ chèn trở lại vào DOM.

Ví dụ : Tách tất cả các đoạn văn ra khỏi DOM

<!DOCTYPE html>
<html>
<head>
 <style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Hello</p> 
    how are 
    <p>you?</p>
    <button>Attach/detach paragraphs</button>
<script>
    $("p").click(function(){
       $(this).toggleClass("off");
    });
    var p;
    $("button").click(function(){
       if ( p ) {
          p.appendTo("body");
          p = null;
       } else {
          p = $("p").detach();
       }
    });</script>
</body>
</html>

.unwrap()

Mô tả : Loại bỏ các cha (parents) của tập các phần tử so khớp từ DOM, dời các phần tử so khớp vào nơi của chúng.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .unwrap()
    • Phiên bản được thêm vào : 1.4

Phương thức .unwrap() loại bỏ các phần tử cha. Nó có tác dụng ngược lại với phương thức wrap(). Các phần tử so khớp ( và các anh em của chúng, nếu có) sẽ thay thế cha của chúng bên trong cấu trúc DOM.

Ví dụ : Wrap/unwrap (Bao bọc/hủy bao bọc) một thẻ div xung quanh mỗi đoạn văn

<!DOCTYPE html>
<html>
<head>
 <style>
    div { border: 2px solid blue; }
    p { background:yellow; margin:4px; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <button>wrap/unwrap</button>
   <p>Hello</p>
   <p>cruel</p>
   <p>World</p>
   <script>
      $("button").toggle(function(){
         $("p").wrap("<div></div>");
      }, function(){
         $("p").unwrap();
       });</script>
</body>
</html>

Phương thức sao chép phần tử DOM (DOM Copying)

.clone()

Mô tả : Tạo một sao chép sâu (deep copy) của tập các phần tử so khớp.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .clone([withDataAndEvents])
    • Tham số :
      • withDataAndEvents: giá trị Boolean true/false cho biết event handlers có được copy cùng với các phần tử hay không. Từ phiên bản jQuery 1.4, element data sẽ luôn được copy cùng.
    • Phiên bản được thêm vào : 1.0
  • .clone([withDataAndEvents][,deepWithDataAndEvents])
    • Tham số :
      • withDataAndEvents: giá trị Boolean true/false cho biết event handlers có được copy cùng với các phần tử hay không. Giá trị mặc định là false. Trong phiên bản 1.5.0, giá trị mặc định không chính xác là true, nó được đổi lại là false từ phiên bản 1.5.1 và cao hơn.
      • deepWithDataAndEvents: giá trị Boolean true/false cho biết event handlers và data của tất cả các phần tử con của phần tử được sao chép có được copy hay không. Mặc định giá trị của nó sẽ giống với giá trị của tham số đầu tiên (mặc định là false).
    • Phiên bản được thêm vào : 1.5

Phương thức .clone() thực hiện một sao chép sâu của tập các phần tử so khớp, có nghĩa là nó sẽ sao chép tập các phần tử so khớp cũng như tất cả các phần tử con cháu và text nodes của chúng. Khi sử dụng trong sự liên hợp với các phương thức chèn khác (insertion methods), phương thức .clone() là một cách rất tiện lợi để nhân đôi các phần tử trên một trang.

Xem xét tài liệu HTML sau:

<div class="container">
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>

Đoạn code bên dưới sử dụng phương thức .append() , thường được dùng khi một phần tử được chèn vào đâu đó trong DOM, nó sẽ được di chuyển từ vị trí cũ:

$('.hello').appendTo('.goodbye');

Kết quả là :

<div class="container">
   <div class="goodbye">
      Goodbye
      <div class="hello">Hello</div>
   </div>
</div>

Để ngăn ngừa điều này và thay vì phải tạo một bản sao của phần tử, bạn có thể viết như sau:

$('.hello').clone().appendTo('.goodbye');

Kết quả là :

<div class="container">
    <div class="hello">Hello</div>
    <div class="goodbye">
       Goodbye
       <div class="hello">Hello</div>
    </div>
</div>

Chú ý: Khi sử dụng phương thức .clone(), bạn có thể sửa đổi các phần tử được sao chép  và nội dung của chúng trước khi chèn/chèn lại chúng vào tài liệu.

Thông thường, mọi event handlers quy định bởi phần tử nguyên bản không được sao chép khi sử dụng clone. Tham số tùy chọn withDataAndEvents cho phép chúng ta có thể thay đổi hành vi này, và tất cả các event handlers cũng được gắn với bản sao mới của phần tử. Từ phiên bản jQuery 1.4, tất cả các element data ( được gắn bởi phương thức .data()) cũng được sao chép đến bản sao mới.

Tuy nhiên, các đối tượng và các mảng bên trong element data không được sao chép và sẽ tiếp tục được chia sẻ giữa phần tử được sao chép ( cloned element) và phần tử nguyên bản. Để sao chép sâu tất cả data, có thể thực hiện copy từng cái một cách thủ công:

// Original element with attached data
var $elem = $('#elem').data( "arr": [ 1 ] ), 
$clone = $elem.clone( true )
// Deep copy to prevent data sharing
.data( "arr", $.extend( [], $elem.data("arr") ) );

Từ phiên bản jQuery 1.5, tham số withDataAndEvents có thể được tùy chọn nâng cao với deepWithDataAndEvents để sao chép các events và data của tất cả các con của phần tử được sao chép.

Lưu ý: sử dụng .clone() sẽ thể có xảy ra lỗi trên trang khi có các phần tử trùng lặp thuộc tính id, cái mà được quy định là phải duy nhất. Do đó, một lời khuyên là nên tránh sao chép các phần tử có thuộc tính id hoặc có thể sử dụng thuộc tính class như là định danh để thay thế.

Ví dụ 1 : Sao chép tất cả các phần tử b và prepends chúng vào đầu tất cả các đoạn văn.

<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <b>Hello</b><p>, how are you?</p>
<script>
   $("b").clone().prependTo("p");
</script>
</body>
</html>

Ví dụ 2: Khi sử dụng .clone() để sao chép một tập hợp các phần tử không được gắn vào DOM, thứ tự của chúng khi chèn vào DOM là không được đảm bảo. Tuy nhiên,nó có thể được khắc phục như minh họa dưới đây:

<!DOCTYPE html>
<html>
<head>
 <style>
    #orig, #copy, #copy-correct {
       float: left;
       width: 20%;
    }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
   <div id="orig">
      <div class="elem"><a>1</a></div>
      <div class="elem"><a>2</a></div>
      <div class="elem"><a>3</a></div>
      <div class="elem"><a>4</a></div>
      <div class="elem"><a>5</a></div>
   </div>
   <div id="copy"></div>
   <div id="copy-correct"></div>
<script>
// sort order is not guaranteed here and may vary with browser 
$('#copy').append($('#orig .elem')
 .clone()
 .children('a')
 .prepend('foo - ')
 .parent()
 .clone()); 
// correct way to approach where order is maintained
$('#copy-correct')
 .append($('#orig .elem')
 .clone()
 .children('a')
 .prepend('bar - ')
 .end()); 
</script>
</body>
</html>

Các phương thức thao tác với các attributes nói chung (General Attributes)

Bao gồm:

  • .attr()
  • .removeAttr()
  • .prop()
  • .removeProp()
  • .val()

Các phương thức thao tác với attribute class (Class Attribute)

Bao gồm:

  • .addClass()
  • .removeClass()
  • .hasClass()
  • .toggleClass()

 

Advertisements
Categories: Web
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: