thao tac dom trong jquery

Bạn không cần viết những đoạn code quá dài để sửa đổi giá trị thuộc tính của bất kỳ phần tử nào hoặc để trích extract các đoạn HTML code từ một thẻ p hoặc div.. jQuery cung cấp các phươn

Trang 1

Thao tác DOM trong jQuery

jQuery cung cấp các phương thức để thao tác với DOM một cách cực kỳ hiệu quả Bạn

không cần viết những đoạn code quá dài để sửa đổi giá trị thuộc tính của bất kỳ phần tử

nào hoặc để trích (extract) các đoạn HTML code từ một thẻ p hoặc div

jQuery cung cấp các phương thức như attr(), html(), val() để thu nhận thông tin từ các

phần tử DOM để sử dụng cho lần sau

Thao tác nội dung trong jQuery

Phương thức html( ) nhận nội dung html (bên trong HTML) của phần tử đã so khớp đầu

tiên

Dưới đây là cú pháp của phương thức html():

selector.html( )

Ví dụ

Ví dụ đơn giản sau sử dụng các phương thức html() và text(val) Trong đó, html() thu

nhận nội dung HTML từ đối tượng và sau đó phương thức text(val) thiết lập giá trị của đối

tượng bởi sử dụng tham số đã truyền

<html> <head> <title> The jQuery Example </title> <script

type = "text/javascript"

$ document).ready( function () $( "div" ).click( function ()

var content = $( this ).html(); $( "#result" ).text( content );

}); }); </script> <style> #division{

margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p> Click on the square below: </p> <span id = "result" > </span> <div id = "division" style = background-color:blue; > This is Blue Square!! </div> </body> </html>

Nó sẽ cho kết quả:

Thay thế phần tử DOM trong jQuery

Bạn có thể thay thế hoàn toàn một phần tử DOM với các phần tử HTML hoặc DOM đã xác

định Phương thức replaceWith( content ) thực hiện mục đích này rất hiệu quả

Sau đây là cú pháp:

Trang 2

selector.replaceWith( content )

Ở đây, content là những gì bạn muốn thay thế cho phần tử ban đầu Nó có thể là HTML

hoặc văn bản

Ví dụ

Ví dụ đơn giản sau sẽ thay thế phần tử div với "<h1>JQuery is Great</h1>"trong Thư viện

C:

$ this ).replaceWith( "<h1>JQuery is Great</h1>" ); }); });

</script> <style> #division{

margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p> Click on the square below: </p> <span id = "result" > </span> <div id = "division" style = background-color:blue; > This is Blue Square!! </div> </body> </html>

Nó sẽ cho kết quả sau:

Gỡ bỏ các phần tử DOM trong jQuery

Có thể có một tình huống khi bạn muốn gỡ bỏ một hoặc nhiều phần tử DOM từ tài liệu

jQuery cung cấp hai phương thức để xử lý tình huống này:

Phương thức empty( ) gỡ bỏ tất cả node con từ tập hợp các phần tử đã so khớp, trong khi

phương thức remove( expr ) gỡ bỏ tất cả các phần tử đã so khớp từ DOM

Dưới đây là cú pháp:

selector.remove( [ expr ]) or selector.empty( )

Bạn có thể truyền tham số expr tùy ý để lọc tập hợp các phần tử cần gỡ bỏ

Ví dụ

Trong ví dụ đơn giản, các phần tử được gỡ bỏ ngay sau khi chúng được click:

$ this ).remove( ); }); }); </script>

Trang 3

width:60px;} </style> </head> <body>

<p> Click on any square below: </p> <span id = "result" > </span>

<div class = "div" style = background-color:blue; ></div> <div class = "div"

style = background-color:green; ></div> <div class = "div"

style = background-color:red; ></div> </body> </html>

Chèn các phần tử DOM trong jQuery

Có thể có tình huống khi bạn muốn chèn một hoặc nhiều phần tử DOM mới vào trong tài

liệu đang tồn tại của bạn jQuery cung cấp nhiều phương thức đa dạng để chèn các phần

tử vào các vị trí khác nhau

Phương thức after( content ) chèn content sau mỗi phần tử đã so khớp, trong khi phương

thức before( content ) chèn content trước mỗi phần tử đã so khớp

Dưới đây là cú pháp của các phương thức:

selector.after( content ) or selector.before( content )

Ở đây, content là những gì bạn muốn chèn Nó có thể là HTML hoặc văn bản

Ví dụ

Trong ví dụ sau, các phần tử div được chèn ngay trước phần tử được click:

$ this ).before( '<div class="div"></div>' ); }); });

</script> <style> .div{

margin: 10px ;padding: 12px ; border: 2px solid #666; width:60px;} </style> </head> <body> <p> Click on any square below: </p> <span id = "result" > </span> <div class = "div" style = background-color:blue; ></div> <div

class = "div" style = background-color:green; ></div> <div class = "div"

style = background-color:red; ></div> </body> </html>

Các phương thức thao tác DOM trong jQuery

Dưới đây liệt kê tất cả phương thức mà bạn có thể sử dụng để thao tác các phần tử DOM:

Trang 4

STT Phương thức & Miêu tả

Chèn content sau mỗi phần tử đã so khớp

Phụ thêm content tới bên trong mỗi phần tử đã so khớp

Phụ thêm tất cả phần tử đã so khớp tới tập hợp phần tử đã cho khác

Chèn content trước mỗi phần tử đã so khớp

Mô phỏng các phần tử DOM đã so khớp, và tất cả các Event Handler của chúng, và chọn các mô phỏng đó

Mô phỏng các phần tử DOM đã so khớp và chọn các mô phỏng đó

Gỡ bỏ tất cả các node con từ tập hợp các phần tử đã so khớp

Thiết lập các nội dung HTML của mỗi phần tử đã so khớp

Nhận các nội dung HTML (HTML bên trong) của phần tử đã so khớp đầu tiên

10 insertAfter( selector )

Chèn tất cả phần tử đã so khớp vào sau tập hợp các phần tử đã xác định khác

Trang 5

11 insertBefore( selector )

Chèn tất cả phần tử đã so khớp vào trước tập hợp các phần tử đã xác định khác

Thêm vào trước content tới bên trong mỗi phần tử đã so khớp

Thêm vào trước tất cả phần tử đã so khớp tới tập hợp các phần tử đã xác định khác

Gỡ bỏ tất cả phần tử đã so khớp từ DOM

15 replaceAll( selector )

Thay thế các phần tử đã so khớp bởi Selector đã cho với các phần tử được so khớp

Thay thế tất cả phần tử đã so khớp với các phần tử HTML hoặc DOM đã xác định

17 text( val )

Thiết lập các nội dung text của tất cả phần tử đã so khớp

Nhận các nội dung text đã tổ hợp của tất cả phần tử đã so khớp

Bao bọc (wrap) mỗi phần tử đã so khớp với phần tử đã xác định

Wrap mỗi phần tử đã so khớp với nội dung HTML đã xác định

Wrap tất cả phần tử trong tập hợp đã so khớp vào trong một phần tử bao bọc đơn (elem ở đây là phần tử DOM)

Trang 6

22 wrapAll( html )

Wrap tất cả phần tử trong tập hợp đã so khớp vào trong một phần tử bao bọc đơn (html là phần tử HTML)

Wrap các nội dung con bên trong mỗi phần tử đã so khớp (bao gồm các node văn bản) với một phần tử DOM

Wrap các nội dung con bên trong mỗi phần tử đã so khớp (bao gồm các node văn bản) với một cấu trúc HTML

Định dạng
Số trang	6
Dung lượng	246,58 KB