Prop jquery là gì

Với các cách tiến hành được hỗ trợ sẵn trong thỏng viện jQuery, chúng ta cũng có thể tạo nên hình ảnh đẹp mắt bằng phương pháp giải pháp xử lý properties, attributes, classes, styles,… của những bộ phận DOM.

Bạn đang xem: Prop jquery là gì

Thế nào là property cùng attribute?

Từ property (tuyệt số các là properties) với attribute (tuyệt số các là attributes) những rất có thể được hiểu là “ở trong tính” cùng là 1 cặp tất cả tên thuộc tính (name) với quý giá (value). Property thường xuyên dùng làm chỉ nhân tố của một đối tượng người sử dụng JavaScript, attribute hay được sử dụng Khi ao ước đề cùa tới những quý giá của các phần tử khắc ghi DOM. Ví dụ:

Trong đó: img là phần tử DOM; src, width, height là những attributes

Chính vày vậy, điểm khác hoàn toàn cơ phiên bản thân một property với một attribute là phần cực hiếm của attribute luôn luôn là vẻ bên ngoài chuỗi (string), trong những lúc phần giá trị của property hoàn toàn có thể là string, boolean, number, tuyệt object.

Làm vấn đề cùng với những attributes

Thiết lập cùng nhấn quý giá các attributes tự những thành phần được chọn

Trong jQuery, nhằm dìm tuyệt gán cực hiếm cho một attribute hay các attributes bạn cũng có thể cần sử dụng cách thức attr(), cú pháp:

Phương thơm thứcChức năng
attr(name)

Trả về quý giá của một attribute mang tên là name của bộ phận đầ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, mang đến phần tử đầu tiên cân xứng. (Xem ví dụ 2)
attr(name, function(index, currentvalue))Thiết lập ở trong tính, là cặp name/value, mang lại bộ phận trước tiên phù hợp, với:

value được trả về từ bỏ hàm function gồm index là vị trí chỉ mục của phần tử vào tập, currentvalue là cực hiếm thuộc tính hiện nay của bộ phận được lựa chọn. (Xem ví dụ 3)

attr(name:value, name:value, …)Thiết lập những nằm trong tính, là các cặp name/value, mang đến bộ phận trước tiên cân xứng, với:

value được trả về trường đoản cú hàm function bao gồm index là địa chỉ chỉ mục của thành phần vào tập, currentvalue là quý hiếm thuộc tính hiện tại của thành phần được lựa chọn. (Xem ví dụ 4)

lấy ví dụ như 1: trả về quý hiếm của ở trong tính width

Cho đoạn mã HTML sau:

Đoạn mã jQuery:

alert ("Image width: " + $("img").attr("width"));lấy ví dụ 2: thiết lập cấu hình quý hiếm của trực thuộc tính width cho 500Cho đoạn mã HTML sau:

Đoạn mã jQuery:

$("img").attr("width", "500");ví dụ như 3: Giảm ngay trị của nằm trong 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;);lấy ví dụ 4: trả về quý giá của nằm trong tính width cùng ở trong 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 bộ phận được chọnjQuey cung ứng cách tiến hành removeAttr nhằm xoá những attributes của những phần tử DOM. Cú pháp:

Pmùi hương thứcChức năng
removeAttr(attributename)

removeAttr(attributename1, attributename2,…)

