Bài viết trước chúng ta đã cùng tìm hiểu jQuery là gì? cách cài đặt jQuery như thế nào? Trong Tutorial hướng dẫn học jQuery Online tiếng Việt từ cơ bản đến nâng cao này, chúng ta tiếp tục xem cách sử dụng jQuery ra sao ? cú pháp cơ bản jQuery như thế nào nhé.
Cú pháp jQuery
Cú pháp jQuery rất đơn giản: bạn xác định phần tử (hoặc nhiều phần từ) HTML, truy vấn và thực hiện hành động dành cho phần tử (hoặc các phần tử) đó.Cú pháp cơ bản của jQuery như sau:
$(selector).action()
$ là ký tự bắt đầu của jQuery để định nghĩa / truy vấn.(selector) để truy vấn hoặc tìm các phần tử HTMLaction() để thực hiện hành động lên các phần tử HTML đã truy vấnDưới đây là một số ví dụ về cú pháp cơ bản của jQuery, các bạn cùng xem qua nhé:
$(this).hide() ý nghĩa: ẩn phần tử hiện tại$("p").hide() ý nghĩa: ẩn tất cả các phần tử <p>$(".test").hide() ý nghĩa: ẩn tất cả các phần tử có class="test".$("#test").hide() ý nghĩa: ẩn tất cả các phần tử có id="test".Ví dụ:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
Click các dòng văn bản dưới đây
<p>Dòng 1: học jQuery online từ cơ bản đến nâng cao tại LaiXe.Xyz</p>
<p>Dòng 2: cú pháp jQuery - jQuery Syntax - Những ví dụ cơ bản nhất</p>
<p>Dòng 3: học jQuery từ đầu, áp dụng những ví dụ rõ nét tại LaiXe.Xyz</p>
</body>
</html>
Gọi hàm của jQuery như thế nào ?
Sau khi tài liệu và mọi thứ trong trang web đã tải xong, chúng ta thực hiện việc gọi các hàm của jQuery trong phương thức$(document).ready(function(){}); theo cú pháp sau đây:
$(document).ready(function(){
// hàm jQuery sẽ được gọi ở dây..
});
$(function(){
// hàm jQuery sẽ được gọi ở dây..
});
Điều này nhằm giúp đảm bảo các hàm trong jQuery sẽ truy vấn chính xác đến các phần tử sau khi chúng đã được tạo xong, tránh trường hợp jQuery chạy trước mà phần tử thì chưa xuất hiện. Điều này sẽ khiến cho jQuery của bạn trở nên vô nghĩa và bị lỗi.
Cùng xem ví dụ sau để hiểu rõ hơn jQuery sẽ làm việc như thế nào nếu bạn viết trước phần tử, sau phần tử, và sau khi trang đã tải xong
<!--DOCTYPE html-->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#dong1").click(function(){
$(this).hide();
});
});
$("#dong2").click(function(){
$(this).hide();
});
</script>
</head>
<body>
Click các dòng văn bản dưới đây<br/>
<p id='dong1'>học jQuery online từ cơ bản đến nâng cao tại LaiXe.Xyz</p>
<p id='dong2'>jQuery chạy trước: sẽ không chạy khi bạn click dòng này</p>
<p id='dong3'>Trường hợp jQuery chạy sau khi không cần đợi website tải hết</p>
<script>
$("#dong3").click(function(){
$(this).hide();
});
</script>
</body>
</html>
Vậy lời khuyên là tùy vào những trường hợp để bạn có thể chọn lựa cách đặt đoạn code jQuery sao cho hợp lý để phù hợp với từng sự kiện bạn muốn thiết lập cho website.
Đôi khi website của bạn cần tải nhiều tài nguyên, nhưng bạn đặt tất cả các hàm jQuery trong đoạn code
$(document).ready(function(){}); sẽ khiến cảm nhận sự tương tác với website có độ trễ (chậm) nhất định vì phải đợi tải hết tài liệu sau đó mới thực thi đoạn code jQuery. Hi vọng bài viết kèm theo những ví dụ trên sẽ giúp bạn nhiều hơn trong việc tìm hiểu và học jQuery nhé !
