Jquery là gì? Hướng dẫn viết một chương trình Jquery

Để tối ưu cho việc lập trình ngôn ngữ JavaScript các nhà khoa học máy tính đã tạo ra một thư viện có tên là Jquery nhỏ gọn với những tính năng vượt trội. Nếu bạn đang theo đuổi con đường thiết kế website thì chắc chắn không thể bỏ qua Jquery.

Thay vì phải viết ra các dòng code dài loằng ngoằng tốn nhiều thời gian thì khi sử dụng Jquery lập trình viên sẽ làm việc hiệu quả và tiết kiệm thời gian hơn rất nhiều.

Jquery là gì?

JQuery là thư viện JavaScript được phát triển bởi John Resig vào năm 2006 với mục đích “viết ít hơn – làm nhiều hơn”.

Quả thật như vậy! Đối với các lập trình viên mỗi ngày có thể viết hàng ngàn dòng code nhưng hầu như chúng đều lặp lại, để giảm thiểu công việc này bạn chỉ cần gọi ra với vài dòng code đơn giản.

Jquey có chức năng tạo các hiệu ứng, sự kiện và trang trí để website trông đẹp bắt mắt hơn.

Các module chính của jQuery là gì?

Khi tiếp xúc với jQuery bạn sẽ được học về các module bao gồm:

Ajax: dùng để xử lý Ajax
Atributes – Xử lý các thuộc tính của đối tượng HTML
Effect – dùng để xử lý các hiệu ứng
Event – Xử lý sự kiện như nhấp chuột, hover, load trang…
Form – dùng để xử lý sự kiện liên quan tới form
DOM – Xử lý Data Object Model
Selector – Sử dụng để truy vấn đến các thẻ HTMLvới cú pháp selector của CSS

Cách chèn file Jquery vào HTML

Để đảm bảo chương trình hoạt động được thì chúng ta phải nhúng Jquery vào HTML bạn có thể thực hiện như sau:

Chèn vào phần header

<html>
<head>
<script src="file-jquery.js"></script>
</head>
<body>
....
</body>
</html>

Cách thứ nhất: tải Jquery vào máy tính sau đó gọi ra

<script src=”/public/jquery-3.4.1.min.js”></script>

Cách thứ hai: Gọi từ CDN (Content Delivery Network).

Dùng CDN Google : Lấy link phiên bản jQuery tại jQuery Google tiếp theo đói bạn gọi ra như bình thường

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”> </script>

Viết chương trình Jquery đầu tiên

Nếu bạn đã học qua về JavaScript thì viết chường trình Jquery không hề khó.

Trước tiên bạn phải khởi tạo một Function (Chức năng) $(document).ready(function() hoặc viết đơn giản $(function()

<script type="text/javascript">
$(function() {
// Mã JavaScript / jQuery ở đây
});
</script>

Ví dụ mình muốn ẩn hiện một đoạn text

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>

<p>Nhấp vào đây để ẩn đi!</p>

</body>
</html>

Cú pháp viết Jquery

selector: phần tử được chọn

action: thực hiện hành động

$(“selector”).action()

Ví dụ:

$(“p”).hide(); // ẩn đi tất cả các thẻ p

Ví dụ tiếp theo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>

<p class="test">Đây là đoạn văn bản</p>
<p>Đây là đoạn văn bản</p>

<button>Nhấp vào đây!</button>

</body>
</html>

Một số sự kiên thường sử dụng trong Jquery

click(): xảy ra khi nhấp chuột trái vào

dblclick(): xảy ra khi ấn đúp chuột trái

hover(): xảy ra khi rê chuột vào phần tử

submit(): xảy ra khi người dùng gửi dữ liệu từ Form

Qua bài viết trên đây bạn đã biết Jquery là gì chưa nhỉ? Rất đơn giản và dễ hiểu phải không nào.

Bạn chỉ cần khởi tạo chức năng Function, dùng $(“phần_tử”) sau đó là dùng một sự kiện Event chẳng hạn .hide() để thực thi hành động.

Để học đươc jQuery bạn cần có kiến thức nền tảng về JavaScript. Hiện nay số lượng website trên thế giới sử dụng jQuery khá phổ biến. Chính vì vậy học jQuery sẽ giúp bạn trở thành web developer toàn diện.