Thuộc tính trong jQuery

Cát Tường

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

Hầu hết những thuộc tính này là có sẵn thông qua JavaScript như là các thuộc tính DOM node. Một số thuộc tính phổ biến hơn là:

className
tagName
id
href
title
rel
src

Xem xét đoạn HTML code sau đánh dấu cho một phần tử image:

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

Trong việc đánh dấu phần tử này, tag name là img, và việc đánh dấu cho id, src, alt, class, và title biểu diễn các thuộc tính của phần tử, mỗi thuộc tính gồm một tên và một giá trị.

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

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

Phương thức attr() có thể được sử dụng để nhận 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 thiết lập các giá trị thuộc tính trên các phần tử được so khớp.

Ví dụ

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

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

Nó sẽ cho kết quả sau:

This is first paragraph.

This is second paragraph.

Thiết lập giá trị thuộc tính trong jQuery

Phương thức attr(name, value) có thể được sử dụng để thiết lập thuộc tính đã đặt tên trên tất cả phần tử trong tập hợp được bao bởi sử dụng value đã truyền.

Ví dụ

Ví dụ đơn giản sau thiết lập thuộc tính src của một thẻ image tới một vị trí chính xác.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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", "./images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id="myimg" src="wrongpath.jpg" alt="Sample image" />
      </div>
   </body>
	
</html>

Áp dụng Style trong jQuery

Phương thức addClass( classes) có thể được sử dụng để áp dụng các Style Sheet đã được định nghĩa trên tất cả phần tử được so khớp. Bạn có thể định rõ nhiều class phân biệt nhau bởi khoảng trống.

Ví dụ

Ví dụ đơn giản sau thiết lập thuộc tính class của một thẻ <p>:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

Nó sẽ cho kết quả sau:

This is first paragraph.

This is second paragraph.

Các phương thức Atribute trong jQuery

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

STT	Phương thức & Miêu tả
1	attr (properties) Thiết lập một cặp đối tượng key/value như là các thuộc tính trên tất cả phần tử được so khớp.
2	attr (key, fn) Thiết lập một thuộc tính đơn tới một giá trị được tính toán, trên tất cả phần tử được so khớp.
3	removeAttr (name) Gỡ bỏ một thuộc tính từ mỗi phần tử được so khớp.
4	hasClass (class) Trả về true nếu class đã cho là có mặt ở ít nhất một phần tử trong tập hợp các phần tử được so khớp.
5	removeClass (class) Gỡ bỏ tất cả hoặc các class đã cho từ tập hợp các phần tử được so khớp
6	toggleClass (class) Thêm class đã cho nếu nó không có mặt, gỡ bỏ class đã cho nếu nó có mặt
7	html ( ) Nhận các nội dung HTML của phần tử đầu tiên được so khớp.
8	html (val) Thiết lập các nội dung HTML của mỗi phần tử được so khớp.
9	text ( ) Nhận nội dung text tổ hợp của tất cả các phần tử được so khớp
10	text (val) Thiết lập nội dung text của tất cả phần tử được so khớp
11	val ( ) Nhận giá trị đầu vào của phần tử đầu tiên được so khớp
12	val (val) Thiết lập giá trị thuộc tính tới mỗi phần tử được so khớp nếu nó được gọi trên <input> nhưng nếu được gọi trên <select> với giá trị <option> được truyền thì khi đó option được truyền sẽ được chọn, nếu nó được gọi trên checkbox hoặc radiobox thì khi đó tất cả checkbox và radiobox so khớp sẽ được kiểm tra.

Ví dụ

Tương tự như cú pháp và các ví dụ ở trên, ví dụ sau sẽ giúp bạn hiểu hơn về sự sử dụng các phương thức Attribute đa dạng trong các tình huống khác nhau:

STT	Phương thức & Miêu tả
1	$("#myID").attr("custom") Phương thức này sẽ trả về giá trị của thuộc tính custom cho phần tử đầu tiên so khớp với id là myID.
2	$("img").attr("alt", "Sample Image") Phương thức này thiết lập thuộc tính alt của tất cả các Image tới một giá trị "Sample Image" mới.
3	$("input").attr({ value: "", title: "Please enter a value" }); Thiết lập giá trị của tất cả phần tử <input> thành chuỗi trống, cũng như thiết lập The jQuery Example thành Please enter a value.
4	$("a[href^=http://]").attr("target","_blank") Chọn tất cả link với một thuộc tính href bắt đầu với http:// và thiết lập thuộc tính target của nó là _blank.
5	$("a").removeAttr("target") Phương thức này gỡ bỏ thuộc tính target của tất cả các link
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Phương thức này sửa đổi thuộc tính "disabled" tới giá trị "disabled" trong khi click vào nút Submit.
7	$("p:last").hasClass("selected") Trả về true nếu thẻ <p> cuối cùng có class là selected.
8	$("p").text() Trả về chuỗi chứa nội dung text tổ hợp của tất cả phần tử <p> được so khớp.
9	$("p").text("<i>Hello World</i>") Phương thức này sẽ thiết lập "<I>Hello World</I>" như là nội dung text của các phần tử <p> so khớp.
10	$("p").html() Phương thức này trả về nội dung HTML của tất cả đoạn văn so khớp
11	$("div").html("Hello World") Phương thức này sẽ thiết lập nội dung HTML của tất cả thẻ <div> so khớp thành Hello World.
12	$("input:checkbox:checked").val() Nhận giá trị đầu tiên từ một checkbox đã checked
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") Thiết lập thuộc tính giá trị của mỗi phần tử <button> được so khớp.
15	$("input").val("on") Phương thức này sẽ kiểm tra tất cả các nút radiobox hoặc checkbox mà giá trị của nó là "on".
16	$("select").val("Orange") Phương thức này sẽ chọn tùy chọn Orange trong hộp dropdown các tùy chọn Orange, Mango và Banana.
17	$("select").val("Orange", "Mango") Phương thức này sẽ chọn các tùy chọn Orange và Mango trong một hộp dropdown với các tùy chọn Orange, Mango và Banana.