Trong việc lập trình thiết kế website, không thể không kể đến jQuery đóng vai trò quan trọng trong đơn giản hóa các đoạn code javascript. Vậy jQuery là gì? Nó thể hiện dưới hình dạng như nào? Hãy cùng Bizfly tìm hiểu ngay tại bài viết này nhé!

jQuery là gì?

jQuery là một thuật ngữ phổ biến trong lập trình web, dùng để chỉ thư viện javascript nổi bật. Nó giúp xây dựng cách chức năng cho website bằng javascript, rất dễ dàng, nhanh chóng, đa dạng.

jQuery được ứng dụng giúp website có tính tương tác, hấp dẫn, thêm các animation để tạo cảm giác sinh động, thông minh. jQuery miễn phí, mã nguồn mở, giúp các nhà phát triển tạo ra plug in để trừu tượng hóa các hình ảnh, hiệu ứng trên website. Nó cũng hỗ trợ nhiều trình duyệt khác nhau, có nghĩa "viết ít làm nhiều". 

Lịch sử của jQuery

jQuery được khai sinh vào năm 2006 bởi John Resig. Thời điểm đó các website vẫn còn rất đơn giản, các khái niệm về singple page application trên nền Javascript vẫn chưa xuất hiện.

Javascipt chưa đủ mạnh để xử lý nhiều tác vụ, chủ yếu dùng để hiển thị widget như hình ảnh, kho ảnh, buttons,...

Hiện nay jQuery đang được duy trì bởi một nhóm các nhà phát triển do Timmy Willison phụ trách. 

Tính đến năm 2015, jQuery được sử dụng trên 63% website hàng đầu (trên 1 triệu website), 17% của các website Internet.

Chỉ 3 năm sau, con số này tăng lên 73% trên 1 triệu web hàng đầu và 22,4% của tất cả các website tồn tại trên internet. jQuery lúc đầu được cấp phép theo CC BY-SA 2.5, 2006 được cấp lại với giấy phép MIT.

Nó cũng cung cấp mô hình xử lý sự kiện vượt cả những lựa chọn phần tử DOM cơ bản. Phiên bản gần nhất được phát hành vào 2014 là phiên bản 2.1.

jQuery xuất hiện như một giải pháp để cung cấp các features, cú pháp đồng nhất trên các trình duyệt khác nhau:

• DOM Selector:

Cung cấp syntax selector tương tự CSS selector, bất kì DOM element theo ID, tag name, Class, Show, Hide Element,...

• AJAX Handling:

Trước đây cách để lấy dữ liệu tại server về máy chủ là sử dụng map view, controller, code server để render view. 

Nhờ có jQuery, chúng ta chỉ cần dùng syntax $.ajax, truyền vào tham số URL,... là đã có thể trả lại kết quả với event success, failure,...

• Event Listener:

Những phiên bản đầu đời của các trình duyệt rất hạn chế, không có tính đồng nhất khi thêm các events như click, load, show, hide, mouseout,...cho DOM element.

Sử dụng jQuery đơn giản với .on('EventName'), kết hợp DOM selector giúp việc thêm các events thuận tiện hơn.

• jQuery Plugins:

Thư viện CSS Bootstrap cũng phát triển các tính năng Javascript trên nền jQuery. Hiện nay widget javascript đã được viết dựa trên jQuery và ứng dụng rộng rãi trên nhiều trang web.

Tại sao nên sử dụng jQuery

jQuery là gì mà được ứng dụng nhiều trong thiết kế website đến vậy?

Trước tiên, JQuey rất nhanh và cải thiện hiệu suất của ứng dụng một cách rõ rệt.

Tiếp theo, nó giúp các ứng dụng web có thể tương thích với các trình duyệt khác nhau. Có một số trình duyệt có thể không hỡ trợ một số phương thức trong code, khiến lập trình viên rất vất vả để tạo ra các đoạn mã khác biệt. 

Tuy nhiên, với jQuery, bạn có thể viết những mã lệnh Javascript chạy trên các trình duyệt khác nhau. 

jQuery cũng dễ dàng cho lập trình viên viết code. Thêm đó, nó có thư viện đa dạng, phong phú để bạn tham khảo, giảm thời gian mày mò, tìm kiếm. Cộng đồng vững mạnh sẵn sàng hỗ trợ cũng là một điểm cộng để chúng ta lựa chọn sử dung jQuery.

