thao tac dom trong jquery

http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     Thao tác DOM jQuery jQuery cung cấp phương thức để thao tác với DOM cách hiệu Bạn không cần viết đoạn code dài để sửa đổi giá trị thuộc tính phần tử để trích (extract) đoạn HTML code từ thẻ p div jQuery cung cấp phương thức attr(), html(), val() để thu nhận thông tin từ phần tử DOM để sử dụng cho lần sau Thao tác nội dung jQuery Phương thức html( ) nhận nội dung html (bên HTML) phần tử so khớp Dưới cú pháp phương thức html(): selector.html( ) Ví dụ Ví dụ đơn giản sau sử dụng phương thức html() text(val) Trong đó, html() thu nhận nội dung HTML từ đối tượng sau phương thức text(val) thiết lập giá trị đối tượng sử dụng tham số truyền The jQuery Example $(document).ready(function() { $("div").click(function () { var content = $(this).html(); $("#result").text( content ); }); }); #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;} Square!! Nó cho kết quả: Thay phần tử DOM jQuery Bạn thay hoàn toàn phần tử DOM với phần tử HTML DOM xác định Phương thức replaceWith( content ) thực mục đích hiệu Sau cú pháp: http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     selector.replaceWith( content ) Ở đây, content bạn muốn thay cho phần tử ban đầu Nó HTML văn Ví dụ Ví dụ đơn giản sau thay phần tử div với "JQuery is Great"trong Thư viện C: The jQuery Example $(document).ready(function() { $("div").click(function () { $(this).replaceWith("JQuery is Great"); }); }); #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;} Square!! Nó cho kết sau: Gỡ bỏ phần tử DOM jQuery Có thể có tình bạn muốn gỡ bỏ nhiều phần tử DOM từ tài liệu jQuery cung cấp hai phương thức để xử lý tình này: Phương thức empty( ) gỡ bỏ tất node từ tập hợp phần tử so khớp, phương thức remove( expr ) gỡ bỏ tất phần tử so khớp từ DOM Dưới cú pháp: selector.remove( [ expr ]) or selector.empty( ) Bạn truyền tham số expr tùy ý để lọc tập hợp phần tử cần gỡ bỏ Ví dụ Trong ví dụ đơn giản, phần tử gỡ bỏ sau chúng click: The jQuery Example $(document).ready(function() { $("div").click(function () { $(this).remove( ); }); }); http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}

Click on any square below:

Nó cho kết sau: Chèn phần tử DOM jQuery Có thể có tình bạn muốn chèn nhiều phần tử DOM vào tài liệu tồn bạn jQuery cung cấp nhiều phương thức đa dạng để chèn phần tử vào vị trí khác Phương thức after( content ) chèn content sau phần tử so khớp, phương thức before( content ) chèn content trước phần tử so khớp Dưới cú pháp phương thức: selector.after( content ) or selector.before( content ) Ở đây, content bạn muốn chèn Nó HTML văn Ví dụ Trong ví dụ sau, phần tử div chèn trước phần tử click: The jQuery Example $(document).ready(function() { $("div").click(function () { $(this).before('' ); }); }); div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} class="div" style="background-color:green;"> Nó cho kết sau: Các phương thức thao tác DOM jQuery Dưới liệt kê tất phương thức mà bạn sử dụng để thao tác phần tử DOM: http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     STT Phương thức & Miêu tả after( content ) Chèn content sau phần tử so khớp append( content ) Phụ thêm content tới bên phần tử so khớp appendTo( selector ) Phụ thêm tất phần tử so khớp tới tập hợp phần tử cho khác before( content ) Chèn content trước phần tử so khớp clone( bool ) Mô phần tử DOM so khớp, tất Event Handler chúng, chọn mơ clone( ) Mơ phần tử DOM so khớp chọn mô empty( ) Gỡ bỏ tất node từ tập hợp phần tử so khớp html( val ) Thiết lập nội dung HTML phần tử so khớp html( ) Nhận nội dung HTML (HTML bên trong) phần tử so khớp 10 insertAfter( selector ) Chèn tất phần tử so khớp vào sau tập hợp phần tử xác định khác http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     11 insertBefore( selector ) Chèn tất phần tử so khớp vào trước tập hợp phần tử xác định khác 12 prepend( content ) Thêm vào trước content tới bên phần tử so khớp 13 prependTo( selector ) Thêm vào trước tất phần tử so khớp tới tập hợp phần tử xác định khác 14 remove( expr ) Gỡ bỏ tất phần tử so khớp từ DOM 15 replaceAll( selector ) Thay phần tử so khớp Selector cho với phần tử so khớp 16 replaceWith( content ) Thay tất phần tử so khớp với phần tử HTML DOM xác định 17 text( val ) Thiết lập nội dung text tất phần tử so khớp 18 text( ) Nhận nội dung text tổ hợp tất phần tử so khớp 19 wrap( elem ) Bao bọc (wrap) phần tử so khớp với phần tử xác định 20 wrap( html ) Wrap phần tử so khớp với nội dung HTML xác định 21 wrapAll( elem ) Wrap tất phần tử tập hợp so khớp vào phần tử bao bọc đơn (elem phần tử DOM) http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/jquery/index.jsp                                                                                                              Copyright  ©  vietjack.com     22 wrapAll( html ) Wrap tất phần tử tập hợp so khớp vào phần tử bao bọc đơn (html phần tử HTML) 23 wrapInner( elem ) Wrap nội dung bên phần tử so khớp (bao gồm node văn bản) với phần tử DOM 24 wrapInner( html ) Wrap nội dung bên phần tử so khớp (bao gồm node văn bản) với cấu trúc HTML   http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     ... với "JQuery is Great "trong Thư viện C: The jQuery Example ... style="background-color:red;"> Nó cho kết sau: Các phương thức thao tác DOM jQuery Dưới liệt kê tất phương thức mà bạn sử dụng để thao tác phần tử DOM: http://vietjack.com/                            ... style="background-color:red;"> Nó cho kết sau: Chèn phần tử DOM jQuery Có thể có tình bạn muốn chèn nhiều phần tử DOM vào tài liệu tồn bạn jQuery cung cấp nhiều phương thức đa dạng để chèn phần tử