Học jquery cơ bản nâng cao p7 Thao tác các thành phần

Thao tác các thành phần (Manipulating Elements)
Trong phần 7 học jquery từ cơ bản đến nâng cao này. Mình xin giới thiệu đến các bạn việc thao tác các thành phần (thẻ) giúp các bạn có thể thao tác với các thẻ (thành phần) như get hay set với các thành phần.

Getting và Setting thành phần (thẻ)
Có nhiều cách để bạn có thể thay đổi các thanh phần đã có. Trong đó đa phần các bạn hay thay đổi bên trong html hoặc thuộc tính của thành phần đó. Bạn có thể get hoặc set các thuộc tính hoặc bên trong các thẻ bởi các phương thức được gọi là getter và setter. Để biết thêm về các phương thức get và set với các thành phần (thẻ) được chọn bạn có thể đọc bài trước đó Học jquery cơ bản nâng cao p6 làm việc với Selections để biết thêm về các phương thức này:

• .html() – Get hoặc set nội dung bên trong thẻ HTML .
• .text() – Get hoặc set chỉ text ; thẻ HTML sẽ bị loại bỏ.
• .attr() – Get hoặc set giá trị cho thuộc tính được cung cấp.
• .width() – Get hoặc set độ rộng của thành phần (thẻ) đầu tiên được chọn và được tính theo đơn vị pixel và độ rộng là một số nguyên.
• .height() – Get hoặc set độ cao của thành phần (thẻ) đầu tiên được chọn và được tính theo đơn vị pixel và độ cao là một số nguyên.
• .position() – Trả về vị trí của đối tượng thành phần (thẻ) đầu tiên được chọn, vị trị của nó là vị trí phụ thuộc vào cha của nó.
• .val() – Get hoặc set giá trị của các thành phần trong form.

Sao chép (Cloning) Elements
Phương thức như là .appendTo() để di chuyển các thẻ, nhưng một vài trường hợp bạn muốn copy thẻ đó bạn có thể sử dụng hàm.clone() để thực hiện điều đó:

// Making a copy of an element.

// Copy the first list item to the end of the list:
$( "#myList li:first" ).clone().appendTo( "#myList" );
Xoá (Removing) Elements
Có 2 cách để bạn có thể xoá elements từ trang của bạn: .remove() và .detach().

Sử dụng .remove() khi bạn muốn xoá elements vĩnh viễn khỏi page của bạn. Khi sử dụng .remove() nó sẽ trả về thành phần bị xoá, những thành phần này sẽ không liên kết đến dữ liệu và sự kiện đã thêm vào chúng nếu bạn trả chúng lại vào page.

Sử dụng .detach() nếu bạn muốn giữ lại data và event của thành phần. Giống như .remove(), nó trả về thành phần đó nhưng nó sẽ có thể liên kết lại được với data và event khi chúng ta restore (hoàn lại) thẻ (elements) đó trở lại page.

Tạo mới (Creating New) Elements
Jquery cung cấp cho chúng ta phương thức để tạo mới element khá đơn giản như sau:

// Creating new elements from an HTML string.
$( "<p>This is a new paragraph</p>" );
$( "<li class=\"new\">new list item</li>" );

hoặc bạn có thể làm theo cách sau thêm các thuộc tính cho thẻ

// Creating a new element with an attribute object.
$( "<a/>", {
html: "This is a <strong>new</strong> link",
"class": "new",
href: "foo.html"
});

Khi bạn tạo mới một thẻ thì nó chưa được thêm ngay vào trong page mà bạn phải sử dụng một trong các cách sau để thêm thẻ mới tạo vào trong page của bạn:
// Getting a new element on to the page.

var myNewElement = $( "<p>New element</p>" );

myNewElement.appendTo( "#content" );

myNewElement.insertAfter( "ul:last" ); // This will remove the p from #content!

$( "ul" ).last().after( myNewElement.clone() ); // Clone the p so now we have two.

Để tạo mới một thẻ bạn không cần nhất thiết cứ phải lưu vào trong biến mà bạn có thể thêm trực tiếp nó vào page bằng cách sau:
// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );

Cú pháp để thêm một thẻ mới vào page là khá đơn giản. Nếu bạn muốn thêm nhiều thẻ vào trong cùng một thẻ cha, bạn sẽ phải nối tất cả các thẻ html cần thêm vào trong một chuỗi (single string), Sử dụng mảng để thực hiện việc này đẩy tất cả các thẻ html cần thêm vào một mảng sau đó sử dụng hàm join để nối chúng như một chuỗi rồi mới append chúng vào thẻ cần thêm. Xem ví dụ dưới đây:

var myItems = [];
var myList = $( "#myList" );

for ( var i = 0; i < 100; i++ ) {
myItems.push( "<li>item " + i + "</li>" );
}

myList.append( myItems.join( "" ) );

Thao tác các thuộc tính (Manipulating Attributes)
// Manipulating a single attribute.
$( "#myDiv a:first" ).attr( "href", "newDestination.html" );

// Manipulating multiple attributes.
$( "#myDiv a:first" ).attr({
href: "newDestination.html",
rel: "nofollow"
});
// Using a function to determine an attribute's new value.
$( "#myDiv a:first" ).attr({
rel: "nofollow",
href: function( idx, href ) {
return "/new/" + href;
}
});

$( "#myDiv a:first" ).attr( "href", function( idx, href ) {
return "/new/" + href;
});
- Nguồn: vnfit.com/hoc-jquery-co-ban-nang-cao-p7-thao-tac-cac-thanh-phan/