jQuery là gì? Cách sử dụng jQuery trong xây dựng Website

Để xây dựng một trang web, chúng ta cần có ba ngôn ngữ cơ bản là HTML, CSS và Javascript. Trong đó, HTML xây dựng cấu trúc web, CSS làm đẹp cho web và JavaScript tạo tương tác cho các chức năng. Hầu hết các thao tác hay các hành động bất kỳ trên web đều được tạo bằng JavaScript.

Vậy jQuery là gì? Cách sử dụng nó trong việc xây dựng trang web như thế nào? Câu trả lời sẽ có ngay sau đây.

jQuery là gì?

jQuery là thư viện chứa các JavaScript, bạn có thể tích hợp nó để sử dụng nhằm mục đích giảm thiểu số lượng code. Nó không phải là một ngôn ngữ lập trình, mà là một công cụ dùng để viết các tác vụ phổ biến của JavaScript một cách chính xác hơn. Ngoải ra, JQuery còn tương thích với nhiều trình duyệt, điều đó có nghĩa là các sản phẩm phần mềm của bạn chắc chắn sẽ được hỗ trợ trên bất kỳ trình duyệt hiện đại nào.

Để thấy được sự khác biệt của JavaScript và jQuery, hãy xem ví dụ dưới đây khi viết chương trình cơ bản “Hello, World!”

{{EJS0}}

Ví dụ trên cho thấy cách jQuery có thể đạt được kết quả cuối cùng như JavaScript theo một cách ngắn gọn hơn.

Mục tiêu

Bài viết này bao gồm các thông tin căn bản dành cho các đối tượng chưa có kiến thức gì về jQuery. Bao gồm các phần sau đây:

• Cách cài đặt jQuery trong dự án web.
• Định nghĩa về các khái niệm xây dựng ứng dụng web quan trọng như API, DOM, và CDN.
• Các jQuery selector (bộ chọn), sự kiện và hiệu ứng phổ biến.
• Ví dụ để kiểm tra các khái niệm đã học trong suốt bài viết.

Điều kiện tiên quyết

Trước khi đi sâu vào bài hướng dẫn này, bạn cần nắm một số kiến thức sau đây để có thể tiếp thu những kiến thức mới:

• Kiến thức cơ bản về HTML và CSS. Bạn cần biết cách thiết lập một trang web cơ bản, và có sự hiểu biết về CSS selector như là ids, classes, hay pseudo elements
• Cần nắm thêm một số nguyên tắc lập trình cơ bản, các khái niệm về biến và kiểu dữ liệu cũng như toán học và logic cũng là một lợi thế.

Cài đặt jQuery

jQuery là một tập tin JavaScript mà bạn sẽ liên kết vào HTML của mình. Có hai cách để cài đặt jQuery vào dự án:

• Tải xuống một bản sao chép cục bộ (local copy)
• Liên kết file thông qua mạng phân phối nội dung Content Delivery Network (CDN)

Lưu ý: Content Delivery Network (CDN) là một hệ thống bao gồm nhiều máy chủ cung cấp nội dung web cho người dùng dựa trên vị trí địa lý. Khi bạn liên kết đến tệp jQuery được lưu trữ thông qua CDN, nó có khả năng đến người dùng nhanh hơn và hiệu quả hơn so với khi bạn lưu trữ trên máy chủ của riêng mình.

Trong các ví dụ, chúng tôi sẽ sử dụng CDN để tham chiếu đến JQuery. Trên máy chủ của Google (Google’s Hosted Libraries) bạn có thể tìm và tải các phiên bản JQuery mới nhất. Ngoài ra bạn còn có thể tải bản sao của JQuery từ trang web chính thức của nó.

Hãy làm quen bằng một dự án web nhỏ được cấu thành từ style.css trong thư mục css/, script.css trong thư mục js/ và index.html trong phần cuối của project.

{{EJS1}}

Trước tiên, hãy tạo một khung HTML và lưu nó dưới dạng index.html.

{{EJS2}}

Ngay trước phần tag </body> cuối cùng bạn thêm các liên kết của JQuery CDN. Kế đến là các tệp JavaScript nguyên thủy script.js

{{EJS3}}