Xoá một ở trong tính (attributename) xuất xắc nhiều nằm trong tính (attributename1, attributename2,…) của những bộ phận được lựa chọn (Xem ví dụ mặt 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 bài toán cùng với những properties

Thiết lập với nhấn quý giá các properties từ bỏ những bộ phận được chọnTừ các phiên bản jQuery 1.6 trngơi nghỉ về trước, attr () là phương thức nhất để làm việc với attributes tuyệt properties. Các phiên bạn dạng jQuery sau đây hỗ trợ thêm thủ tục prop() để xác minh sự khác hoàn toàn thân attributes với properties. Việc dùng prop() để tùy chỉnh thiết lập, nhấn, tốt xoá properties tương tự sử dụng attr() cùng với attributes.

Trong jQuery, để thừa nhận tốt gán cực hiếm cho một property giỏi nhiều properties bạn cũng có thể dùng cách thức prop(), cú pháp:

Pmùi hương thứcChức năng
prop(name)

Trả về giá trị của một property mang tên là name của phần tử thứ nhất tương xứng. (Xem ví dụ 1)
prop(name, value)Thiết lập thuộc tính, là cặp name/value, mang đến thành phần trước tiên phù hợp. (Xem ví dụ 2)
prop(name, function(index, currentvalue))Thiết lập trực thuộc tính, là cặp name/value, cho thành phần trước tiên tương xứng, với:

value được trả về tự hàm function gồm index là vị trí chỉ mục của bộ phận vào tập, currentvalue là quý giá ở trong tính hiện thời của bộ phận được chọn. (Xem ví dụ 3)

prop(name:value, name:value, …)Thiết lập các trực thuộc tính, là các cặp name/value, mang lại phần tử thứ nhất tương xứng, với:

value được trả về từ bỏ hàm functionindex là địa chỉ chỉ mục của thành phần trong tập, currentvalue là quý giá thuộc tính hiện nay của phần tử được chọn. (Xem ví dụ 4)

lấy ví dụ 1: trả về quý giá 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 cấu hình cực hiếm của trực thuộc tính style

Cho đoạn mã HTML sau:

This is a paragraph.

Đoạn mã jQuery:

$("p").prop("style", "color:red");lấy ví dụ 3: thiết lập cấu hình cực hiếm thuộc tính bởi 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"));// ABClấy ví dụ như 4: trả về quý giá của thuộc tính style và trực 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 những thành phần được chọnjQuey cung cấp thủ tục removeProp nhằm xoá một property được thiết lập bởi vì phương thức prop(). Cú pháp:

Pmùi hương thứcChức năng
removeProp(propertyname)

Xoá một ở trong tính (propertyname) của những phần tử được lựa chọn (Xem ví dụ mặt 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 để ý khi sử dụng cách làm removeProp():

Không dùng làm xoá những ở trong tính cội của phần tử nhỏng id, class, style, checked,…Pmùi hươ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"));// checkedalert($("input").prop("checked")); // true

Lưu trữ dữ liệu bên trên những phần tử

jQuery cung cấp các cách tiến hành data() và removeData() nhằm thêm với xoá dữ liệu trên những thành phần.

Xem thêm: “ Smartscreen Là Gì Và Nó Hoạt Động Như Thế Nào? Windows Smartscreen Có Chức Năng Gì

Thêm, dấn dữ liệu

Thêm cùng nhấn tài liệu, thường xuyên là cặp name/value, với thủ tục data() theo cú pháp:

Phương thứcChức năng
data(name)Nhận dữ liệu, thương hiệu name, trường đoản cú thành phần (Ví dụ 2)
data(name, value)Thêm tài liệu, thương hiệu name với quý giá là value, mang lại thành phần (lấy một ví dụ 1)
data(object)Thêm dữ liệu mang lại thành phần bằng một object (lấy một ví dụ 3)

lấy ví dụ 1: thêm tài liệu cho phần tử

Cho đoạn mã HTML sau:

This is a paragraph.

Đoạn mã jQuery:

$("p").data("Greeting","Hello, everyone!");lấy ví dụ như 2: dìm tài liệu trường đoản cú 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!lấy ví dụ 3: cần sử 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ừ bỏ 1 phần tử cùng với cách thức data() theo cú pháp:

Pmùi hương thứcChức năng
removeData(name)Xoá dữ liệu, tên name, tự thành phần. Nếu tài liệu không được khẳng định, toàn cục tài liệu của phần tử có khả năng sẽ bị xoá (lấy một ví dụ ).

Ví dụ: xoá dữ liệu trường đoản cú phần tử

Cho đoạn mã HTML sau:

This is a paragraph.

Xem thêm: Hướng Dẫn Cách Copy Nhạc Vào Iphone, Ipad Cực Kì Đơn Giản

Đoạn mã jQuery:

// gán dữ liệu mang đế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 trong những phần tử tất cả tài liệu được tùy chỉnh bởi vì thủ tục data()Để chất vấn một trong những phần tử bao gồm dữ liệu được gán tự cách tiến hành data() hay không, bọn họ dùng phương thức hasData() theo cú pháp sau:

Pmùi hương thứcChức năng
hasData(name)Trả về false ví như tài liệu name chưa được gán mang lại thành phần, trở lại là true. (Xem ví dụ)

Ví dụ: soát sổ tài liệu giành được thêm mang lại phần tử giỏi chưa

Cho đoạn mã HTML sau:

This is a paragraph.

Đoạn mã jQuery:

// đánh giá dữ liệu Greeting bao gồm mãi mãi giỏi khôngalert($.hasData($("p")<0>));// false// gán dữ liệu đến thành phần p$("p").data("Greeting","Hello, everyone!");alert($.hasData($("p")<0>));//true


Chuyên mục: Kiến Thức