Jquery 6 – Chương 6 – Sửa đổi DOM

Chương 6 – Sửa đổi DOM

 

Bạn đã từng xem ảo thuật và thấy những ảo thuật gia có thể với tay lên không trung và cho

xuất hiện một bó hoa, jQuery cũng có thể tạo ra các thành phần, thuộc tính, và cả chữ trên

một trang web giống với cách mà ảo thuật gia trình diễn vậy. Hơn nữa, jQuery cũng có thể

làm biến mất tất cả những thứ nó tạo ra. Và chúng ta cũng có thể lấy bó hoa kia và biến nó

thành <div class=’magic’ id=’flowerToDove’>Dove</div>

 

Sửa đổi thuộc tính

 

Qua 4 chương đầu của giáo trình này, chúng ta đã biết cách sử dụng phương thức .addClass()

và .removeClass() để làm thay đổi giao diện của các thành phần trên trang web. Thực chất thì

những phương thức này sửa đổi thuộc tính của class. Phương thức .addClass() thì tạo ra hoặc

thêm vào cho thuộc tính, trong khi phương thức .removeClass() thì lại xoá hoặc giảm thuộc

tính. Còn có một phương thức nữa là .toggleClass(), nó có thể vừa loại bỏ và vừa thêm vào

một class. Như thế với 3 phương thức trên chúng ta đã có những công cụ đủ mạnh để làm

việc với class.

 

Tuy nhiên, thuộc tính class chỉ là một trong số những thuộc tính mà chúng ta cần dùng tới

hoặc thay đổi. Ví dụ, id, rel và href. Để sửa đổi những thuộc tính này, jQuery cung cấp

phương thức .attr() và .removeAttr(). Chúng ta thậm chí có thể sử dụng .attr() và

.removeAttr() để sửa đổi thuộc tính class. Nhưng phương thức chuyên dụng là .addClass() và

.removeClass() thì phù hợp hơn trong trường hợp này bởi vì nó có thể xử lý chính xác những

trường hợp một phần tử có nhiều class như: <div class=’first second’>.

 

Thuộc tính phi class

 

Có những thuộc tính không đơn giản để sửa đổi nếu không có sự trợ giúp của jQuery. Hơn

nữa, jQuery cho phép chúng ta sửa đổi nhiều thuộc tính cùng một lúc, tương tự như cách mà

chúng ta làm việc với nhiều thuộc tính CSS khi sử dụng phương thức .css() ở chương 4.

 

Ở ví dụ này, chúng ta có thể dễ dàng thiết lập id, rel và thuộc tính title cho đường liên kết

cùng một lúc. Dưới đây là mã HTML

 

<h1>jQuery DOM Manipulation</h1>

<h3>An example at izwebz.com</h3>

<div class="chapter">

<p class="first">Qua 4 chương đầu của giáo trình này, chúng ta đã

biết cách sử

dụng phương thức .addClass() và .removeClass() để làm thay đổi giao

diện của

các thành phần trên trang web. <a href="http://www.izwebz.com">Thực</span>

chất</a> thì những phương thức này sửa đổi thuộc tính của class. Phương

thức .addClass() thì tạo ra hoặc thêm vào cho

thuộc tính, trong khi phương thức .removeClass() thì lại xoá hoặc

giảm thuộc

tính.

</p>

 

<p class="second method">Tuy nhiên, thuộc tính class chỉ là một

trong số

những thuộc tính mà chúng ta cần dùng tới hoặc thay đổi. Ví dụ, id,

rel và href.

Để sửa đổi những thuộc tính này, <a

href="http://www.izwebz.com">jQuery</a> cung cấp phương thức .attr()

và .removeAttr(). Chúng ta thậm chí có thể sử dụng .attr() và

.removeAttr()

để sửa đổi <a href="http://www.izwebz.com">thuộc tính</a> class.

Nhưng phương thức chuyên dụng là .addClass()

và .removeClass() thì phù hợp hơn trong trường hợp này bởi vì nó

<a href="http://www.izwebz.com">có thể</a> xử lý

chính xác những trường hợp một phần tử có nhiều class như:

</p>

 

<p><span class="pull-quote">

Có những thuộc tính <span class="drop">không đơn giản</span> để sửa

đổi nếu không có sự trợ giúp của

jQuery. Hơn nữa, <strong>jQuery</strong> cho phép chúng ta sửa đổi

nhiều thuộc tính cùng một lúc,

tương tự như cách mà chúng ta làm việc với nhiều thuộc tính

CSS</span> khi sử dụng

phương thức .css() ở chương 4. Ở ví dụ này, chúng ta có thể dễ

dàng thiết lập

id, rel và thuộc tính title cho đường liên kết cùng một lúc. Dưới

đây là mã

HTML

</p>

 

</div><!–End .chapter–>

 

Bây giờ chúng ta có thể đi qua từng đường liên kết trong thẻ <div class=’chapter’> và áp

dụng thuộc tính cho chúng từng thẻ một. Nếu bạnchỉ muốn tạo ra một giá trị thuộc tính giống

nhau cho tất cả các đường liên kết, thì bạn chỉ cần một dòng mã đơn giản sau:

 

$(document).ready(function() {

$('div.chapter a').attr({'rel': 'external'});

});

 

Cách này có thể dùng được bởi vì chúng ta muốn giá trị của thuộc tính rel vừa tạo là như

nhau ở tất cả các đường liên kết. Tuy nhiên, thường thì những thuộc tính ta thêm vào hoặc

