jQuery - Thuộc tính

Một số thành phần cơ bản nhất mà chúng ta có thể thao tác khi nói đến phần tử DOM là các thuộc tính và thuộc tính được gán cho các phần tử đó.

Hầu hết các thuộc tính này có sẵn thông qua JavaScript dưới dạng thuộc tính nút DOM. Một số thuộc tính phổ biến hơn là -

className
tagName
id
href
title
rel
src

Hãy xem xét đánh dấu HTML sau cho phần tử hình ảnh:

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

Trong đánh dấu của phần tử này, tên thẻ là img và đánh dấu cho id, src, alt, lớp và tiêu đề đại diện cho các thuộc tính của phần tử, mỗi thuộc tính bao gồm tên và giá trị.

jQuery cung cấp cho chúng ta phương tiện để dễ dàng thao tác các thuộc tính của một phần tử và cho phép chúng ta truy cập vào phần tử để chúng ta cũng có thể thay đổi các thuộc tính của nó.

Nhận giá trị thuộc tính

Các attr() phương thức có thể được sử dụng để lấy giá trị của một thuộc tính từ phần tử đầu tiên trong tập hợp đã so khớp hoặc đặt các giá trị thuộc tính vào tất cả các phần tử đã so khớp.

Thí dụ

Sau đây là một ví dụ đơn giản tìm nạp thuộc tính title của thẻ <em> và đặt giá trị <div id = "divid"> với cùng một giá trị -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Đặt giá trị thuộc tính

Các attr(name, value) phương thức có thể được sử dụng để đặt thuộc tính đã đặt tên cho tất cả các phần tử trong tập hợp được bao bọc bằng cách sử dụng giá trị đã truyền.

Thí dụ

Sau đây là một ví dụ đơn giản mà thiết lập src thuộc tính của thẻ hình ảnh đến một vị trí chính xác -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Áp dụng kiểu

Các addClass( classes )phương pháp này có thể được sử dụng để áp dụng các biểu định kiểu đã xác định cho tất cả các phần tử phù hợp. Bạn có thể chỉ định nhiều lớp được phân tách bằng dấu cách.

Thí dụ

Sau đây là một ví dụ đơn giản đặt class thuộc tính của thẻ para <p> -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Phương thức thuộc tính

Bảng sau liệt kê một số phương pháp hữu ích mà bạn có thể sử dụng để thao tác các thuộc tính và thuộc tính -

Sr.No.	Phương pháp & Mô tả
1	attr (thuộc tính) Đặt một đối tượng khóa / giá trị làm thuộc tính cho tất cả các phần tử phù hợp.
2	attr (phím, fn) Đặt một thuộc tính duy nhất thành một giá trị được tính toán, trên tất cả các phần tử phù hợp.
3	removeAttr (tên) Xóa một thuộc tính khỏi mỗi phần tử phù hợp.
4	hasClass (lớp) Trả về true nếu lớp được chỉ định có mặt trên ít nhất một trong các tập hợp các phần tử đã so khớp.
5	removeClass (lớp) Loại bỏ tất cả hoặc (các) lớp được chỉ định khỏi tập hợp các phần tử phù hợp.
6	toggleClass (lớp) Thêm lớp được chỉ định nếu nó không có mặt, xóa lớp đã chỉ định nếu nó có mặt.
7	html () Lấy nội dung html (innerHTML) của phần tử phù hợp đầu tiên.
số 8	html (val) Đặt nội dung html của mọi phần tử phù hợp.
9	bản văn( ) Nhận nội dung văn bản kết hợp của tất cả các phần tử phù hợp.
10	văn bản (val) Đặt nội dung văn bản của tất cả các phần tử phù hợp.
11	val () Nhận giá trị đầu vào của phần tử được so khớp đầu tiên.
12	val (val) Đặt thuộc tính giá trị của mọi phần tử đã so khớp nếu nó được gọi trên <input> nhưng nếu nó được gọi trên <select> với giá trị <option> đã truyền thì tùy chọn đã truyền sẽ được chọn, nếu nó được gọi trên hộp kiểm hoặc hộp radio thì tất cả hộp kiểm phù hợp và hộp radio sẽ được chọn.

Ví dụ

Tương tự như cú pháp và ví dụ ở trên, các ví dụ sau sẽ cho bạn hiểu về cách sử dụng các phương thức thuộc tính khác nhau trong các tình huống khác nhau -

Dưới đây là danh sách đầy đủ các phương thức thuộc tính trong các trường hợp khác nhau -

Sr.No.	Bộ chọn & Mô tả
1	$("#myID").attr("custom") Điều này sẽ trả về giá trị của thuộc tính tùy chỉnh cho phần tử đầu tiên phù hợp với ID myID.
2	$("img").attr("alt", "Sample Image") Điều này đặt alt của tất cả các hình ảnh thành một giá trị mới "Hình ảnh Mẫu".
3	$("input").attr({ value: "", title: "Please enter a value" }); Đặt giá trị của tất cả các phần tử <input> thành chuỗi trống, cũng như đặt Ví dụ jQuery thành chuỗi Vui lòng nhập giá trị .
4	$("a[href^=https://]").attr("target","_blank") Chọn tất cả các liên kết có thuộc tính href bắt đầu bằng https: // và đặt thuộc tính mục tiêu của nó thành _blank .
5	$("a").removeAttr("target") Điều này sẽ loại bỏ thuộc tính đích của tất cả các liên kết.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Điều này sẽ sửa đổi thuộc tính bị vô hiệu hóa thành giá trị "bị vô hiệu hóa" trong khi nhấp vào nút Gửi.
7	$("p:last").hasClass("selected") Trả về true nếu thẻ <p> cuối cùng đã chọn lớp liên kết .
số 8	$("p").text() Trả về chuỗi có chứa nội dung văn bản được kết hợp của tất cả các phần tử <p> phù hợp.
9	$("p").text("<i>Hello World</i>") Điều này sẽ đặt "<I> Hello World </I>" làm nội dung văn bản của các phần tử <p> phù hợp.
10	$("p").html() Điều này trả về nội dung HTML của tất cả các đoạn phù hợp.
11	$("div").html("Hello World") Điều này sẽ đặt nội dung HTML của tất cả <div> phù hợp thành Hello World .
12	$("input:checkbox:checked").val() Nhận giá trị đầu tiên từ hộp kiểm đã chọn.
13	$("input:radio[name=bar]:checked").val() Nhận giá trị đầu tiên từ một tập hợp các nút radio.
14	$("button").val("Hello") Đặt thuộc tính giá trị của mọi phần tử phù hợp <button>.
15	$("input").val("on") Thao tác này sẽ kiểm tra tất cả nút radio hoặc hộp kiểm có giá trị là "bật".
16	$("select").val("Orange") Điều này sẽ chọn tùy chọn Orange trong một hộp thả xuống với các tùy chọn Orange, Mango và Banana.
17	$("select").val("Orange", "Mango") Thao tác này sẽ chọn các tùy chọn Orange và Mango trong một hộp thả xuống với các tùy chọn Orange, Mango và Banana.