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.

Chức năng chính:

  • Event: xử lý sự kiện Form, nhấp chuột…
  • Effect: xử lý hiệu ứng rê chuột, cuộn trang, ẩn hiện phần tử…
  • Ajax: xử lý Ajax

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.

Quách Quỳnh

Xin chào bạn mình là Quách Quỳnh! Chủ nhân của blog Quachquynh.com. Tại đây bạn sẽ tìm thấy những kiến thức về Wordpress, Seo, lập trình và Marketing Online.

Hãy để lại bình luận:

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *