Bài 1: Hướng dẫn cách sử dụng Jquery trong Html

Bạn đang trong quá trình học lập trình website và bạn đang tìm hiểu đến phần Jquery. Và bạn muốn biết nó là gì? Trong bài viết này, mình sẽ trình bày về Jquery và cách sử dụng Jquery trong Html.

 

I. JQUERY LÀ GÌ

Jquery là một thư viện được xây dựng dựa trên mã JavaScript. Jquery giúp việc thực thi các đoạn mã JavaScript nhanh chóng hơn, nhỏ gọn hơn cùng tính năng phong phú. Thay vì bạn phải viết bằng tay hoàn toàn các đoạn mã JavaScript thực thi một kịch bản nào đó, bạn có thể sử dụng các thư viện của Jquery để thực thi đoạn mã đó một cách nhanh chóng và đơn giản.

II. CÁCH SỬ DỤNG JQUERY TRONG HTML

Bạn có thể tải mã nguồn được sử dụng trong bài viết bằng cách nhấp vào nút Tải về dưới đây:

II.1. KHAI BÁO THƯ VIỆN JQUERY

Ví dụ: Mình tạo mới 1 tệp tin index.html có nội dung như sau:

Để có thể sử dụng được Jquery trong Html, bạn cần khai báo thư viện Jquery trong thẻ <head></head>. Có thể xảy ra các trường hợp sau:

II.1.a. Trường hợp 1

Bạn có thể tải thư viện Jquery về máy và bạn có thể sử dụng Jquery ngay cả khi máy tính của bạn không có kết nối Internet (Mã nguồn nằm ở thư mục Bai1_01 trong file mã nguồn bạn đã tải về ở trên)

Trước tiên, bạn cần tải tệp tin jquery.min.js (hoặc jquery.js) tại địa chỉ: https://jquery.com/download/

Bạn có thể lựa chọn Jquery 1.x hoặc Jquery 2.x. Về cơ bản, 2 bản này giống nhau. Tuy nhiên, Jquery 2.x không hỗ trợ trên các trình duyệt Internet Explorer (IE) 6,7,8. Trong trường hợp này, mình sẽ tải về bản Jquery 1.x với phiên bản 1.11.3 là bản mới nhất.

Bạn có 2 lựa chọn:

  • Nếu bạn nhấn vào Download the compressed, production jQuery 1.11.3, bạn sẽ tải tệp tin jquery-1.11.3.min.js về máy tính
  • Nếu bạn nhấn vào Download the uncompressed, development jQuery 1.11.3, bạn sẽ tải tệp tin jquery-1.11.3.js về máy tính

Sự khác nhau giữa 2 bản này là tệp tin jquery-1.11.3.min.js đã được tối ưu hóa bằng cách xóa các ký tự trống trong tệp tin jquery-1.11.3.js nên dung lượng tệp tin jquery.min.js có dung lượng nhỏ hơn so với tệp tin jquery-1.11.3.js. Tuy nhiên, do đã xóa hết các khoảng trống nên các đoạn mã trong tệp tin jquery-1.11.3.min.js rất khó đọc. Nếu bạn muốn đọc hay tùy chỉnh các đoạn mã trong thư viện Jquery, bạn nên sử dụng tệp tin jquery-1.11.3.js.

Trong bài viết này, mình chọn tải về tệp tin jquery-1.11.3.min.js và cho tệp tin này vào nằm trong thư mục js như hình dưới:

 

Khi đó, bạn sẽ khai báo sử dụng Jquery trong tệp tin index.html theo cấu trúc như sau:

<script src="/đường_dẫn_đến_tệp_tin_jquery"></script>

II.1.b. Trường hợp 2

Thay vì tải về  và khai báo tệp tin jquery-1.11.3.min.js theo cách trên, bạn có thể sử dụng trực tiếp tệp tin jquery-1.11.3.min.js từ Google CDN, Microsoft CDN, Max CDN, ... Điều này giúp bạn có thể truy cập đến tệp tin một cách nhanh chóng nhất sử dụng mạng lưới các máy chủ (CDN) của một trong các công ty trên (Bạn có thể tìm hiểu thêm về CDN trong bài viết 11 thủ thuật giúp tăng tốc website WordPress).

PS: Mã nguồn nằm ở thư mục Bai1_02 trong file mã nguồn bạn đã tải về ở trên

Trong ví dụ này, mình sẽ sử dụng Google CDN với khai báo như sau:

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

II.2. VIẾT CÂU LỆNH JQUERY

Sau khi khai báo sử dụng, bạn sẽ bắt tay vào viết câu lệnh Jquery.

II.2.a. Viết câu lệnh Jquery nằm trong tệp tin .html

Các câu lệnh trong Jquery nằm trong cặp thẻ <script></script>

Trong ví dụ này, các câu lệnh Jquery thực hiện nhiệm vụ ẩn nội dung trong cặp thẻ <p/> khi người dùng nhấp vào nội dung trên thẻ <p/> đó. Đây là kết quả khi chạy tệp tin index.html:

Nếu bạn nhấp chuột vào dòng "Nhấn vào đây để ẩn thẻ p thứ 2" (mục 1), nội dung đó sẽ bị ẩn đi (mục 2). Vậy là bạn đã viết và chạy thành công câu lệnh Jquery được viết trong tệp tin .html.

PS: Mã nguồn nằm ở thư mục Bai1_01 trong file mã nguồn bạn đã tải về ở trên

II.2.b. Viết câu lệnh Jquery nằm ngoài tệp tin .html

Thông thường, các câu lệnh Jquery sẽ không viết trong tệp tin .html mà chúng được viết trong tệp tin .js. Trong ví dụ này, mình sẽ tạo thêm 1 tệp tin myjavascript.js có chứa đoạn lệnh Jquery như trong ví dụ trên:

 

 Khi đó, trong tệp tin index.html, thay bằng đoạn lệnh Jquery, bạn sẽ khai báo sử dụng tệp tin myjavascript.js (trong ví dụ này, tệp tin nằm trong thư mục js nên đường dẫn là "js/myjavascript.js"):

<script src="/js/myjavascript.js"></script>

PS: Mã nguồn nằm ở thư mục Bai1_02 trong file mã nguồn bạn đã tải về ở trên

Vậy là mình đã trình bày xong cách viết và chạy một đoạn lệnh Jquery trong HTML. Trong bài tới, mình sẽ trình bày chi tiết về các câu lệnh trong Jquery. Cảm ơn các bạn đã theo dõi! 

Save


Ngôn ngữ

Theo dõi Youtube

 

TÌM KIẾM

Sắm Tết trên Lazada

Hải sản Vân Đồn

 

Chào mừng bạn đến với chuyên mục

giới thiệu và cung cấp các mặt hàng

hải sản của Vân Đồn. Hải sản Vân Đồn

- Quảng Ninh | Tươi ngon, bổ dưỡng

và đảm bảo với giá cả phải chăng.

» Xem trang....