Chào các bạn, tiếp tục chuỗi bài viết hướng dẫn về jQuery, ở phần trước CodeTutHub đã có bài nói về jQuery là gì và cách cài đặt. Trong bài viết này, chúng ta sẽ tìm hiểu về cú pháp cơ bản của jQuery và cách sử dụng nó để thao tác với DOM, sự kiện và hiệu ứng động.

1. Cú pháp cơ bản của jQuery

Cú pháp chung của jQuery như sau:

js
$(selector).action();

Trong đó:

  • $: Ký hiệu bắt đầu của jQuery.
  • selector: Chọn phần tử HTML cần thao tác.
  • action(): Phương thức thực hiện hành động trên phần tử được chọn.

Ví dụ đơn giản:

js
$("p").hide(); // Ẩn tất cả các thẻ <p> trên trang

2. Cách sử dụng jQuery trong dự án

Cài đặt jQuery:

Bạn có thể thêm jQuery vào dự án bằng cách nhúng từ CDN hoặc tải xuống và lưu vào thư mục dự án.

  • Nhúng jQuery từ CDN:
js
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  • Nhúng jQuery từ file cục bộ:
js
<script src="js/jquery.min.js"></script>

Viết mã jQuery đúng cách

Để đảm bảo jQuery hoạt động sau khi tài liệu HTML tải xong, bạn nên đặt mã jQuery bên trong sự kiện $(document).ready() như sau:

js
$(document).ready(function(){
    $("button").click(function(){
        alert("Bạn đã nhấn nút!");
    });
});

3. Chọn phần tử với jQuery Selectors

jQuery cung cấp nhiều bộ chọn (selectors) để truy cập các phần tử HTML:

  • $("*") – Chọn tất cả phần tử
  • $("p") – Chọn tất cả thẻ <p>
  • $(".class") – Chọn phần tử có class cụ thể
  • $("#id") – Chọn phần tử có id cụ thể

Ví dụ:

js
$("#myDiv").hide(); // Ẩn phần tử có id là myDiv
$(".myClass").css("color", "red"); // Đổi màu chữ của phần tử có class myClass

4. Thao tác với DOM bằng jQuery

jQuery cung cấp các phương thức giúp thêm, xóa, hoặc thay đổi nội dung HTML.

  • Thay đổi nội dung:
js
$("#myText").text("Nội dung mới"); // Thay đổi văn bản
$("#myText").html("<b>Nội dung mới</b>"); // Thay đổi nội dung HTML
  • Thêm phần tử:
js
$("ul").append("<li>Item mới</li>"); // Thêm vào cuối danh sách
$("ul").prepend("<li>Item đầu</li>"); // Thêm vào đầu danh sách
  • Xóa phần tử:
js
$("#myDiv").remove(); // Xóa phần tử khỏi DOM
$("#myDiv").empty(); // Xóa nội dung bên trong phần tử

5. Xử lý sự kiện trong jQuery

Bạn có thể sử dụng các sự kiện như click(), hover(), keyup(), keydown(), change() để tương tác với người dùng.

Ví dụ:

js
$("button").click(function(){
    alert("Nút đã được nhấn!");
});

6. Hiệu ứng và Animation với jQuery

jQuery hỗ trợ nhiều hiệu ứng động giúp giao diện trang web hấp dẫn hơn.

  • Ẩn/hiện phần tử:
js
$("#box").hide(); // Ẩn phần tử
$("#box").show(); // Hiển thị phần tử
  • Hiệu ứng mượt:
js
$("#box").fadeOut(); // Làm mờ phần tử
$("#box").slideUp(); // Thu nhỏ phần tử

7. AJAX với jQuery

Bạn có thể sử dụng jQuery AJAX để gửi và nhận dữ liệu mà không cần tải lại trang.

Ví dụ gửi yêu cầu GET:

js
$.get("data.json", function(data){
    console.log(data);
});

Ví dụ gửi yêu cầu POST:

js
$.post("submit.php", {name: "John", age: 30}, function(response){
    console.log(response);
});

Kết luận

Cú pháp jQuery giúp lập trình viên dễ dàng thao tác với DOM, xử lý sự kiện, tạo hiệu ứng động và làm việc với AJAX một cách nhanh chóng. Nếu bạn muốn phát triển các trang web có tính tương tác cao, jQuery là một công cụ tuyệt vời để bắt đầu.

Hãy tiếp tục theo dõi CodeTutHub để học thêm nhiều kiến thức bổ ích về lập trình web!