Các công nghệ thiết kế website chuyên nghiệp ngày càng được phát triển mạnh mẽ. Để giúp lập trình viên tiết kiệm thời gian viên code họ đã tạo ra những thư viện có sẵn. Thay vì viết những dòng code dài khó hiểu thì Developer sẽ học cách sử dụng thư viện bằng cách viết ngắn hơn. JQuery là một trong những Framework được ứng dụng trong thiết kế website khá như vậy. Tìm hiểu về JQuery là gì qua bài viết sau.

jquery-1

JQuery được ra đời với phương châm “Write less, do more – Viết ít hơn, làm nhiều hơn”. Nhưng nhiều người chưa thực sự hiểu rõ JQuery là gì và ứng dụng của nó. Hãy cùng Sông Mã Web tìm hiểu tường tận về JQuery qua bài viết dưới đây.

JQuery là gì?

JQuery được phát triển bởi John Resig vào năm 2006. Nó được viết bởi JavaScript phục vụ phía người dùng client-side. Nhắc tới Front-end chúng ta thường biết tới các ngôn ngữ như HTML, CSS, JavaScript. Nhưng cũng không thể thiếu được JQuery.

JQuery giúp đơn giản hoá việc duyệt HTML, thao tác, sự kiện và nó cũng hoạt động tốt trên mọi trình duyệt như Google Chrome, Opera, Yahoo…

Các tính năng của jQuery

Thao tác DOM: Viết tắt của Document Object Model. DOM dùng để truy xuất và thao tác các tài liệu có dạng HTML và XML bằng các ngôn ngữ thông dịch như JavaScript, PHP, Python.

Xử lý sự kiện: Các sự kiện như nhấp chuột, rê chuột qua phần tử, ấn Enter… Sẽ được JQuery xử lý một cách dễ dàng.

Xử lý Ajax: Viết tắc của Asynchronous JavaScript and XML. Nó giúp tạo ra website động mà không cần reload lại trang web. Chẳng hạn khi trượt xuống website sẽ tự động tải thêm bài viết mà không cần phải load lại trang.

Xử lý Form: Xử lý các sự kiện liên quan tới Form đăng ký, đăng nhập, gửi thông tin vv…

Gọn nhẹ: JQuery là thư viện gọn nhẹ vì vậy sẽ không ảnh hưởng tới tốc độ website.

Cách sử dụng JQuery

Có 2 cách để sử dụng JQuery đó là cài đặt nội bộ và dùng CDN.

– Cài đặt nội bộ:

Truy cập https://jquery.com/download/ để download phiên bản mới nhất. Sau đó tạo ra một thư mục là /jquery/ rồi thả file vừa download về vào trong. Tiếp đó chúng ta sẽ sử dụng mã JavaScript trong <head>…</head> để gọi file đó ra.

<html>
<head>

<title>Ví dụ jQuery</title>

<script type="text/javascript" src="../jquery/jquery-3.5.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){ document.write("Xin chào thế giới!"); });

</script>

</head>

<body>

<h1>Xin chào</h1>

</body>

</html>

– Sử dụng CDN:

Không giống như cách trên, cách này sẽ tải trực tiếp JQuery từ Content Delivery Network (CDN). Dưới đây là cách tải từ Google CDN:

<html>
<head>

<title>

Ví dụ jQuery

</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ document.write("Xin chào thế giới!"); }); </script> </head>

<body>

<h1>Xin chào</h1>

</body>

</html>

Kết luận: Với bài viết JQuery là gì chúng tôi đã hướng dẫn cách sử dụng. Nếu bạn đang tìm hiểu về lập trình website chắc chắn không thể không tìm hiểu JQuery.

Chuyên mục: Web