thay đổi phải có giá trị khác nhau cho mỗi một thành phần. Ví dụ với bất cứ tài liệu nào, mỗi

một id đều phải là duy nhất nếu ta muốn mã javaScript của mình làm việc theo ý muốn. Để

tạo được một id duy nhất cho mỗi đường liên kết, chúng ta không sử dụng phương pháp ở

trên nữa mà thay vào đó sử dụng phương thức .each().

 

$(document).ready(function() {

$('div.chapter a').each(function(index) {

$(this).attr({

'rel': 'external',

'id': 'izwebz-' + index

});

});

});

 

Phương thức .each() hoạt động như vòng lặp hiện, nó có nguyên lý hoạt động như vòng lặp

for nhưng thuận tiện hơn. Người ta thường sử dụng phương thức này khi mà đoạn mã chúng

ta sử dụng trên mỗi phần tử của bộ chọn quá phức tạp cho vòng lặp ẩn. Trong trường hợp

này, hàm ẩn của phương thức .each() được gán một số index để chúng ta có thể gắn nó cho

mỗi id. Đối số index này hoạt động như một bộ đếm, bắt đầu từ số 0 cho đường liên kết đầu

tiên và tăng dần 1 đơn vị cho mỗi đường liên kết kế tiếp. Cho nên khi ta thiết lập id thành

‘izwebz-’ + index, thì đường liên kết đầu tiên sẽ có id là izwebz-0, đường liên kết thứ 2 sẽ

làizwebz -1, v.v..

 

Xem Demo Online – Example 1 (dùng firebug để inspect link)

 

Chúng ta sẽ sử dụng thuộc tính title để cho người đọc biết thêm thông tin về đường liên kết ở

Izwebz. Ở ví dụ dưới đây, tất cả các đường liên kết đều hướng tới izwebz.com. Tuy nhiên,

chúng ta nên để cho biểu thức bộ chọn được cụ thể hơn, chúng ta chỉ nên chọn những đường

liên kết có chứa izwebz trong phần href. Để phòng sau này chúng ta lại thêm những đường

liên kết khác không phải là izwebz.

 

$(document).ready(function() {

$('div.chapter a[href*=izwebz]').each(function(index) {

var $thisLink = $(this);

$thisLink.attr({

'rel': 'external',

'id': 'izwebzLink-' + index,

'title': 'know more about ' + $thisLink.text() + ' at

izwebz'

});

});

});

 

Ở đây có điểm bạn cần chú ý là chúng ta đã lưu lại từ khoá $(this) vào một biến gọi là

$thisLink, bởi vì chúng ta sử dụng nó nhiều hơn một lần.

 

Với cả 3 giá trị thuộc tính được thiết lập như trên, bây giờ đường liên kết của chúng ta sẽ có

dạng như sau:

 

<a href="http://www.izwebz.com"</span> rel="external" id="izwebzLink-0"

title="know more about Thực chất at izwebz">Thực chất</a>

 

Xem Demo Online – Example 2 (dùng firebug để inspect link)

 

Ôn lại hàm $()

 

Từ khi bắt đầu làm quen với jQuery, chúng ta đã biết cách sử dụng hàm $() để tiếp cận các

thành phần trên trang. Thực tế thì hàm này là trọng tâm của thư viện jQuery, bởi vì nó được

gọi mỗi khi chúng ta cần gán một hiệu ứng, sự kiện hoặc thuộc tính cho một phần tử.

 

Nhưng hàm $() còn một chức năng khác nữa nằm trong hai dấu ngoặc – tính năng này rất đỗi

mạnh mẽ đến nỗi nó không những có thể thay đổi giao diện của một thành phần mà nó còn có

thể thay đổi nội dung của một trang web. Chỉ đơn giản bằng cách chèn một đoạn mã HTML

nằm giữa hai dấu ngoặc, chúng ta có thể tạo ra một cấu trúc DOM mới từ hư vô.

 

Chú ý: Bạn cũng nên chú ý khi tạo ra những hiệu ứng để cải thiện giao diện hoặc nội dung

phụ thuộc vào javaScript. Bởi vì không phải ai cũng bật javaScript, nên những thông tin quan

trọng phải được nhìn thấy bởi tất cả mọi người, chứ không phải chỉ nhóm người có trình

duyệt hiện đại hoặc bật javaScript.

 

Một chức năng thường thấy trong những trang FAQs là đường liên kết Back to top ở dưới

mỗi câu hỏi và trả lời. Bởi vì cái này nếu có bỏ đi hoặc không được hiển thị ở một số trình

duyệt thì cũng không ảnh hưởng đến nội dung chính của trang. Do vậy chúng ta có thể dùng

JavaScript để thêm vào. Chúng ta sẽ thêm vào đường liên kết Back to top ở cuối mỗi đoạn

văn, và điểm dừng mà đường liên kết Back to top sẽ dẫn tới. Chúng ta tạo ra các thành phần

mới như sau:

 

$(document).ready(function() {

$('<a href="#top">back to top</a>');

$('<a id="top"></a>');

});

 

Khi cho chạy thử đoạn mã trên, bạn vẫn không thấy những đường liên kết back to top và các

điểm dừng xuất hiện, cho dù ta đã tạo nó ở đoạn code trên. Vấn đề là dòng mã ở trên đã tạo ra

các thành phần ta muốn, nhưng nó chưa được thêm vào trang. Để làm được điều này, chúng

ta có thể sử dụng một trong rất nhiều phương thức chèn của jQuery.