Lưu ý: Nếu bạn tải bản sao chép cục bộ của jQuery, lưu nó trong thư mục js/ và liên kết với nó tại js/jquery.min.js.

Để các tệp JavaScript mà bạn đính kèm hoạt động, nó phải nằm trong thư viện của jQuery.

Tại đây, bạn có toàn quyền truy cập vào jQuery API do thư viện jQuery đã được tích hợp vào trang web của bạn.

Lưu ý: Application Programming Interface (API) là phần mềm hỗ trợ tương tác giữa client và server. Trong trường hợp này, API của jQuery bao gồm toàn bộ thông tin và tài liệu cần thiết để truy cập vào jQuery.

Sử dụng jQuery

Về cơ bản, jQuery dùng để để kết nối với các phần tử HTML trong trình duyệt thông qua DOM.

DOM (Document Object Model) là phương thức mà JavaScript (và jQuery) dùng để tương tác với HTML trong trình duyệt. Bạn có thể thấy DOM bằng cách, tại trình duyệt web bạn nhấp phải chuột và chọn Inspect. Lúc này Developer Tools sẽ mở ra và các mã code HTML mà bạn nhìn thấy chính là DOM.

DOM chứa các node HTML – một đối tượng mà JavaScript có thể thao tác. Các đối tượng này được sắp xếp theo cấu trúc dạng cây, với <html> gần thành phần gốc hơn và những yếu tố lồng nhau là một nhánh xa hơn dọc theo cây. JavaScript có thể thêm, xóa bỏ hoặc thay đổi bất kỳ yếu tố nào.

Cũng tại trang web, bạn nhấp chuột phải và chọn View Page Source, lúc này bạn sẽ thấy đầu ra thô HTML của trang web. Có thể bạn sẽ nhầm lẫn giữa DOM và nguồn HTML, tuy nhiên nên nhớ rằng chúng là khác nhau. Đối với nguồn HTML, nó hoạt động cố định và không bị tác động bởi Javascript, trong khi DOM sẽ hoạt động linh hoạt hơn và dễ thay đổi hơn.

DOM được bao bọc bởi toàn bộ node HTML cho lớp ngoài cùng, nó được xem là đối tượng tài liệu. Để bắt đầu thao tác với JQuery, bạn cần chắc chắn rằng cái tài liệu đã được chuẩn bị sẵn sàng.

Bạn cần tạo một file scripts.js trong thư mục js/, và gõ dòng code sau đây:

{{EJS4}}

Tất cả mã jQuery bạn viết sẽ được bao bọc bởi mã phía trên. khi DOM đã ở trạng thái sẵn sàng, nó sẽ phát tín hiệu cho jQuery để có mã trong hàm đồng thời thực thi JavaScript. Trong một số trường hợp, JavaScript sẽ không tải cho đến khi các phần tử được thực hiện.

Như ở phần giới thiệu, bạn đã thấy một bản thảo đơn giản “Hello, World!”, để có thể bắt đầu thực hiện tập lệnh và hiển thị văn bản ở trình duyệt. Đầu tiên bạn cần tạo một phần tử đoạn khối trống với id là “demo”

{{EJS5}}

Để gọi một jQuery bạn sử dụng kí hiệu $. Để truy cập vào DOM với jQuery, hầu hết là sử dụng cú pháp CSS đồng thời áp dụng hành động với một phương thức, sau đây là ví dụ về format của một JQuery cơ bản:

{{EJS6}}

Kí hiệu # dùng để gọi một id, chúng ta sẽ truy cập id demo bằng selector #demo. html(), nó là một phương pháp thay đổi HTML trong một phần tử.

Bây giờ chúng ta sẽ đặt chương trình “Hello, World!” bên trong jQuery ready(). Thêm dòng này vào file scripts.js của bạn, hàm lúc này sẽ có format như sau:

{{EJS7}}

Sau khi lưu file, bạn có thể mở file index.html trong trình duyệt. Nếu cú pháp và các dòng lệnh của bạn đã thực thi chính xác, trình duyệt sẽ hiển thị “Hello, World!”.

