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

jQuery là gì?

jQuery là một thuật ngữ thông dụng trong lập trình web, dùng để chỉ thư viện javascript điển hình nổi bật. Nó giúp kiến thiết xây dựng cách chức năng cho website bằng javascript, rất thuận tiện, nhanh gọn, phong phú .
jQuery được ứng dụng giúp website có tính tương tác, mê hoặc, thêm những animation để tạo cảm xúc sinh động, mưu trí. jQuery không tính tiền, mã nguồn mở, giúp những nhà tăng trưởng tạo ra plug in để trừu tượng hóa những hình ảnh, hiệu ứng trên website. Nó cũng tương hỗ 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.

Bạn đang đọc: jQuery là gì? jQuery là gì? Những ưu điểm khi sử dụng jQuery trong website

Javascipt chưa đủ mạnh để giải quyết và xử lý nhiều tác vụ, hầu hết 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 những nhà tăng trưởng do Timmy Willison đảm nhiệm .
Tính đến năm năm ngoái, jQuery được sử dụng trên 63 % website số 1 ( trên 1 triệu website ), 17 % của những website Internet .
Chỉ 3 năm sau, số lượng này tăng lên 73 % trên 1 triệu web số 1 và 22,4 % của tổng thể những website sống sót 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 ứng quy mô giải quyết và xử lý sự kiện vượt cả những lựa chọn thành phần DOM cơ bản. Phiên bản gần nhất được phát hành vào năm trước là phiên bản 2.1 .
jQuery Open như một giải pháp để phân phối những features, cú pháp như nhau trên những trình duyệt khác nhau :

DOM Selector:

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

AJAX Handling:

Trước đây cách để lấy tài liệu tại server về sever là sử dụng map view, controller, code server để render view .
Nhờ có jQuery, tất cả chúng ta chỉ cần dùng syntax USD. ajax, truyền vào tham số URL, … là đã hoàn toàn có thể trả lại tác dụng với sự kiện success, failure, …

Event Listener:

Những phiên bản đầu đời của những trình duyệt rất hạn chế, không có tính giống hệt khi thêm những events như click, load, show, hide, mouseout, … cho DOM element .
Sử dụng jQuery đơn thuần với. on ( ‘ EventName ‘ ), tích hợp DOM selector giúp việc thêm những events thuận tiện hơn .

jQuery Plugins:

Thư viện CSS Bootstrap cũng tăng trưởng những 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 thoáng rộng trên nhiều website .

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

jQuery là gì?

jQuery là gì mà được ứng dụng nhiều trong phong cách thiết kế website đến vậy ?
Trước tiên, JQuey rất nhanh và cải tổ hiệu suất của ứng dụng một cách rõ ràng .
Tiếp theo, nó giúp những ứng dụng web hoàn toàn có thể thích hợp với những trình duyệt khác nhau. Có một số ít trình duyệt hoàn toàn có thể không hỡ trợ 1 số ít phương pháp trong code, khiến lập trình viên rất khó khăn vất vả để tạo ra những đoạn mã độc lạ .
Tuy nhiên, với jQuery, bạn hoàn toàn có thể viết những mã lệnh Javascript chạy trên những trình duyệt khác nhau .
jQuery cũng thuận tiện cho lập trình viên viết code. Thêm đó, nó có thư viện phong phú, nhiều mẫu mã để bạn tìm hiểu thêm, giảm thời hạn mày mò, tìm kiếm. Cộng đồng vững mạnh sẵn sàng chuẩn bị tương hỗ cũng là một điểm cộng để tất cả 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 quan trọng của jQuery là gì ?
– Tinh gọn : Là một thư viện không lấy phí, gọn nhẹ, chỉ khoảng chừ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 những trình duyệt và vô cùng khó khăn vất vả, tốn thời hạn .
– Đơn giản hóa việc tạo hiệu ứng động bằng animation .
Hỗ trợ giải quyết và xử lý sự kiện phong phú mà không trộn lẫn HTML nhờ Event Handler .
jQuery giúp lựa chọn, giải quyết và 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 người dù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 những đối tượng người tiêu dù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 rằng bạn sẽ nhận thấy jQuery có những ưu điểm về sự thuận tiện, nhanh gọn :
– Giúp giải quyết và xử lý code với vận tốc cao, năng lực tăng cấp, lan rộng ra .
– Giúp người dùng viết ra những mã bằng những dòng tối thiểu
– Cải thiện hiệu suất web
– Giúp ứng dụng thích hợp 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 hạn. Những thuật ngữ cơ bản của jQuery bạn nên biết
Những thuật ngữ cơ 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 những website có dung tích 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 :

