close

Cú pháp cơ bản của jQuery - Lựa chọn, thao tác và hiệu ứng

Cú pháp cơ bản của jQuery sử dụng mô hình chọn phần tử (CSS-style selector) và các phương thức để thao tác với các phần tử đã chọn. Dưới đây là một số cú pháp cơ bản của jQuery:

 

Lựa chọn phần tử

  • Lựa chọn phần tử bằng tên thẻ HTML: $("tagname") Ví dụ: $("p") lựa chọn tất cả các phần tử <p> trên trang.

  • Lựa chọn phần tử bằng lớp CSS: $(".classname") Ví dụ: $(".myClass") lựa chọn tất cả các phần tử có lớp "myClass".

  • Lựa chọn phần tử bằng ID: $("#idname") Ví dụ: $("#myElement") lựa chọn phần tử có ID "myElement".

  • Lựa chọn phần tử bằng thuộc tính: $("[attribute='value']") Ví dụ: $("[data-type='button']") lựa chọn các phần tử có thuộc tính data-type được đặt là "button".

  • Kết hợp lựa chọn: $("tagname.classname"), $("#idname .classname"), ... Ví dụ: $("div.myClass") lựa chọn tất cả các phần tử <div> có lớp "myClass".

 

Thao tác với phần tử đã chọn

  • Thay đổi nội dung của phần tử: .html(), .text() Ví dụ: $("#myElement").html("Nội dung mới") đặt nội dung HTML cho phần tử có ID "myElement".

  • Thay đổi thuộc tính của phần tử: .attr(), .prop() Ví dụ: $("img").attr("src", "newimage.jpg") thay đổi thuộc tính src của tất cả các phần tử <img>.

  • Thay đổi lớp CSS của phần tử: .addClass(), .removeClass(), .toggleClass() Ví dụ: $("#myElement").addClass("highlight") thêm lớp "highlight" vào phần tử có ID "myElement".

  • Ẩn/hiện phần tử: .hide(), .show(), .toggle() Ví dụ: $(".myClass").hide() ẩn tất cả các phần tử có lớp "myClass".

  • Xử lý sự kiện trên phần tử: .click(), .hover(), .submit(), ... Ví dụ: $("button").click(function() { ... }) đăng ký xử lý sự kiện click cho tất cả các phần tử <button>.

 

Làm việc với tập hợp các phần tử

  • Lặp qua tập hợp các phần tử: .each() Ví dụ: $("li").each(function() { ... }) lặp qua tất cả các phần tử <li> trên trang.

  • Lọc tập hợp các phần tử: .filter(), .not() Ví dụ: $("div").filter(".myClass") lọc các phần tử <div> và lựa chọn những phần tử có lớp "myClass".

  • Chèn phần tử vào tập hợp: .append(), .prepend(), .after(), .before() Ví dụ: $("#myElement").append("<p>Đoạn văn mới</p>") thêm một phần tử <p> vào cuối phần tử có ID "myElement".

 

Hiệu ứng và hoạt ảnh

  • Thực hiện hiệu ứng fadeIn/fadeOut: .fadeIn(), .fadeOut() Ví dụ: $("#myElement").fadeIn(1000) hiển thị phần tử có ID "myElement" một cách mờ dần trong khoảng thời gian 1 giây.

  • Thực hiện hiệu ứng slideUp/slideDown: .slideUp(), .slideDown() Ví dụ: $(".myClass").slideUp(500) thu gọn tất cả các phần tử có lớp "myClass" trong khoảng thời gian 0.5 giây.

  • Thực hiện hiệu ứng tùy chỉnh: .animate() Ví dụ: $("#myElement").animate({ left: '250px', opacity: '0.5' }) tạo hiệu ứng tùy chỉnh cho phần tử có ID "myElement" bằng cách thay đổi vị trí trái và độ mờ của nó.

 

Những ví dụ này giúp bạn hiểu cách sử dụng các khía cạnh khác nhau của cú pháp cơ bản của jQuery để lựa chọn phần tử, thay đổi thuộc tính của chúng và áp dụng hiệu ứng hoặc hoạt ảnh. jQuery cung cấp một tập hợp phong phú các phương thức và chức năng để đơn giản hóa và nâng cao khả năng phát triển web.