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ụ:
Đ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:
Đ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:
Đ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:
Đ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:
This is paragraph.
Đ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:
This is a paragraph.
Đoạn mã jQuery:
alert[$["p"].prop["id"]]; // helloVí dụ 2: thiết lập giá trị của thuộc tính style
Cho đoạn mã HTML sau:
This is a paragraph.
Đ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:
This is a paragraph.
Đoạn mã jQuery:
$["p"].prop["id",function[n, v]{ v = "ABC"; return v; }]; alert[$["p"].prop["id"]];// ABCVí 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:
This is a paragraph.
Đ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:
This is a paragraph.
Đ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:
Đoạn mã jQuery:
alert[$["input"].attr["checked"]];// checked alert[$["input"].prop["checked"]]; // trueLư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:
This is a paragraph.
Đ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:
This is a paragraph.
Đ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:
This is a paragraph.
Đ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 23Xoá 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:
This is a paragraph.
Đ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"]];// undefinedKiể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:
This is a paragraph.
Đ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