Trần Ngọc Minh Notes

Với các phương thức được cung cấp sẵn trong thư viện jQuery, chúng ta có thể tạo ra giao diện đẹp bằng cách xử lý properties, attributes, classes,  styles,… của các phần tử DOM.

Thế nào là property và attribute?

Từ property (hay số nhiều là properties) và attribute (hay số nhiều là attributes) đều có thể được hiểu là “thuộc tính” và là một cặp gồm tên thuộc tính (name) và giá trị (value). Property thường dùng để chỉ thành phần của một đối tượng JavaScript, attribute thường dùng khi muốn đề cập đến các giá trị của các phần tử đánh dấu DOM. Ví dụ:

<img src = “pic.jpg” width=300 height = 250 />

Trong đó: img là phần tử DOM; src, width, height là các attributes

Chính vì vậy, điểm khác biệt cơ bản giữa một property và một attribute là phần giá trị của attribute luôn là kiểu chuỗi (string), trong khi phần giá trị của property có thể là string, boolean, number, hay object.

Làm việc với các attributes

Thiết lập và nhận giá trị các attributes từ các phần tử được chọn

Trong jQuery, để nhận hay gán giá trị cho một attribute hay nhiều attributes chúng ta có thể dùng phương thức attr(), cú pháp:

Phương thức	Chức năng
attr(name)	Trả về giá trị của một attribute có tên là name của phần tử đầu tiên phù hợp. (Xem ví dụ 1)
attr(name, value)	Thiết lập thuộc tính, là cặp name/value, cho phần tử đầu tiên phù hợp. (Xem ví dụ 2)
attr(name, function(index, currentvalue))	Thiết lập thuộc tính, là cặp name/value, cho phần tử đầu tiên phù hợp, với: value được trả về từ hàm function gồm index là vị trí chỉ mục của phần tử trong tập, currentvalue là giá trị thuộc tính hiện tại của phần tử được chọn. (Xem ví dụ 3)
attr(name:value, name:value, …)	Thiết lập  nhiều thuộc tính, là các cặp name/value, cho phần tử đầu tiên phù hợp, với: value được trả về từ hàm function gồm index là vị trí chỉ mục của phần tử trong tập, currentvalue là giá trị thuộc tính hiện tại của phần tử được chọn. (Xem ví dụ 4)

Ví dụ 1: trả về giá trị của thuộc tính width

Cho đoạn mã HTML sau:

<img src="abc.jpg" alt="ABC" width="284" height="213"/>

Đoạn mã jQuery:

alert ("Image width: " + $("img").attr("width"));

Ví dụ 2: thiết lập giá trị của thuộc tính width đến 500
Cho đoạn mã HTML sau:

<img src="abc.jpg" alt="ABC" width="284" height="213"/>

Đoạn mã jQuery:

$("img").attr("width", "500");

Ví dụ 3: giảm giá trị của thuộc tính width 50px bằng hàm

Cho đoạn mã HTML sau:

<img src="abc.jpg" alt="ABC" width="284" height="213"/>

Đoạn mã jQuery:

$("img").attr("width",function(n, v){

  return v - 50;});

Ví dụ 4: trả về giá trị của thuộc tính width và thuộc tính height

Cho đoạn mã HTML sau:

<img src="abc.jpg" alt="ABC" width="284" height="213"/>

Đoạn mã jQuery:

$("img").attr({width:"150", height: "100"});

Xoá các attributes của các phần tử được chọn

jQuey cung cấp phương thức removeAttr để xoá các attributes của các phần tử DOM. Cú pháp:

Phương thức	Chức năng
removeAttr(attributename) removeAttr(attributename1, attributename2,…)	Xoá một thuộc tính (attributename) hay nhiều thuộc tính (attributename1, attributename2,…) của các phần tử được chọn  (Xem ví dụ bên dưới)

Ví dụ: xoá thuộc tính style của p

Cho đoạn mã HTML sau:

<p style="font-weight:bold;color:blue">This is paragraph.</p>

Đoạn mã jQuery:

$("p").removeAttr("style");

Làm việc với các properties

Thiết lập và nhận giá trị các properties từ các phần tử được chọn

Từ các phiên bản jQuery 1.6 trở về trước, attr () là phương thức duy nhất để thao tác với attributes hay properties. Các phiên bản jQuery sau này cung cấp thêm phương thức prop() để khẳng định sự khác biệt giữa attributes và properties. Việc dùng prop() để thiết lập, nhận, hay xoá properties tương tự dùng attr() với attributes.

Trong jQuery, để nhận hay gán giá trị cho một property hay nhiều properties chúng ta có thể dùng phương thức prop(), cú pháp:

Phương thức	Chức năng
prop(name)	Trả về giá trị của một property có tên là name của phần tử đầu tiên phù hợp. (Xem ví dụ 1)
prop(name, value)	Thiết lập thuộc tính, là cặp name/value, cho phần tử đầu tiên phù hợp. (Xem ví dụ 2)
prop(name, function(index, currentvalue))	Thiết lập thuộc tính, là cặp name/value, cho phần tử đầu tiên phù hợp, với: value được trả về từ hàm function gồm index là vị trí chỉ mục của phần tử trong tập, currentvalue là giá trị thuộc tính hiện tại của phần tử được chọn. (Xem ví dụ 3)
prop(name:value, name:value, …)	Thiết lập  nhiều thuộc tính, là các cặp name/value, cho phần tử đầu tiên phù hợp, với: value được trả về từ hàm function gồm index là vị trí chỉ mục của phần tử trong tập, currentvalue là giá trị thuộc tính hiện tại của phần tử được chọn. (Xem ví dụ 4)

