Các thao tác cơ bản với jQuery

jQuery là một thư viện JavaScript được sử dụng phổ biến để xử lý các sự kiện, thao tác với DOM và thay đổi các thuộc tính CSS. Sau đây là một số thao tác cơ bản với jQuery:

Selector: Lấy các phần tử trên trang web bằng cách sử dụng cú pháp $() với một chuỗi chọn.

Ví dụ: $("p") lấy tất cả các phần tử <p> trên trang.

Event Handling: Gắn các xử lý sự kiện cho các phần tử bằng phương thức .on().

Ví dụ: $("button").on("click", function() { alert("Button clicked!"); });

Manipulating HTML: Thay đổi nội dung của các phần tử bằng phương thức .html() hoặc .text().

Ví dụ: $("p").html("New paragraph content");

Manipulating CSS: Thay đổi các thuộc tính CSS của các phần tử bằng phương thức .css().

Ví dụ: $("p").css("color", "red");

Animation: Tạo các hiệu ứng animation bằng các phương thức như .animate() hoặc .slideDown().

Ví dụ: $("div").animate({left: '250px'});

Đó chỉ là một vài thao tác cơ bản của jQuery. Thư viện này còn có rất nhiều tính năng khác để giúp xây dựng các ứng dụng web động đẹp mắt và linh hoạt hơn. Phần tiếp theo chúng ta sẽ đi sâu vào một số nội dung với jQuery.

Lựa chọn phần tử HTML: jQuery sử dụng một số phương thức để lựa chọn phần tử HTML. Dưới đây là một số phương thức phổ biến:

$("tagname"): lấy tất cả các phần tử có thẻ tagname.
$("#id"): lấy phần tử có id bằng giá trị id.
$(".class"): lấy tất cả các phần tử có class bằng giá trị class.
$(selector, context): lấy tất cả các phần tử thỏa mãn selector trong phạm vi context.

Ví dụ: $("p") sẽ lấy tất cả các phần tử p trên trang.

Thao tác với thuộc tính và nội dung của phần tử HTML: jQuery cung cấp nhiều phương thức để thao tác với thuộc tính và nội dung của phần tử HTML. Dưới đây là một số phương thức phổ biến:

text(): lấy nội dung văn bản của phần tử.
html(): lấy nội dung HTML của phần tử.
attr(): lấy giá trị của thuộc tính của phần tử.
val(): lấy giá trị của trường đầu vào.

Ví dụ: $("p").text("Hello, world!"); sẽ thay đổi nội dung văn bản của tất cả các phần tử p thành “Hello, world!”.

Hiệu ứng và hoạt ảnh: jQuery cung cấp nhiều phương thức để tạo ra các hiệu ứng và hoạt ảnh trên trang web. Dưới đây là một số phương thức phổ biến:

hide(): ẩn một phần tử.
show(): hiển thị một phần tử.
toggle(): chuyển đổi trạng thái ẩn/hiển thị của một phần tử.
fadeIn(): hiển thị một phần tử bằng cách làm mờ từ không có gì đến hiển thị hoàn toàn.
fadeOut(): ẩn một phần tử bằng cách làm mờ từ hiển thị hoàn toàn đến không có gì.

Ví dụ: $("p").hide(); sẽ ẩn tất cả các phần tử p trên trang.

Sự kiện và xử lý sự kiện: jQuery cho phép gắn các xử lý sự kiện cho các phần tử trên trang web. Dưới đây là một số phương thức phổ biến:

click(): gắn xử lý sự kiện cho sự kiện click chuột.
submit(): gắn xử lý sự kiện cho sự kiện submit (khi submit một form).

keypress(): gắn xử lý sự kiện cho sự kiện nhấn phím trên bàn phím.
mouseover(): gắn xử lý sự kiện cho sự kiện di chuột qua một phần tử.
resize(): gắn xử lý sự kiện cho sự kiện thay đổi kích thước của trình duyệt.

Ví dụ: $("button").click(function() { alert("Button clicked!"); }); sẽ gắn một hộp thoại cảnh báo cho sự kiện click chuột trên tất cả các nút trên trang.

Ngoài ra, jQuery còn cung cấp nhiều phương thức khác để tương tác với trang web, như là thay đổi CSS, tạo ra các hiệu ứng di chuyển và thay đổi kích thước, và thay đổi cấu trúc HTML. Để biết thêm thông tin chi tiết, bạn có thể xem tài liệu của jQuery.

Ví dụ dưới đây sẽ thêm một lớp CSS mới vào các phần tử p trên trang web bằng cách sử dụng jQuery:

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Example</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function() {
			$("p").addClass("new-class");
		});
	</script>
	<style>
		.new-class {
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<p>This is a paragraph.</p>
	<p>This is another paragraph.</p>
	<p>This is a third paragraph.</p>
</body>
</html>

Trong đoạn mã trên, chúng ta đã bao gồm thư viện jQuery bằng cách sử dụng đường dẫn đến phiên bản jQuery mới nhất. Sau đó, chúng ta đã sử dụng phương thức $(document).ready() để đảm bảo rằng mã JavaScript sẽ được thực thi sau khi trang web đã được tải hoàn toàn.

Phương thức $("p") sẽ lựa chọn tất cả các phần tử p trên trang web. Sau đó, chúng ta đã sử dụng phương thức .addClass("new-class") để thêm một lớp mới có tên là new-class vào các phần tử được lựa chọn.

Cuối cùng, chúng ta đã sử dụng CSS để định dạng các phần tử có lớp new-class. Trong ví dụ này, chúng ta đã đặt màu chữ là đỏ và in đậm các phần tử đó.

JavaScript, jQuery

Các thao tác cơ bản với jQuery

Trả lời Hủy