Nếu trước đó bạn vẫn chưa hiểu rõ về DOM, thì bây giờ bạn có thể thấy nó hoạt động bằng cách nhấp chuột phải vào văn bản “Hello, World!” ở trình duyệt, sau đó chọn Inspect Element, Lúc này DOM sẽ hiển thị như sau: <p id=”demo”>Hello, World!</p>. Nếu bạn chọn View Page Source, DOM sẽ hiển thị ở dạng: <p id=”demo”></p> , bản này là bản raw HTML mà trước đó bạn viết.

Selectors (bộ chọn)

Selectors đưa tín hiệu cho jQuery biết những thành phần mà chúng ta muốn làm việc. Hầu hết các Selector của jQuery đều tương tự như cách bạn đã làm việc với CSS, cùng với một số thành phần bổ sung dành riêng cho JQuery. Toàn bộ thông tin về Selectors của jQuery đều có trên các trang tài liệu chính thức.

Để truy cập một bộ chọn, hãy sử dụng biểu tượng jQuery $, theo sau là dấu ngoặc đơn () như format dưới đây

{{EJS8}}

Bạn nên sử dụng dấu ngoặc kép (“) do nó theo style guide của jQuery nên được ưu tiên hơn. Nhưng bạn cũng có thể sử dụng dấu nháy đơn (‘) vì nó phổ biến.

Dưới đây là một số selectors được sử dụng phổ biến nhất:

• $("*") – Wildcard: chọn tất cả các thành phần trong trang.
• $(this) – Current: chọn phần tử hiện tại đang được vận hành trong một hàm.
• $("p") – Tag: chọn tất cả các trường hợp tag <p>.
• $(".example") – Class: chọn các phần tử áp dụng lớp example.
• $("#example") – Id: chọn một trường hợp duy nhất có id example.
• $("[type='text']") – Attribute: chọn bất kỳ phần tử text được áp dụng thuộc tính type.
• $("p:first-of-type") – Pseudo Element: chọn <p> đầu tiên.

Trong một trang web, bạn thường thấy nhiều nhất là các classes và id. Trong đó, classes dùng để chọn nhiều phần tử còn id dùng để chọn một phần tử.

jQuery Events (Sự kiện jQuery)

Tại ví dụ “Hello, World!”, do tài liệu đã sẵn sàng nên mã code sẽ được chạy và hiển thị ngay mà không cần tương tác người dùng, do đó không cần sử dụng đến jQuery mà chỉ cần một văn bản HTML. Tuy nhiên, trong trường hợp bạn muốn nó xuất hiện chỉ khi có tương tác người dùng thì bạn phải cần đến JQuery.

Bắt đầu lại với file index.html, bạn thêm phần tử <button> để tạo thao tác click trên button.

{{EJS9}}

Để có thể click button, bạn dùng cú pháp click () để gọi hàm chứa mã “Hello, World!”

{{EJS10}}

