TÀI LIỆU HAY - CHIA SẺ KHÓA HỌC MIỄN PHÍ

Jquery là một thư viện Javascript rất phổ biến để xử lý tương tác với người dùng trên website. Nếu bạn đang tìm cách học Jquery từ cơ bản đến nâng cao, hãy tham khảo 20 bài tập Jquery dưới đây.

1. Thêm/Jquery Class cho một phần tử HTML
Để thêm Class cho một phần tử HTML bằng Jquery, sử dụng phương thức addClass ().

Ví dụ: Để thêm lớp "active" cho một nút, hãy sử dụng đoạn mã sau:

$("button").addClass("active");

2. Loại bỏ/Jquery Class cho một phần tử HTML
Để loại bỏ Class cho một phần tử HTML bằng Jquery, sử dụng phương thức removeClass ().

Ví dụ: Để loại bỏ lớp "active" cho một nút, hãy sử dụng đoạn mã sau:

$("button").removeClass("active");

3. Kiểm tra/Jquery Class cho một phần tử HTML
Để kiểm tra xem một phần tử HTML có chứa Class nào đó hay không bằng Jquery, sử dụng phương thức hasClass ().

Ví dụ: Để kiểm tra xem một nút có chứa lớp "active" hay không, hãy sử dụng đoạn mã sau:

if ($("button").hasClass("active")) {
// Code thông báo cho người dùng
}

4. Thay đổi thuộc tính/Jquery CSS cho một phần tử HTML
Để thay đổi thuộc tính CSS cho một phần tử HTML bằng Jquery, sử dụng phương thức css ().

Ví dụ: Để thay đổi màu nền của một phần tử, hãy sử dụng đoạn mã sau:

$("div").css("background-color", "red");

5. Gán/Jquery giá trị cho một phần tử HTML
Để gán giá trị cho một phần tử HTML bằng Jquery, sử dụng phương thức val ().

Ví dụ: Để gán giá trị "John" cho một ô nhập liệu, hãy sử dụng đoạn mã sau:

$("input").val("John");

6. Thêm/Jquery nội dung cho một phần tử HTML
Để thêm nội dung cho một phần tử HTML bằng Jquery, sử dụng phương thức html ().

Ví dụ: Để thêm một bảng vào một phần tử div, hãy sử dụng đoạn mã sau:

$("div").html("...");

7. Xóa/Jquery nội dung của một phần tử HTML
Để xóa nội dung của một phần tử HTML bằng Jquery, sử dụng phương thức empty ().

Ví dụ: Để xóa nội dung của một phần tử div, hãy sử dụng đoạn mã sau:

$("div").empty();

8. Ẩn/Jquery phần tử HTML
Để ẩn một phần tử HTML bằng Jquery, sử dụng phương thức hide ().

Ví dụ: Để ẩn một phần tử div, hãy sử dụng đoạn mã sau:

$("div").hide();

9. Hiển thị/Jquery phần tử HTML
Để hiển thị một phần tử HTML bằng Jquery, sử dụng phương thức show ().

Ví dụ: Để hiển thị một phần tử div, hãy sử dụng đoạn mã sau:

$("div").show();

10. Ẩn/Hiển thị chuyển động/Jquery phần tử HTML
Để ẩn/hiển thị chuyển động một phần tử HTML bằng Jquery, sử dụng phương thức slideToggle ().

Ví dụ: Để chuyển động ẩn/hiển thị một phần tử div, hãy sử dụng đoạn mã sau:

$("div").slideToggle();

11. Sự kiện/Jquery click
Để sử dụng sự kiện click bằng Jquery, sử dụng phương thức click ().

Ví dụ: Để bắt sự kiện click vào một nút, hãy sử dụng đoạn mã sau:

$("button").click(function(){
// Code xử lý sự kiện
});

12. Sự kiện/Jquery hover
Để sử dụng sự kiện hover bằng Jquery, sử dụng phương thức hover ().

Ví dụ: Để bắt sự kiện hover vào một phần tử, hãy sử dụng đoạn mã sau:

$("div").hover(function(){
// Code xử lý khi hover vào phần tử
}, function(){
// Code xử lý khi hover ra khỏi phần tử
});

13. Sự kiện/Jquery keypress
Để sử dụng sự kiện keypress bằng Jquery, sử dụng phương thức keypress ().

Ví dụ: Để bắt sự kiện nhập phím vào một ô nhập liệu, hãy sử dụng đoạn mã sau:

$("input").keypress(function(){
// Code xử lý khi nhập phím vào ô nhập liệu
});

14. Sự kiện/Jquery submit
Để sử dụng sự kiện submit bằng Jquery, sử dụng phương thức submit ().

Ví dụ: Để bắt sự kiện khi người dùng submit một biểu mẫu, hãy sử dụng đoạn mã sau:

$("form").submit(function(){
// Code xử lý khi submit biểu mẫu
});

15. Sự kiện/Jquery scroll
Để sử dụng sự kiện scroll bằng Jquery, sử dụng phương thức scroll ().

Ví dụ: Để bắt sự kiện khi trang web được cuộn, hãy sử dụng đoạn mã sau:

$(window).scroll(function(){
// Code xử lý khi trang web được cuộn
});

16. Sự kiện/Jquery resize
Để sử dụng sự kiện resize bằng Jquery, sử dụng phương thức resize ().

Ví dụ: Để bắt sự kiện khi kích thước cửa sổ trình duyệt thay đổi, hãy sử dụng đoạn mã sau:

$(window).resize(function(){
// Code xử lý khi kích thước cửa sổ thay đổi
});

17. Sự kiện/Jquery focus
Để sử dụng sự kiện focus bằng Jquery, sử dụng phương thức focus ().

Ví dụ: Để bắt sự kiện khi một ô nhập liệu được focus, hãy sử dụng đoạn mã sau:

$("input").focus(function(){
// Code xử lý khi ô nhập liệu được focus
});

18. Sự kiện/Jquery blur
Để sử dụng sự kiện blur bằng Jquery, sử dụng phương thức blur ().

Ví dụ: Để bắt sự kiện khi một ô nhập liệu bị blur, hãy sử dụng đoạn mã sau:

$("input").blur(function(){
// Code xử lý khi ô nhập liệu bị blur
});

19. Sự kiện/Jquery load
Để sử dụng sự kiện load bằng Jquery, sử dụng phương thức load ().

Ví dụ: Để bắt sự kiện khi trang web hoàn tất tải, hãy sử dụng đoạn mã sau:

$(window).load(function(){
// Code xử lý khi trang web hoàn tất tải
});

20. Sự kiện/Jquery each
Để lặp lại qua các phần tử HTML bằng Jquery, sử dụng phương thức each ().

Ví dụ: Để lặp lại qua các thẻ đường dẫn trên một trang web, hãy sử dụng đoạn mã sau:

$("a").each(function(){
// Code xử lý cho từng đường dẫn
});

Với những bài tập trên, bạn có thể học Jquery từ cơ bản đến nâng cao một cách dễ dàng. Hy vọng bạn sẽ có được những kỹ năng để xây dựng một trang web tuyệt vời sử dụng Jquery.