GALAXY TECH
Chuyên gia Công nghệ
Thứ ba, 07/02/2017 | 00:00 GMT+7

Giới thiệu về jQuery

HTML, CSS và JavaScript là ba ngôn ngữ cơ bản của web. Ta cấu trúc các trang web của bạn bằng HTML, tạo kiểu bằng CSS và thêm chức năng tương tác với JavaScript. Trên thực tế, hầu hết các hoạt ảnh và bất kỳ hành động nào xảy ra do user nhấp, di chuột hoặc cuộn đều được tạo bằng JavaScript.

jQuery là thư viện JavaScript “Viết ít hơn, làm nhiều hơn”. Nó không phải là một ngôn ngữ lập trình, mà là một công cụ được sử dụng để viết các việc JavaScript thông thường ngắn gọn hơn. jQuery có thêm lợi ích là tương thích với nhiều trình duyệt , nghĩa là bạn có thể chắc chắn rằng kết quả mã của bạn sẽ hiển thị như dự định trong bất kỳ trình duyệt hiện đại nào.

Bằng cách so sánh đơn giản "Xin chào, Thế giới!" bằng cả JavaScript và jQuery, ta có thể thấy sự khác biệt về cách viết của cả hai.

JavaScript
document.getElementById("demo").innerHTML = "Hello, World!";
jQuery
$("#demo").html("Hello, World!");

Ví dụ ngắn này trình bày cách jQuery có thể đạt được kết quả cuối cùng giống như JavaScript thuần túy một cách ngắn gọn.

Bàn thắng

Hướng dẫn này giả định không có kiến thức trước về jQuery và sẽ bao gồm các chủ đề sau:

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

Yêu cầu

Trước khi bắt đầu hướng dẫn này, bạn cần những thứ sau:

  • Kiến thức cơ bản về HTML và CSS. Bạn nên biết cách cài đặt một trang web đơn giản và hiểu rõ về các bộ chọn CSS như id, lớp và các phần tử giả.
  • Hiểu biết về các nguyên tắc cơ bản của lập trình. Mặc dù có thể bắt đầu viết jQuery mà không cần kiến thức nâng cao về JavaScript, việc quen thuộc với các khái niệm về biến và kiểu dữ liệu cũng như toán học và logic sẽ giúp ích đáng kể.

Cài đặt jQuery

jQuery là một file JavaScript mà bạn sẽ liên kết đến trong HTML của bạn . Có hai cách để đưa jQuery vào một dự án:

  • Download bản sao local .
  • Liên kết đến file qua Mạng phân phối nội dung (CDN).

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

Ta sẽ sử dụng CDN để tham chiếu jQuery trong các ví dụ của ta . Bạn có thể tìm thấy version mới nhất của jQuery trong Thư viện được lưu trữ của Google . Thay vào đó, nếu bạn muốn download , bạn có thể lấy bản sao của jQuery từ trang web chính thức .

Ta sẽ bắt đầu bài tập này bằng cách tạo một dự án web nhỏ. Nó sẽ bao gồm style.css trong folder css/ , scripts.js trong folder js/ và một index.html chính trong folder root của dự án.

project/ ├── css/ |   └── style.css ├── js/ |   └── scripts.js └── index.html

Để bắt đầu, hãy tạo một khung HTML và lưu nó dưới dạng index.html .

index.html
<!doctype html> <html lang="en">  <head>   <title>jQuery Demo</title>   <link rel="stylesheet" href="css/style.css"> </head>  <body> </body>  </html>

Liên kết đến jQuery CDN ngay trước thẻ đóng </body> , theo sau là file JavaScript tùy chỉnh của bạn , scripts.js .

index.html
<!doctype html> <html lang="en">  <head>   <title>jQuery Demo</title>   <link rel="stylesheet" href="css/style.css"> </head>  <body>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/scripts.js"></script> </body>  </html>

Tệp JavaScript của bạn ( scripts.js ) phải được bao gồm bên dưới thư viện jQuery trong tài liệu, nếu không nó sẽ không hoạt động.

Lưu ý: Nếu bạn đã download bản sao local của jQuery, hãy lưu nó vào folder js/ của bạn và liên kết tới nó tại js/jquery.min.js .