Phần tử <button> của bạn có một id gọi là trigger, nó được bạn chọn bằng selector $(“#trigger”). Khi thêm cú pháp click(), bạn đã gán cho button thao tác hoạt động khi được click vào. Tuy nhiên, việc này vẫn chưa hoàn thành, bạn cần thêm một hàm chứa mã cho cú pháp click(). Nó có format như bên dưới.
Cuối cùng là đoạn mã như sau:

{{EJS11}}

Sau khi đã hoàn tất các bước trên, bạn lưu file script.js và tiếp tục làm mới file index.html để nó hiển thị giao diện mới trên trình duyệt. Lúc này, sẽ xuất hiện thêm button, chữ “Hello, World!” sẽ xuất hiện khi bạn click vào button đó.

Event nghĩa thuần Việt là sự kiện, là bất kỳ hoạt động nào mà bạn tương tác trên trình duyệt bằng chuột, bàn phím, màn hình cảm ứng hay bất kỳ thiết bị vật lý nào.

Dưới đây là liệt kê một số các phương thức event phổ biến của jQuery. Nếu muốn tìm hiểu hết phương thức của jQuery bạn có thể tìm hiểu tại trang web chính thức của nó:

• click() – Click: thực hiện bởi một thao tác click chuột hay bàn phím, …
• hover() – Hover: thực hiện khi di chuyển chuột vào phần tử.
• mouseenter() và mouseleave() : áp dụng di chuột vào hoặc rời một phần tử, tương ứng.
• submit() – Submit: thực hiện khi nộp biểu mẫu.
• scroll() – Scroll: thực hiện khi cuộn màn hình.
• keydown() – Keydown: thực hiện khi bạn ấn một phím trên bàn phím.

Ngoài ra, để làm cho hình ảnh động hoặc mờ dần khi người dùng cuộn màn hình xuống, hãy sử dụng cú pháp scroll(). Để thoát menu bằng phím ESC, hãy sử dụng cú pháp keydown(). Để tạo một menu dropdown accordion, hãy sử dụng cú pháp click().

Để tạo nội dung cho trang web được sinh động và thu hút thì việc hiểu và biết sử dụng các sử kiện là điều được ưu tiên và cần thiết.

Hiệu ứng trong jQuery

Nhờ vào các hiệu ứng mà jQuery cung cấp cùng với các event, bạn có thể thoải mái thêm thắt các ảnh động hay xử lý các phần tử trên trang.

Lấy ví dụ về việc đóng mở một popup overlay. Nếu như trước đó bạn cần sử dụng hai id, một cái dùng để đóng, một cái dùng để mở popup overlay. Thì bây giờ bạn có thể sử dụng một class chứa cả chức năng đóng và mở popup overlay.

Để thực hiện việc trên bạn cần làm theo hướng dẫn sau:

Đầu tiên, bạn xóa hai tag hiện có là <button> và <p> ở phần thân của file index.html. Sau đó thêm các phần như bên dưới vào file HTML của bạn:

{{EJS12}}

Tiếp đến, bạn dùng CSS để ẩn overlay trong file style.css bằng cú pháp display: none đồng thời cho nó căn giữa màn hình.

{{EJS13}}

Cũng tại file script.js, bạn thêm cú pháp toggle() để chuyển đổi giữa display: none và display: block để thực hiện tính năng ẩn hiển overlay khi click vào.

{{EJS14}}

Cuối cùng bạn khởi động lại index.html để xem khả khả năng hiển thị chuyển đổi của khi click vào button. Ngoài ra, bạn còn có thể tham khảo một số hiệu ứng khác bằng cách thay đổi toggle() thành fadeToggle() hoặc slideToggle().

Một số hiệu ứng đang được sử dụng phổ biến nhất hiện nay bao gồm:

• toggle() – Toggle: chuyển đổi khả năng hiển thị của một hoặc một số phần tử. Trong đó show() và hide() các hiệu ứng một chiều có liên quan.
• fadeToggle() – Fade Toggle: chuyển đổi khả năng hiển thị và tạo hoạt ảnh độ mờ cho một hoặc một số phần tử. Trong đó fadeIn() và fadeOut() là các hiệu ứng một chiều có liên quan.
• slideToggle() – Slide Toggle chuyển đổi khả năng hiển thị của một hay một số phần tử với hiệu ứng sliding. Trong đó slideDown() và slideUp() các hiệu ứng một chiều có liên quan.
• animate() – Animate biểu thị hiệu ứng điều chỉnh hoạt ảnh trong sở hữu của CSS với một phần tử.

Bằng jQuery, bạn có thể nhận biết được tương tác người dùng thông qua việc nhấn vào các button. Đồng thời dùng các hiệu ứng mà jQuery cung cấp để thêm các phần tử mỗi khi thao tác với button.

Tổng kết về jQuery

Với bài viết này, hy vọng bạn học được cách chọn và thao tác với các phần tử jQuery cũng như cách các tạo sự kiện và hiệu ứng hoạt động song song. Từ đó, làm nền tảng để có thể tạo nên các trang web chuyên nghiệp phục vụ cho người dùng.

Nếu bạn còn bất cứ câu hỏi nào liên quan đến jQuery, hãy để lại ở bên bình luận bên dưới, BKHOST sẽ trả lời bạn trong thời gian sớm nhất.

P/s: Bạn cũng có thể truy cập vào Blog của BKHOST để đọc thêm các bài viết chia sẻ kiến thức về lập trình, quản trị mạng, website, domain, hosting, vps, server, email,… Chúc bạn thành công.