Những tính năng đặc biệt của jQuery

Những tính năng đặc biệt của jQuery là gì?

- Tinh gọn: Là một thư viện miễn phí, gọn nhẹ, chỉ khoảng 19KB

- Tương thích với nhiều trình duyệt khác nhau: Chạy được trên cả Chrome, Safari, MS Edge, IE, iOS, Android,...

- Dễ dàng thiết lập Ajax để tương tác với sever, update nội dung mà không cần load lại trang. Nếu không có JQquery, bạn sẽ phải tùy chỉnh để code khớp với các trình duyệt và vô cùng vất vả, tốn thời gian.

- Đơn giản hóa việc tạo hiệu ứng động bằng animation.

Hỗ trợ xử lý sự kiện đa dạng mà không xáo trộn HTML nhờ Event Handler.

jQuery giúp lựa chọn, xử lý thao tác DOM để duyệt, chỉnh sửa nội dung với mã nguồn mở. 

Các module chính của jQuery sẽ bao gồm:

- Xử lý Ajax

-Xử lý thuộc tính của đối tượng HTML với Attributes

- Xử lý hiệu ứng efect

- Event xử lý sự kiện

- Xử lý data object model (DOM)

- Xử lý luồng các đối tượng HTML với selector

- Hiệu ứng, animations

jQuery có ưu điểm gì?

Nhìn những tính năng nổi trội trên, chắc hẳn bạn sẽ nhận thấy jQuery có những ưu điểm về sự thuận tiện, nhanh chóng:

- Giúp xử lý code với tốc độ cao, khả năng nâng cấp, mở rộng.

- Giúp người dùng viết ra các mã bằng các dòng tối thiểu

- Cải thiện hiệu suất web 

- Giúp ứng dụng tương thích với nhiều trình duyệt

- Tạo ra nhiều tác vụ phức tạp mà không tốn sức, thời gian.Những thuật ngữ căn bản của jQuery bạn nên biết

Những thuật ngữ căn bản trong jQuery là gì?

$(document).ready()

Đây là một sự kiện trong jQuery với ưu điểm là kích hoạt sự kiện sớm, thích hợp với các website có dung lượng lớn, nhiều hình ảnh. Nó sẽ được kích hoạt khi tài liệu HTML của web load xong, cây DOM tạo thành.

Thể hiện dưới dạng code:

$(document).ready( function () {

   $('#target').click(function( e ){

      $(“body”).append(“bạn đã click”);

   });

});

jQuery Selectors trong jQuery

jQuery Selectors là thành phần quan trọng trong thư viện jQuery để chọn các phần tử HTML dựa trên ID, Types,... từ DOM.

$() factory function trong jQuery

Tất cả jQuery Selectors  bắt đầu bằng dấu hiệu $ ( ) với 3 building blocks cơ bản:

- Tag name: Đại diện cho tên thẻ có sẵn

- Tag ID: Đại diện cho thẻ có sẵn ID cụ thể

- Tag Class: Đại diện cho tag có sẵn trên một class cụ thể

Function

Một hàm được đặt tên được định nghĩa bởi function như sau:

function named(){

// do some stuff here

}

jQuery sử dụng hàm ẩn danh:

$(document).ready(function(){

// do some stuff here

});

Callback trong jQuery

Callback là một hàm Javascript, là các sự kiện để cung cấp cho người dùng cơ hội phản ứng lại khi kích hoạt một trạng thái nào đó/ 

Ví dụ:

$("body").click(function(event) {

console.log("clicked: " + event.target);

});

Các Closure trong jQuery

Nó được tạo bởi bất cứ khi nào một biến bên ngoài truy cập từ bên trong phạm vi nội bộ. Ví dụ:

function create() {

var counter = 0;

return {

increment: function() {

counter++;

},

 

print: function() {

console.log(counter);

}

}

}

var c = create();

c.increment();

c.print(); // ==> 1

Proxy Pattern trong jQuery

Proxy được sử dụng để điều khiển sự truy cập tới phần tử khác, được gọi là Real Subject.

(function() {

// log all calls to setArray

var proxied = jQuery.fn.setArray;

jQuery.fn.setArray = function() {

console.log(this, arguments);

return proxied.apply(this, arguments);

};

})();

Context trong jQuery