Đến đây, thư viện jQuery hiện đang được tải vào trang web và bạn có toàn quyền truy cập vào API jQuery .

Lưu ý: Giao diện lập trình ứng dụng (API) là giao diện cho phép các chương trình phần mềm tương tác với nhau. Trong trường hợp này, API cho jQuery chứa tất cả thông tin và tài liệu cần thiết để truy cập jQuery.

Sử dụng jQuery

Về cốt lõi, jQuery được sử dụng để kết nối với các phần tử HTML trong trình duyệt thông qua DOM.

Mô hình đối tượng tài liệu (DOM) là phương thức mà JavaScript (và jQuery) tương tác với HTML trong trình duyệt. Để xem chính xác DOM là gì, trong trình duyệt web , nhấp chuột phải vào trang web hiện tại, chọn Kiểm tra . Thao tác này sẽ mở Công cụ dành cho nhà phát triển. Mã HTML bạn thấy ở đây là DOM.

Mỗi phần tử HTML được coi là một nút trong DOM - một đối tượng mà JavaScript có thể chạm vào. Các đối tượng này được sắp xếp theo cấu trúc cây, với <html> gần root hơn và mỗi phần tử lồng nhau là một nhánh xa hơn dọc theo cây. JavaScript có thể thêm, bớt và thay đổi bất kỳ phần tử nào trong số này.

Nếu bạn nhấp chuột phải vào trang web và nhấp vào Xem Nguồn Trang , bạn sẽ thấy kết quả HTML thô của trang web. Thoạt đầu, thật dễ nhầm lẫn giữa DOM với nguồn HTML, nhưng chúng khác nhau - nguồn trang chính xác là những gì được viết trong file HTML. Nó là tĩnh và sẽ không thay đổi, và sẽ không bị ảnh hưởng bởi JavaScript. DOM là động và có thể thay đổi.

Lớp ngoài cùng của DOM, lớp bao bọc toàn bộ nút <html> , là đối tượng tài liệu . Để bắt đầu thao tác trang với jQuery, trước tiên ta cần đảm bảo tài liệu đã “sẵn sàng”.

Tạo file scripts.js trong folder js/ của bạn và nhập mã sau:

