Home Tutorial jQuery jQuery – Bài 7: Thuộc tính
jQuery

jQuery – Bài 7: Thuộc tính

By quangvu
Posted on December 29, 2022
18 min read
0
135

jQuery đang được sử dụng nhiều trong việc thao tác các thuộc tính khác nhau được liên kết với các phần tử HTML. Mỗi phần tử HTML có thể có các thuộc tính tiêu chuẩn và tùy chỉnh khác nhau (tức là các thuộc tính) được sử dụng để xác định các đặc điểm của phần tử HTML đó.

jQuery cung cấp cho chúng ta phương tiện để dễ dàng thao tác (Lấy và Đặt) các thuộc tính của phần tử. Đầu tiên chúng ta hãy cố gắng hiểu một chút về các thuộc tính tiêu chuẩn và tùy chỉnh của HTML.

Thuộc tính tiêu chuẩn

Một số thuộc tính phổ biến hơn là –

  • A mouse click
  • A web page loading
  • Taking mouse over an element
  • Submitting an HTML form
  • A keystroke on your keyboard, etc.

Ví dụ

Chúng ta hãy xem đoạn mã sau để đánh dấu HTML cho một phần tử hình ảnh –

<img id=“id” src=“image.gif” alt=“Image” class=“class” title=“This is an image”/>

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

Dữ liệu tùy chỉnh-* Thuộc tính

Đặc tả HTML cho phép chúng tôi thêm các thuộc tính tùy chỉnh của riêng mình với các phần tử DOM để cung cấp thêm chi tiết về phần tử. Các tên thuộc tính này bắt đầu bằng data- .

Ví dụ

Dưới đây là một ví dụ mà chúng tôi đã cung cấp thông tin về bản quyền của hình ảnh bằng cách sử dụng data-copyright là một thuộc tính tùy chỉnh –

<img data–copyright=“Tutorials Point” id=“imageid” src=“image.gif” alt=“Image”/>

jQuery – Nhận các thuộc tính tiêu chuẩn

Phương thức jQuery attr() được sử dụng để tìm nạp giá trị của bất kỳ thuộc tính tiêu chuẩn nào từ (các) phần tử HTML phù hợp. Chúng tôi sẽ sử dụng Bộ chọn jQuery để khớp với (các) phần tử mong muốn và sau đó chúng tôi sẽ áp dụng phương thức attr() để lấy giá trị thuộc tính cho phần tử.
Nếu bộ chọn đã cho phù hợp với nhiều phần tử thì nó sẽ trả về danh sách các giá trị mà bạn có thể lặp lại bằng cách sử dụng các phương thức Mảng jQuery.

Ví dụ

Sau đây là một chương trình jQuery để lấy các thuộc tính href và title của phần tử anchor <a>:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         alert( "Href = " + $("#home").attr("href"));
         alert( "Title = " + $("#home").attr("title"));
      });
   });
</script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   
   <p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
   <button>Get Attribute</button>
</body>
</html>

jQuery – Nhận thuộc tính dữ liệu

Phương thức jQuery data() được sử dụng để tìm nạp giá trị của bất kỳ thuộc tính dữ liệu tùy chỉnh nào từ (các) phần tử HTML phù hợp. Chúng tôi sẽ sử dụng Bộ chọn jQuery để khớp với (các) phần tử mong muốn và sau đó chúng tôi sẽ áp dụng phương thức data() để lấy giá trị thuộc tính cho phần tử.

Ví dụ

Sau đây là một chương trình jQuery để lấy các thuộc tính tên tác giả và năm của phần tử <div>:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         alert( "Author = " + $("#home").data("author-name"));
         alert( "Year = " + $("#home").data("year"));
      });
   });
</script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   
   <div id="home" data-author-name="Zara Ali" data-year="2022">
      Just an Example Content
   </div>
   <br>
   <button>Get Attribute</button>
</body>
</html>

jQuery – Đặt thuộc tính tiêu chuẩn

Phương thức attr(tên, giá trị) của jQuery được sử dụng để đặt giá trị của bất kỳ thuộc tính tiêu chuẩn nào của (các) phần tử HTML phù hợp. Chúng tôi sẽ sử dụng Bộ chọn jQuery để khớp với (các) phần tử mong muốn và sau đó chúng tôi sẽ áp dụng phương thức attr(key, value) để đặt giá trị thuộc tính cho phần tử.
Nếu bộ chọn đã cho khớp với nhiều phần tử thì nó sẽ đặt giá trị của thuộc tính cho tất cả các phần tử được khớp.

Ví dụ

Sau đây là một chương trình jQuery để thiết lập thuộc tính tiêu đề của phần tử neo <a>:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("#home").attr("title", "New Anchor Title");
         
         /* Let's get and display changed title */
         alert( "Changed Title = " + $("#home").attr("title"));
      });
   });
</script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   
   <p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
   <button>Set Attribute</button>
   <p>You can hover the Home link to verify the title before and after the change.</p>
</body>
</html>