Attribute trong Javascript là gì
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. Show 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 Đ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ọnjQuey cung cấp phương thức removeAttr để xoá các attributes của các phần tử DOM. Cú pháp:
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 propertiesThiết lập và nhận giá trị các properties từ các phần tử được chọnTừ 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:
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ọnjQuey 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:
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():
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ệuThê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:
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ệuXoá dữ liệu từ một phần tử với phương thức data() theo cú pháp:
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:
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 |