Tìm hiểu về JQuery part 5
Chào tất cả mọi người. Tháng 8 mình sẽ tiếp tục với các bài viết liên quan đến Jquery. Trong 4 phần trước thì Chúng ta đã tìm hiểu kha khá kiến thức về Jquery rồi . Hôm nay chúng ta sẽ tiếp tục đi tìm hiểu làm thế nào để Thao tác DOM trong jQuery . jQuery cung cấp các phương thức để thao tác với ...
Chào tất cả mọi người. Tháng 8 mình sẽ tiếp tục với các bài viết liên quan đến Jquery. Trong 4 phần trước thì Chúng ta đã tìm hiểu kha khá kiến thức về Jquery rồi . Hôm nay chúng ta sẽ tiếp tục đi tìm hiểu làm thế nào để 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.
để hiểu rõ hơn DOM là gi và các loại trong DOM các bạn theo link sau DOM là gì.
selector.html( )
- Phương thức html() trong jQuery nhận các nội dung HTML của phần tử đầu tiên được so khớp. Thuộc tính này không có sẵn trong tài liệu XML nhưng có trong XHTML.
- Phương thức html(val) trong jQuery thiết lập các nội dung HTML của mỗi phần tử được so khớp. Thuộc tính này không có sẵn trong tài liệu XML nhưng có trong XHTML.
Phương thức này được sử dụng nhiều khi chúng ta xử lý popup.
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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" language="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; awidth: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>
Theo như code trên khi bạn click vào vùng của DIV thì function click sẽ thực hiện lấy nội dung html ở trong div và append và thẻ span có ID = "result". Try here
selector.replaceWith( newContent )
- Phương thức replaceWith(content) trong jQuery 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. Nó trả về phần tử JQuery vừa bị thay thế, mà đã bị gỡ bỏ từ DOM.
- .replaceWith() sẽ remove tất cả data cũng như các sự kiện (event) liên quan đến DOM element vừa bị remove
- newContent có thể là chuỗi HTML, DOM element, 1 array chứa DOM element hoặc có thể là 1 Jquerry Object.
ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; awidth: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>
Ví dụ đơn giản sau sẽ thay thế phần tử div với "":
Try here
.remove(), empty( )
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ả bao gồm cả element call .remove().
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; awidth: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>
Trong ví dụ đơn giản, các phần tử được gỡ bỏ ngay sau khi chúng được click.
Try here
after( content ) , before( content )
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ử call function after(), trong khi phương thức before( content ) chèn content trước mỗi phần tử đã call function before().
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".before").click(function () {
$(this).before('<div class="div"></div>' );
});
$(".after").click(function () {
$(this).after('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; awidth:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id="result"> </span>
<div class="div after" style="background-color:blue;"> After</div>
<div class="div before" style="background-color:green;">Before</div>
<div class="div before" style="background-color:red;">Before</div>
</body>
</html>
Trong ví dụ này thì khi các bạn click vào các DIV có class là before thì sẽ chèn thêm 1 div vào vị trí phía trước Div mà các bạn vừa click, tương tự với các Div có class = "after" thì khi click sẽ chèn 1 Div vào phía sau try here
prependTo(selector)
-
Cú pháp : selector1.prependTo( selector2 )
-
Phương thức prependTo(selector) trong jQuery đưa selector1 lên phía trước selector2
ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).prependTo("#result");
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; awidth:60px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<p id="result"> THIS IS TEST </p>
<hr />
<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>
Trong ví dụ trên thì khi các bạn click và Div nào thì Div đó sẽ đc move lên phía trước element có Id = "result"
try here
Các phương thức thao tác DOM trong jQuery
| STT | Functin Name | Description |
|---|---|---|
| 1 | after( content ) | Chèn content sau mỗi phần tử đã so khớp |
| 2 | append( content ) | Phụ thêm content tới bên trong mỗi phần tử đã so khớp |
| 3 | appendTo( selector ) | Phụ thêm tất cả phần tử đã so khớp tới tập hợp phần tử đã cho khác |
| 4 | before( content ) | Chèn content trước mỗi phần tử đã so khớp |
| 5 | clone( bool ) | 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 đó |
| 6 | clone( ) | Mô phỏng các phần tử DOM đã so khớp và chọn các mô phỏng đó |
| 7 | empty( ) | Gỡ bỏ tất cả các node con từ tập hợp các phần tử đã so khớp |
| 8 | html( val ) | Thiết lập các nội dung HTML của mỗi phần tử đã so khớp |
| 9 | html( ) | 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 |
| 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 |
| 12 | prepend( content ) | Thêm vào trước content tới bên trong mỗi phần tử đã so khớp |
| 13 | prependTo( selector ) | 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 |
| 14 | remove( expr ) | 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 |
| 16 | replaceWith( content ) | 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 |
| 18 | text( ) | Nhận các nội dung text đã tổ hợp của tất cả phần tử đã so khớp |
| 19 | wrap( elem ) | Bao bọc (wrap) mỗi phần tử đã so khớp với phần tử đã xác định |
| 20 | wrap( html ) | Wrap mỗi phần tử đã so khớp với nội dung HTML đã xác định |
| 21 | wrapAll( elem ) | 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) |
| 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) |
| 23 | wrapInner( elem ) | 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 |
| 24 | wrapInner( 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 cấu trúc HTML |