Ví dụ 1: trả về giá trị của thuộc tính id

Cho đoạn mã HTML sau:

<p id ="hello">This is a paragraph. </p>

Đoạn mã jQuery:

alert($("p").prop("id")); // hello

Ví dụ 2: thiết lập giá trị của thuộc tính style

Cho đoạn mã HTML sau:

<p id ="hello">This is a paragraph. </p>

Đoạn mã jQuery:

$("p").prop("style", "color:red");

Ví dụ 3: thiết lập giá trị thuộc tính bằng hàm

Cho đoạn mã HTML sau:

<p id ="hello">This is a paragraph. </p>

Đoạn mã jQuery:

$("p").prop("id",function(n, v){

  v = "ABC";

  return v;

});

alert($("p").prop("id"));// ABC

Ví dụ 4: trả về giá trị của thuộc tính style và thuộc tính id

Cho đoạn mã HTML sau:

<p id = "hello">This is a paragraph. </p>

Đoạn mã jQuery:

$("p").prop({style:"color:red", id: "ABC"});

Xoá các properties của các phần tử được chọn

jQuey cung cấp phương thức removeProp để xoá một property được thiết lập bởi phương thức prop(). Cú pháp:

Phương thức	Chức năng
removeProp(propertyname)	Xoá một thuộc tính (propertyname) của các phần tử được chọn  (Xem ví dụ bên dưới)

Ví dụ: xoá thuộc tính color của p

Cho đoạn mã HTML sau:

<p>This is a paragraph.</p>

Đoạn mã jQuery:

$("p").prop("color", "red");

alert($("p").prop("color));// red

$("p").removeProp("color");

alert($("p").prop("color));// undefied

* Một vài lưu ý khi dùng phương thức removeProp():

• Không dùng để xoá các thuộc tính gốc của phần tử như id, class, style, checked,…
• Phương thức removeProp chỉ xoá được một property

Giá trị trả về của attr() và prop() có thể khác nhau qua ví dụ sau:

Cho đoạn mã HTML sau:

<input id="check1" type="checkbox" checked="checked">

Đoạn mã jQuery:

alert($("input").attr("checked"));// checked

alert($("input").prop("checked")); // true

Lưu trữ dữ liệu trên các phần tử

jQuery cung cấp các phương thức data() và removeData() để thêm và xoá dữ liệu trên các phần tử.

Thêm, nhận dữ liệu

Thêm và nhận dữ liệu, thường là cặp name/value, với phương thức data() theo cú pháp:

Phương thức	Chức năng
data(name)	Nhận dữ liệu, tên name, từ phần tử (Ví dụ 2)
data(name, value)	Thêm dữ liệu, tên name và giá trị là value, đến phần tử (Ví dụ 1)
data(object)	Thêm dữ liệu đến phần tử bằng một object (Ví dụ 3)

Ví dụ 1: thêm dữ liệu đến phần tử

Cho đoạn mã HTML sau:

<p>This is a paragraph.</p>

Đoạn mã jQuery:

$("p").data("Greeting","Hello, everyone!");

Ví dụ 2: nhận dữ liệu từ phần tử

Cho đoạn mã HTML sau:

<p>This is a paragraph.</p>

Đoạn mã jQuery:

$("p").data("Greeting","Hello, everyone!");

alert($("p").data("Greeting"));// Hello, everyone!

Ví dụ 3: dùng object

Cho đoạn mã HTML sau:

<p>This is a paragraph.</p>

Đoạn mã jQuery:

obj = new Object();

obj.Name = "Ngoc Minh";

obj.Age = 23;

$("p").data(obj);

alert("Hello " + $("p").data("Name") +" " + $("p").data("Age"));

// Hello Ngoc Minh 23

Xoá dữ liệu

Xoá dữ liệu từ một phần tử với phương thức data() theo cú pháp:

Phương thức	Chức năng
removeData(name)	Xoá dữ liệu, tên name, từ phần tử. Nếu dữ liệu không được xác định, toàn bộ dữ liệu của phần tử sẽ bị xoá (Ví dụ ).

Ví dụ: xoá dữ liệu từ phần tử

Cho đoạn mã HTML sau:

<p>This is a paragraph.</p>

Đoạn mã jQuery:

// gán dữ liệu đến phần tử p

$("p").data("Greeting","Hello, everyone!");

alert($("p").data("Greeting"));// Hello, everyone!

// xoá dữ liệu Greeting

$("p").removeData("Greeting");

alert($("p").data("Greeting"));// undefined

Kiểm tra một phần tử có dữ liệu được thiết lập bởi phương thức data()

Để kiểm tra một phần tử có dữ liệu được gán từ phương thức data() hay không, chúng ta dùng phương thức hasData() theo cú pháp sau:

Phương thức	Chức năng
hasData(name)	Trả về false nếu dữ liệu name chưa được gán đến phần tử, ngược lại là true. (Xem ví dụ)

Ví dụ: kiểm tra dữ liệu có được thêm đến phần tử hay chưa

Cho đoạn mã HTML sau:

<p>This is a paragraph.</p>

Đoạn mã jQuery:

// kiểm tra dữ liệu Greeting có tồn tại hay không

alert($.hasData($("p")[0]));// false

// gán dữ liệu đến phần tử p

$("p").data("Greeting","Hello, everyone!");

alert($.hasData($("p")[0]));//true

< Học jQuery