Có thể xác định contect trong một lần hàm bởi phương thức call() và apply ().

$(document).ready(function() {

// this refers to window.document

});

$("div").click(function() {

// this refers to a div DOM element

});

Các tham số trong jQuery

Đây là một loại của Array có thuộc tính length, ví dụ:

function func(x){

console.log(typeof x, arguments.length);

}

func(); //==> "undefined", 0

func(1); //==> "number", 1

func("1", "2", "3"); //==> "string", 3

Custom Script trong jQuery

Chúng ta có thể bap custim.js vào file HTML:

 

The jQuery Example

Scope trong jQuery

Biến trong javacript có 2 phạm vi:

• Các biến local: sẽ nhìn thấy bên trong một hàm nơi được định nghĩa
• Các biến global: được định nghĩa ở mọi nơi trong javascript code

Ví dụ: 

var myVar = "global"; // ==> Declare a global variable

function ( ) {

var myVar = "local"; // ==> Declare a local variable

document.write(myVar); // ==> local

}

Cách cài đặt jQuery cho website

Có 2 cách để cài đặt jQuery cho website của bạn:

Tải jQuery từ trang chủ

Bạn có thể truy cập thư viện jQuery từ website: http://jQuery.com/download.

Sau đó dựa trên 2 yếu tố để lựa chọn phiên bản: Trình duyệt web đang sử dụng và nơi sẽ ứng dụng jQuery.

Thêm thư viện jQuery vào HTML file như sau:

 

 

The jQuery Example

Hello

Tại dòng:

Bạn có thể điều hướng tới nơi lưu trữ trên máy hoặc website hosting của bạn tại vị trí src=”……”

Sử dụng jQuery CDN

Thêm thư việc jQuery vào trong HTML trực tiếp từ CDN (Content Delivery Network).

Bạn có thể tham khảo cách sử dụng Google CDN như dưới đây:

 

The jQuery Example

Hello

Kết quả trả ra sẽ là:  Hello, World!

Ví dụ jQuery

Một số ví dụ jQuery:

Sử dụng lệnh SlideDown(), SlideUp() và SlideToogle()

$("#flip").click(function(){ 

$("#panel").slideDown();

});

Ẩn HTML element bằng Hide() và Show()

$("#hide").click(function(){

   $("p").hide();

});

$("#show").click(function(){

   $("p").show();

});

Code Snippet

$("button").click(function(){

   $("h1, h2, p").toggleClass("blue");

});

Ví dụ jQuery hiệu ứng Animation

$("button").click(function(){

   $("div").animate({

       left: '250px',

       height: '+=150px',

       width: '+=150px'

   });

});

Kết luận

Như vậy chúng ta đã hiểu rõ jQuery là gì và những ưu điểm, ví dụ ứng dụng của nó trong vận hành website. jQuery là một thư viện nhanh, nhỏ, giàu tính năng, giúp đơn giản hóa client-side scripting của HTML. 

Việc tương tác với các phần tử HMLT sử dụng Javascript đã từng là một công việc khó khăn, đòi hỏi những đoạn code dài, rắc rối. Nhờ có jQuery, việc tương tác dễ dàng và rút ngắn thời gian hơn rất nhiều.

Trong thực tế, nhiều người cho rằng jQuery đã trở nên lụi tàn, đặc biệt trong thời đại các trình duyệt đang ngày càng hoàn thiện, ngày càng phức tạp và jQuery có vẻ chưa còn phù hợp. Có thể kể đến một số trường hợp:

Các tính năng như DOM selector của jQuery được thay bằng document.querySelector. $.ajax cũng được thay bằng fetch, axios, event listener thì các browser, framework JS đã có thể thay thế.

Một số tính năng của jQuery không còn cần thiết nếu sử dụng các framework JS. Nhờ cơ chế watch mà khi data thay đổi thì view sẽ auto được update, không cần thêm code nào để xử lý. Class của DOM element cũng được tách khỏi business logic, trở thành style CSS để giảm thiếu vấn đề code lỗi mỗi khi thay đổi cấu trúc HTML.

Tuy nhiên, đây vẫn là những kiến thức mà bạn nên nắm được để làm giàu thêm khả năng lập trình của mình.

Theo dõi Bizfly để cập nhật thật nhiều thông tin về lập trình thiết kế website nhé!