Điểm Danh Các Method Phổ Biến Trong jQuery Khi Làm Việc Với Phần Tử HTML
Trong số các thư viện JavaScript từ trước tới nay thì jQuery luôn được coi là một trong những thư viện được sử dụng nhiều nhất. So sánh với các thư viện khác như Prototype, Yahoo Library, MooTools, Ext.... thì jQuery có rất nhiều những ưu điểm nổi bật như: jQuery có cú pháp đơn giản và dễ học ...
Trong số các thư viện JavaScript từ trước tới nay thì jQuery luôn được coi là một trong những thư viện được sử dụng nhiều nhất. So sánh với các thư viện khác như Prototype, Yahoo Library, MooTools, Ext.... thì jQuery có rất nhiều những ưu điểm nổi bật như:
- jQuery có cú pháp đơn giản và dễ học (thâm chí developer không cần biết JavaScript vẫn có thể sử dụng được jQuery)
- jQuery hỗ trợ nhiều tính năng hữu dụng như AJAX, quản lý và tương tác với DOM Element...
- jQuery có môt hệ sinh thái phần mở rộng plugin với các tính năng hỗ trợ thêm khá đồ sộ
- jQuery khá nhẹ chỉ có khoảng trên 80 kllobyte
- jQuery hỗ trợ nhiều trình duyệt khác nhau
- Và rất nhiều tính năng nổi bật khác ...
Trong bài viết này chúng ta sẽ cùng điểm danh các method phổ biến của jQuery khi làm việc với phần tử.
Thêm CSS Class Vào Phần Tử Sử Dụng jQuery.addClass()
Để thêm một hoặc nhiều CSS class vào phần tử cho trước chúng ta sử dụng phương thức .addClass() của jQuery.
Ví dụ với một trang HTML có chứa đoạn mã như sau:
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p id="test-paragraph">Test paragraph</p>
<style type="text/css">
.bold {font-weight: bold;}
.italic {font-style: italic;}
.underline {text-decoration: underline;}
</style>
<script type="text/javascript">
// Code JavaScript...
</script>
</body>
</html>
Để thêm một CSS class cho phần tử body:
$("#test-paragraph").addClass("bold");
Nếu bạn bỏ đặt code trên vào bên trong thẻ <script></script> trong trang HTML phía trước và mở trang bằng trình duyệt bạn sẽ thấy đoạn văn bản sẽ được hiển thị với phông chữ in đậm.
Để thêm nhiều CSS class, tách biệt mỗi class bởi khoảng trắng:
$("#test-paragraph").addClass("italic underline");
Nếu bạn bỏ đặt code trên vào bên trong thẻ <script></script> trong trang HTML phía trước và mở trang bằng trình duyệt bạn sẽ thấy đoạn văn bản sẽ được hiển thị với phông chữ in nghiêng và trang trí bởi dấu gạch dưới.
Xoá CSS Class Ra Khỏi Phần Tử Sử Dụng jQuery.removeClass()
Để xoá một hoặc nhiều CSS class vào phần tử cho trước chúng ta sử dụng phương thức .removeClass() của jQuery:
Để xoá một CSS class ra khỏi phần tử cho trước:
$("#test-paragraph").removeClass("bold");
Để xoá nhiều CSS class, tách biệt mỗi class bởi khoảng trắng:
$("#test-paragraph").removeClass("italic underline");
Kiểm Tra Sự Tồn Tại Của CSS Class Trong Phần Tử Cho Trước Sử Dụng jQuery.hasClass()
Phương thức .hasClass() của jQuery được dùng để kiểm tra sự tồn tại của một hoặc nhiều CSS class trong phần tử.
Ví dụ với một trang HTML có chứa đoạn mã như sau:
<div id="test-div"" class="test-class test-class-1 test-class-2"></div>
Để kiểm tra sự tồn tại của một class trong một phần tử:
var exists = $("#test-div").hasClass("test-class");
console.log(exists);
// hiển thị "true"
Để kiểm tra sự tồn tại của nhiều class trong một phần tử cùng một lúc, chúng ta sẽ cần tách biệt mỗi class bởi khoảng trắng:
$("#test-div").hasClass("test-class-1 test-class-2");
console.log(exists);
// hiển thị "true"
Gán Giá Trị Thuộc Tính Của Phần Tử Sử Dụng jQuery.attr()
Để gán giá trị cho một thuộc tính của một phần tử cho trước chúng ta sử dụng phương thức .attr() của jQuery.
Ví dụ với một trang chứa đoạn mã HTML như sau:
<img id="my-image" src="test.jpg">
Thì để gán thuộc tính title cho phần tử img#my-image ở trên như sau:
$("#my-image").attr("title", "Test image");
Mã HTML sau khi chạy đoạn câu lệnh trên:
<img id="my-image" src="test.jpg" title="Test image">
Ngoài ra, chúng ta cũng hoàn toàn có thể sử dụng phương thức .attr() để đặt lại CSS class cho phần tử.
Ví dụ với một trang có chữa đoạn mã HTML như sau:
<div class="first-class second-class"></div>
Thì để đặt lại CSS class cho phần tử div#my-div ở trên như sau:
$("#my-div").attr("new-class");
Mã HTML sau khi chạy đoạn câu lệnh trên:
<div class="new-class"></div>
Lấy Về Giá Trị Thuộc Tính Sử Dụng jQuery.attr()
Để lấy về giá trị của một thuộc tính của phần từ cho trước chúng ta cũng vẫn sử dụng phương thức .attr() của jQuery tuy nhiên sẽ không truyền vào đối số truyền.
Ví dụ một trang có chứa đoạn mã HTML như sau:
<img id="my-image" src="test.jpg" title="Test image">
Thì để lấy về giá trị của thuộc tính title của phần tử img#my-image ở trên như sau:
var imgSource = $("#my-image").attr("src");
console.log(imgSource); // test.jpg
Xoá Thuộc Tính Sử Dụng jQuery.removeAttr()
Để xoá một thuộc tính của một phần tử cho trước chúng ta sử dụng phương thức .removeAttr() của jQuery.
Ví dụ một trang có chứa đoạn mã HTML như sau:
<img id="my-image" src="test.jpg" title="Test image">
Thì để xoá thuộc tính title của phần tử img#my-image ở trên chúng ta có thể làm như sau:
$("#my-image").removeAttr("src");
Mã HTML sau khi chạy đoạn câu lệnh trên:
<img id="my-image" src="test.jpg">
Gán Nội Dung HTML Cho Phần Tử Sử Dụng jQuery.html()
Để gán nội dung HTML cho một phần tử cho trước chúng ta sử dụng phương thức .html() của jQuery.
Ví dụ với một trang có chữa đoạn mã HTML như sau:
<div id="my-div">Sample HTML</div>
Thì để gán nội dung HTML cho phần tử div#my-div ở trên chúng ta có thể làm như sau:
$("#my-div").html("<strong>New</strong> HTML");
Mã HTML sau khi chạy đoạn câu lệnh trên:
<div id="my-div"><strong>New</strong> HTML</div>
Lấy Về Nội Dung HTML Của Phần Tử Sử Dụng jQuery.html()
Để lấy về nội dung HTML của phần tử cho trước chúng ta cũng vẫn sử dụng phương thức .html() của jQuery tuy nhiên sẽ không truyền vào đối số.
Ví dụ với một trang có chữa đoạn mã HTML như sau:
<div id="my-div"><strong>New</strong> HTML</div>
Thì để lấy về nội dung HTML của phần tử div#my-div ở trên chúng ta có thể làm như sau:
var divHTML = $("#my-div").html();
console.log(divHTML);
// Hiển thị: <strong>New</strong> HTML
Gán Nội Dung Văn Bản Cho Phần Tử Sử Dụng jQuery.text()
Để gán nội dung dạng văn bản cho một phần tử cho trước chúng ta sử dụng phương thức .text() của jQuery.
Ví dụ với một trang có chữa đoạn mã HTML như sau:
<div id="my-div">Sample text</div>
Thì để gán nội dung HTML cho phần tử div#my-div ở trên chúng ta có thể làm như sau:
$("#my-div").text("New text");
Mã HTML sau khi chạy đoạn câu lệnh trên:
<div id="my-div">New text</div>
Lấy Về Nội Dung Văn Bản Của Phần Tử Sử Dụng jQuery.text()
Để lấy về nội dung dạng văn bản của phần tử cho trước chúng ta cũng vẫn sử dụng phương thức .text() của jQuery tuy nhiên sẽ không truyền vào đối số.
Ví dụ với một trang có chữa đoạn mã HTML như sau:
<div id="my-div"><strong>New</strong> HTML</div>
Thì để lấy về nội dung dạng văn bản của phần tử div#my-div ở trên chúng ta có thể làm như sau:
var divText = $("#my-div").text();
console.log(divText);
// Hiển thị: New HTML
Kết Luận
Một trong những tác vụ thường thấy khi lập trình sử dụng thư việ jQuery đó là làm việc với phần tử. Nắm vững các phương thức phổ biến trên sẽ giúp bạn không phải tìm kiếm tài liệu jQuery documentation trên mạng online. Điều này không chỉ những giúp bạn giảm bớt thời gian cho công việc mà còn đặc biệt hữu dụng trong những lúc mạng internet chậm hoặc đường cáp quang dưới biển kết nối mạng internet của Việt Nam với các nước khác bị đứt :)