js / scripts.js
$(document).ready(function() {     // all custom jQuery will go here });

Tất cả mã jQuery bạn viết sẽ được bao bọc trong đoạn mã trên. jQuery sẽ phát hiện trạng thái sẵn sàng này để mã được bao gồm bên trong hàm này sẽ chỉ chạy khi DOM đã sẵn sàng để mã JavaScript thực thi. Ngay cả khi trong một số trường hợp, JavaScript sẽ không được tải cho đến khi các phần tử được hiển thị, bao gồm cả khối này được coi là phương pháp hay nhất.

Trong phần giới thiệu của bài viết này, bạn đã thấy một câu đơn giản "Xin chào, Thế giới!" kịch bản. Để bắt đầu kịch bản này và in văn bản để trình duyệt với jQuery, đầu tiên ta sẽ tạo một yếu tố đoạn khối cấp trống với ID demo áp dụng cho nó.

index.html
... <body>  <p id="demo"></p> ...

jQuery được gọi với và được biểu diễn bằng ký hiệu đô la ( $ ). Ta truy cập DOM bằng jQuery bằng cách sử dụng chủ yếu là cú pháp CSS và áp dụng một hành động với một phương thức. Một ví dụ jQuery cơ bản tuân theo định dạng này.

$("selector").method();

Vì một ID được đại diện bằng ký hiệu băm ( # ) trong CSS, ta sẽ truy cập ID demo bằng bộ chọn #demo . html() là một phương thức thay đổi HTML trong một phần tử.

Bây giờ ta sẽ đặt tùy chỉnh của ta "Xin chào, Thế giới!" chương trình bên trong shell bọc ready() jQuery. Thêm dòng này vào file scripts.js của bạn trong hàm hiện có:

js / scripts.js
$(document).ready(function() {     $("#demo").html("Hello, World!"); });

Khi bạn đã lưu file , bạn có thể mở index.html trong trình duyệt của bạn . Nếu mọi thứ hoạt động bình thường, bạn sẽ thấy kết quả Hello, World! .

Nếu trước đây bạn từng bối rối với DOM, thì bây giờ bạn có thể thấy nó hoạt động. Nhấp chuột phải vào "Hello, World!" trên trang và chọn Kiểm tra phần tử . DOM bây giờ sẽ hiển thị <p id="demo">Hello, World!</p> . Nếu bạn Xem Nguồn Trang , bạn sẽ chỉ thấy <p id="demo"></p> , HTML thô mà ta đã viết.

Bộ chọn

Bộ chọn là cách ta cho jQuery biết ta muốn làm việc trên những phần tử nào. Hầu hết các bộ chọn jQuery đều giống với những gì bạn đã quen thuộc trong CSS, với một số bổ sung dành riêng cho jQuery. Bạn có thể xem danh sách đầy đủ các bộ chọn jQuery trên các trang tài liệu chính thức của chúng.

Để truy cập một bộ chọn, hãy sử dụng ký hiệu jQuery $ , theo sau là dấu ngoặc đơn () .

$("selector")

Hướng dẫn kiểu jQuery ưa thích các chuỗi được trích dẫn kép, mặc dù các chuỗi được trích dẫn đơn cũng thường được sử dụng.

Dưới đây là tổng quan ngắn gọn về một số bộ chọn được sử dụng phổ biến nhất.

  • $("*") - Ký tự đại diện: chọn mọi phần tử trên trang.
  • $(this) - Hiện tại: chọn phần tử hiện tại đang được vận hành trong một hàm.
  • $("p") - Thẻ: chọn mọi version của <p> .
  • $(".example") - Lớp: chọn mọi phần tử có lớp example được áp dụng cho nó.
  • $("#example") - Id: chọn một phiên bản của id example duy nhất.
  • $("[type='text']") - Thuộc tính: chọn bất kỳ phần tử nào có text được áp dụng cho thuộc tính type .
  • $("p:first-of-type") - Phần tử giả: chọn <p> đầu tiên.

Nói chung, các lớp và id là những gì bạn sẽ gặp phải nhiều nhất - các lớp khi bạn muốn chọn nhiều phần tử và id khi bạn chỉ muốn chọn một phần tử.

Sự kiện jQuery

Trong phần "Xin chào, Thế giới!" ví dụ, mã chạy ngay khi trang được tải và tài liệu đã sẵn sàng, do đó không cần user tương tác. Trong trường hợp này, ta có thể viết văn bản trực tiếp vào HTML mà không cần bận tâm đến jQuery. Tuy nhiên, ta cần sử dụng jQuery nếu ta muốn làm cho văn bản xuất hiện trên trang chỉ bằng một nút bấm.

Quay lại index.html của bạn và thêm phần tử <button> . Ta sẽ sử dụng nút này để lắng nghe sự kiện nhấp chuột của ta .

index.html
... <body>  <button id="trigger">Click me</button> <p id="demo"></p>

Ta sẽ sử dụng phương thức click() để gọi một hàm có chứa “Hello, World!” mã.

js / scripts.js
$(document).ready(function() {     $("#trigger").click(); });

Phần tử <button> của ta có một ID được gọi là trình trigger , mà ta chọn với $("#trigger") . Bằng cách thêm click() , ta yêu cầu nó lắng nghe sự kiện nhấp chuột, nhưng ta vẫn chưa hoàn thành. Bây giờ ta sẽ gọi một hàm chứa mã của ta , bên trong phương thức click() .

function() {     $("#demo").html("Hello, World!"); }

Đây là mã cuối cùng.

js / scripts.js
$(document).ready(function() {     $("#trigger").click(function() {     $("#demo").html("Hello, World!");     }); });

Lưu file scripts.js và làm mới index.html trong trình duyệt. Bây giờ khi bạn nhấp vào nút, "Xin chào, Thế giới!" văn bản sẽ xuất hiện.

Sự kiện là bất kỳ lúc nào user tương tác với trình duyệt. Thông thường điều này được thực hiện với chuột hoặc bàn phím. Ví dụ ta vừa tạo đã sử dụng một sự kiện nhấp chuột. Từ tài liệu jQuery chính thức, bạn có thể xem danh sách đầy đủ các phương thức sự kiện jQuery . Dưới đây là tổng quan ngắn gọn về một số phương pháp sự kiện được sử dụng phổ biến nhất.

  • click() - Click: thực hiện chỉ với một cú nhấp chuột.
  • hover() - Di chuột: thực hiện khi di chuột qua một phần tử. mouseenter() và mouseleave() chỉ áp dụng cho các cách nhập chuột hoặc để lại một phần tử, tương ứng.
  • submit() - Gửi: thực thi khi một biểu mẫu được gửi.
  • scroll() - Scroll: thực thi khi cuộn màn hình.
  • keydown() - Phím xuống : thực hiện khi bạn nhấn xuống một phím trên bàn phím.

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

Hiểu các sự kiện là điều cần thiết để tạo nội dung trang web động với jQuery.

jQuery Effects

Các hiệu ứng jQuery hoạt động song song với các sự kiện bằng cách cho phép bạn thêm các hoạt ảnh và xử lý các phần tử trên trang.

Ta sẽ tạo một ví dụ trong đó ta mở và đóng lớp phủ cửa sổ bật lên. Mặc dù ta có thể sử dụng hai ID - một để mở lớp phủ và một để đóng nó - thay vào đó, ta sẽ sử dụng một lớp để mở và đóng lớp phủ với cùng một chức năng.

Xóa các <button> và <p> tại khỏi nội dung của index.html và thêm phần sau vào trang HTML của bạn:

index.html
... <body> <button class="trigger">Open</button>  <section class="overlay">   <button class="trigger">Close</button> </section> ...

Trong style.css của ta , ta sẽ sử dụng một lượng CSS tối thiểu để ẩn overlay bằng display: none và căn giữa nó trên màn hình.

css / style.css
.overlay {   display: none;   position: fixed;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   height: 200px;   width: 200px;   background: gray; }

Quay lại file scripts.js , ta sẽ sử dụng phương thức toggle() , phương thức này sẽ chuyển thuộc tính display CSS giữa none và block , ẩn và hiển thị lớp phủ khi được nhấp vào.

js / scripts.js
$(document).ready(function() {     $(".trigger").click(function() {         $(".overlay").toggle();     }); });

Làm mới index.html . Đến đây bạn sẽ có thể chuyển đổi khả năng hiển thị của phương thức bằng cách nhấp vào các node . Bạn có thể thay đổi toggle() thành fadeToggle() hoặc slideToggle() để xem một vài hiệu ứng jQuery tích hợp sẵn khác.

Dưới đây là tổng quan ngắn gọn về một số phương pháp hiệu ứng được sử dụng phổ biến nhất.

  • toggle() - Toggle: chuyển đổi chế độ hiển thị của một phần tử hoặc các phần tử. show() và hide() là các hiệu ứng một chiều có liên quan.
  • fadeToggle() - Fade Toggle: chuyển đổi chế độ hiển thị và tạo hoạt ảnh cho độ mờ của một phần tử hoặc các phần tử. fadeIn() và fadeOut() là những hiệu ứng một chiều có liên quan.
  • slideToggle() - Slide Toggle chuyển đổi chế độ hiển thị của một phần tử hoặc các phần tử có hiệu ứng trượt. slideDown() và slideUp() là các hiệu ứng một chiều có liên quan.
  • animate() - Animate thực hiện các hiệu ứng hoạt ảnh tùy chỉnh trên thuộc tính CSS của một phần tử.

Ta sử dụng các sự kiện jQuery để lắng nghe tương tác của user chẳng hạn như nhấp vào nút và ta sử dụng các hiệu ứng jQuery để thao tác thêm các phần tử khi hành động đó diễn ra.

Kết luận

Trong hướng dẫn này, ta đã học cách chọn và thao tác các phần tử với jQuery cũng như cách các sự kiện và hiệu ứng hoạt động cùng nhau để tạo ra trải nghiệm web tương tác cho user .

Từ đây, bạn sẽ hiểu sâu hơn về các khả năng của jQuery và đang trên đường viết mã của riêng mình.

Tags:

Các tin liên quan