USD ( document ). ready ( function ( ) {
USD ( ‘ # target ‘ ). click ( function ( e ) {
USD ( “ body toàn thân ” ). 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 những thành phần HTML dựa trên ID, Types, … từ DOM .

$() factory function trong jQuery

Tất cả jQuery Selectors mở màn bằng tín hiệu USD ( ) 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 đơn cử
– Tag Class : Đại diện cho tag có sẵn trên một class đơn cử
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:

USD ( document ). ready ( function ( ) {
/ / do some stuff here
} ) ;

Callback trong jQuery

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

USD ( ” body toàn thân ” ). click ( function ( sự kiện ) {
console.log ( ” clicked : ” + event.target ) ;
} ) ;

Các Closure trong jQuery

Nó được tạo bởi bất kể khi nào một biến bên ngoài truy vấn từ bên trong khoanh vùng 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 để tinh chỉnh và điều khiển sự truy vấn tới thành phần 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 lập contect trong một lần hàm bởi phương pháp call ( ) và apply ( ) .

USD ( document ). ready ( function ( ) {
/ / this refers to window.document
} ) ;
USD ( ” 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 hoàn toàn có thể bap custim.js vào file HTML :

The jQuery Example

Xem thêm: Deployment là gì? Một số kinh nghiệm trong Deployment hay Software Deployment

Click on this to see a dialogue box .

Scope trong jQuery

Biến trong javacript có 2 khoanh vùng 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 để setup jQuery cho website của bạn :

Tải jQuery từ trang chủ

Bạn hoàn toàn có thể truy vấn 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 hoàn toàn có thể tìm hiểu thêm 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()

USD ( ” # flip ” ). click ( function ( ) {
USD ( ” # panel ” ). slideDown ( ) ;
} ) ;

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

USD ( ” # hide ” ). click ( function ( ) {
USD ( ” p ” ). hide ( ) ;
} ) ;
USD ( ” # show ” ). click ( function ( ) {
USD ( ” p ” ). show ( ) ;
} ) ;

Code Snippet

USD ( ” button ” ). click ( function ( ) {
USD ( ” h1, h2, p ” ). toggleClass ( ” blue ” ) ;
} ) ;

Ví dụ jQuery hiệu ứng Animation

USD ( ” button ” ). click ( function ( ) {
USD ( ” div ” ). animate ( {
left : ‘ 250 px ‘ ,
height : ‘ + = 150 px ‘ ,
width : ‘ + = 150 px ‘
} ) ;
} ) ;

Kết luận

Như vậy tất cả chúng ta đã hiểu rõ jQuery là gì và những ưu điểm, ví dụ ứng dụng của nó trong quản lý và 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 những thành phần HMLT sử dụng Javascript đã từng là một việc làm khó khăn vất vả, yên cầu những đoạn code dài, rắc rối. Nhờ có jQuery, việc tương tác thuận tiện và rút ngắn thời hạn hơn rất nhiều .
Trong thực tiễn, nhiều người cho rằng jQuery đã trở nên lụi tàn, đặc biệt quan trọng trong thời đại những trình duyệt đang ngày càng triển khai xong, ngày càng phức tạp và jQuery có vẻ như chưa còn tương thích. Có thể kể đến 1 số ít 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, sự kiện listener thì những browser, framework JS đã hoàn toàn có thể thay thế sửa chữa .
Một số tính năng của jQuery không còn thiết yếu nếu sử dụng những framework JS. Nhờ chính sách watch mà khi data đổi khác thì view sẽ auto được update, không cần thêm code nào để giải quyết và 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 yếu tố code lỗi mỗi khi đổi khác 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.

Xem thêm: Delegate trong C# | How Kteam

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é!

Source: https://final-blade.com
Category : Kiến thức Internet

admin

final-blade.com