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

PS: Nếu bạn nào muốn thưởng thức các loại hải sản tươi ngon hết ý cùng giá cả phải chăng, được đánh bắt từ vùng biển Cô Tô, Quan Lạn, Vân Đồn - Quảng Ninh, vui lòng liên hệ với mình nhé. Cảm ơn các bạn đã ủng hộ!

 

                                                HẢI SẢN VÂN ĐỒN 399

                             Chuyên bán buôn, bán lẻ hải sản tươi sống, hải sản khô, hải sản 1 nắng

                                   (Ốc móng tay Cô Tô, Sá sùng Quan Lạn, Mực tươi Cô Tô,...)

                         - Cơ sở 1: Số nhà 399, Lý Anh Tông, Thị trấn Cái Rồng, Vân Đồn, Quảng Ninh
                         - Cơ sở 2: Ngõ 184, Hoàng Quốc Việt, Cầu Giấy, Hà Nội
                         - ĐT: 0985.286.522
                         - Website: http://vandon.com.vn/haisan

                  
                  

 


Ngôn ngữ

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

TÌM KIẾM

MUA NGAY SAMSUNG GALAXY S8/ S8+ - NHẬN BỘ QUÀ TẶNG ĐỘC QUYỀN TRỊ GIÁ HƠN 4 TRIỆU