jQuery được sử dụng để chọn bất kỳ phần tử HTML nào từ tài liệu HTML và sau đó thực hiện bất kỳ hành động nào trên phần tử đã chọn đó. Để chọn một phần tử HTML, bộ chọn jQuery được sử dụng, chúng ta sẽ nghiên cứu chi tiết các bộ chọn này trong chương tiếp theo. Bây giờ, chúng ta hãy xem Cú pháp jQuery cơ bản để Tìm hiểu hoặc Chọn hoặc Truy vấn một phần tử và sau đó thực hiện một hành động trên phần tử đã chọn.
Document Ready Event
Trước khi xem xét Cú pháp jQuery , chúng ta hãy cố gắng hiểu Document Ready Event là gì . Trên thực tế, trước khi chúng tôi thực thi bất kỳ câu lệnh jQuery nào, chúng tôi muốn đợi tài liệu được tải đầy đủ. Điều này là do jQuery hoạt động trên DOM và nếu DOM hoàn chỉnh không có sẵn trước khi thực thi các câu lệnh jQuery, thì chúng tôi sẽ không nhận được kết quả mong muốn.
Sau đây là cú pháp cơ bản của Document Ready Event:
$(document).ready(function(){
// jQuery code goes here...
});
Ngoài ra, bạn cũng có thể sử dụng cú pháp sau cho Document Ready Event:
$(function(){
// jQuery code goes here...
});
>Bạn phải luôn giữ khối Sự kiện Sẵn sàng cho Tài liệu bên trong các thẻ <script>…</script> và bạn có thể giữ thẻ script này bên trong các thẻ <head>…</head> hoặc ở cuối trang trước khi đóng thẻ <body> .
Bạn có thể sử dụng một trong hai cú pháp này để giữ mã jQuery của mình bên trong khối. Mã này sẽ chỉ được thực thi khi DOM hoàn chỉnh được tải xuống và sẵn sàng để phân tích cú pháp.
Cú pháp jQuery
Sau đây là cú pháp cơ bản để chọn các phần tử HTML và sau đó thực hiện một số thao tác trên (các) phần tử đã chọn:
$(document).ready(function(){
$(selector).action()
});
Bất kỳ câu lệnh jQuery nào cũng bắt đầu bằng ký hiệu đô la $ và sau đó chúng ta đặt bộ chọn bên trong dấu ngoặc nhọn () . Cú pháp $(selector) này là đủ để trả về các phần tử HTML đã chọn, nhưng nếu bạn phải thực hiện bất kỳ hành động nào trên (các) phần tử đã chọn thì phần action() là bắt buộc.
Hàm $() là một từ đồng nghĩa của hàm jQuery() . Vì vậy, trong trường hợp bạn đang sử dụng bất kỳ thư viện JavaScript nào khác mà dấu $ xung đột với một số thứ khác thì bạn có thể thay thế dấu $ bằng tên jQuery và bạn có thể sử dụng hàm jQuery() thay vì $() .
ví dụ
Dưới đây là một số ví dụ để minh họa Cú pháp jQuery cơ bản. Ví dụ sau sẽ chọn tất cả các phần tử <p> từ một tài liệu HTML và sẽ ẩn các phần tử đó. Hãy thử chạy mã jQuery sau:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("p").hide()
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<p>This is another p tag</p>
<span>This is span tag</span>
<div>This is div tag</div>
</body>
</html>
Hãy viết lại ví dụ trên bằng phương thức jQuery() thay vì $() :
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function() {
jQuery("p").hide()
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<p>This is another p tag</p>
<span>This is span tag</span>
<div>This is div tag</div>
</body>
</html>
Sau đây là Cú pháp jQuery để thay đổi màu của tất cả các phần tử <h1> thành màu đỏ. Hãy thử chạy mã jQuery sau:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("h1").css("color", "red")
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<span>This is span tag</span>
<div>This is div tag</div>
</body>
</html>
Tương tự, bạn có thể thay đổi màu của tất cả các phần tử có lớp là “đỏ”. Hãy thử chạy mã jQuery sau:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$(".red").css("color", "red")
});
</script>
</head>
<body>
<h1>jQuery Basic Syntax</h1>
<p>This is p tag</p>
<span>This is span tag</span>
<div class="red">This is div tag</div>
</body>
</html>
Cho đến giờ, chúng ta đã thấy các ví dụ rất cơ bản về Cú pháp jQuery để cung cấp cho bạn sự hiểu biết rõ ràng về cách chính xác jQuery sẽ hoạt động trên một tài liệu HTML. Bạn có thể sửa đổi mã được cung cấp trong các hộp ở trên và sau đó thử chạy các chương trình này để xem chúng hoạt động như thế nào.
