jQuery là gì? Tìm hiểu về jQuery

Nếu bạn là lập trình viên Front End hoặc đang tìm hiểu về nghề lập trình thì chúng ta nên tìm hiểu thật kỹ về jQuery. JQuery là gì? những điều liên quan tới jQuery cũng như thế mạnh, nhược điểm, chức năng & cách dùng jQuery đều sẽ được nhắc đến trong nội dung dưới đây

Ι. jQuery là gì?

jQuery chào đời vào thời điểm tháng 01/2006 bởi John Resig, nó được viết từ JavaScript & hoạt động link với JavaScript, giúp xây dựng các tính năng bằng Javascript đơn giản, nhanh với nhiều chức năng. Vì vậy nó đã biến thành thư viện Javascript nổi trội nhất, thông dụng nhất trong lập trình website.

Với khẩu hiệu “Write less – Do more” (viết thấp hơn – làm nhiều hơn) nó đã hỗ trợ lập trình viên tiết kiệm được rất là nhiều thời gian & công sức trong việc kiến trúc trang web.

II. Ưu, điểm yếu của jQuery

1. Ưu thế

  • Cộng đồng & thư viện đa dạng giúp giảm bớt thời gian viết áp dụng
  • Giải quyết code rất nhanh chóng & có khả năng mở rộng
  • Tạo cơ hội cho người dùng viết các mã tính năng bằng các dòng ít nhất
  • Cải tổ năng suất lập trình website
  • Lớn mạnh các áp dụng có tương thích với trình duyệt
  • Chủ yếu các chức năng mới của trình duyệt mới đều được jQuery sử dụng

2. Khuyết điểm

  • Nếu lạm dụng quá nhiều jQuery sẽ khiến cho client trở nên chậm rãi
  • Nhiều công dụng còn chưa được lớn mạnh, vì thế vẫn phải sử dụng Javascript để xây dựng các tính năng này

III. Nguyên nhân nên dùng jQuery

Tích hợp nhiều module với nhiều chức năng khác nhau như: Giải quyết Ajax, giải quyết các đối tượng tính chất HTML (Attributes), giải quyết hiệu ứng (Effect), giải quyết buổi lễ (Sự kiện), giải quyết buổi lễ liên quan tới form (Form), giải quyết Data Object Model (DOM), giải quyết luồng lách giữa các đối tượng HTML (Selector).

Những lợi thế của jQuery

  • Là thư viện Free, 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 hóa việc tạo hiệu ứng động bằng animation
  • Đơn giản cài đặt Ajax để tương tác với sever, cập nhật bài viết mà không cần load lại trang. Còn nếu như không có Jquery, bạn sẽ phải tùy chỉnh để code khớp với các trình duyệt & vô cùng vất vả, tốn thời gian
  • Suport giải quyết buổi lễ phong phú mà không đảo lộn HTML nhờ Sự kiện Handler
  • JQuery giúp lựa chọn, giải quyết thao tác DOM để duyệt, căn chỉnh bài viết với mã nguồn mở
Xem Thêm  Mã định danh C ++ - cái nào sau đây là / là số nhận dạng c ++ hợp lệ

IV. Cách seting jQuery

Cách 1: Setup jQuery từ website

Tải thư viện jQuery từ website. Sau đó lựa chọn phiên bản dựa theo trình duyệt website đang sử dụng & nơi dùng jQuery.

Đặt file jquery-2.1.3.min.js vào trong một thư mục trong Trang web của các bạn, chẳng hạn /jquery.

Cách 2: Dùng CDN (Content Delivery Network)

Dùng CDN để link đến thư viện jQuery của một số nhà sản xuất như cộng đồng jQuery, Google hay Microsoft. Cách làm này thay vì tải thư viện jQuery về website host hay máy chủ, tất cả chúng ta sẽ link đến thư viện jQuery của một số nhà sản xuất.

Bạn có thể include thư viện jQuery vào trong HTML code một cách trực tiếp từ CDN.

?. Cách dùng jQuery

1. Các thuật ngữ căn bản trong jQuery

jQuery Selectors là phần rất trọng yếu được sử dụng để chọn & thao tác các phần tử HTML. Có thể tìm hoặc chọn các phần tử HTML dựa vào ID, classes, attributes, types & nhiều thứ khác từ DOM. Mỗi jQuery Selector khởi đầu bằng ký tự $ (), kí tự này được gọi là factory function.

jQuery Tag Name là đại diện cho một tên thẻ có sẵn trong DOM. Chẳng hạn: $ (‘g’) chọn toàn bộ các đoạn văn ‘g’ trong ebook.

Tag ID đại diện cho một thẻ có sẵn với một ID rõ ràng và cụ thể trong DOM. Chẳng hạn: $ (‘# real-id’) chọn một phần tử rõ ràng và cụ thể trong ebook có ID của real-id.

Xem Thêm  Trung tâm căn chỉnh HTML - căn giữa trong html

Buổi lễ cho các phần tử trong jQuery là một hành động của người dùng hoặc trình duyệt.

Tag Class đại diện cho một tag có sẵn với một class rõ ràng và cụ thể trong DOM.

Function trong jQuery là một hàm được đặt tên, một hàm ẩn danh, jQuery sử dụng rất là nhiều hàm ẩn danh.

Callback là một hàm thuần JavaScript được truyền một số phương pháp như là một tham số hoặc tùy chọn hoặc là các buổi lễ được gọi để phân phối cho người tiêu dùng thời cơ để phản ứng lại khi một hiện trạng nào đó được kích hoạt.

Các Closure được tạo bất kể lúc nào một biến được khái niệm bên ngoài phạm vi giờ đây được truy cập từ bên trong phạm vi nội bộ.

Proxy Pattern: Một Proxy có thể được sử dụng để điều khiển sự truy cập tới phần tử khác thường được gọi là Real Subject. Một proxy có thể được khởi tạo tại địa điểm của Real Subject & cho phép nó để được truy cập ở cơ chế từ xa. Tất cả chúng ta có thể lưu lại phương pháp setArray của jQuery trong một Closure & viết đè lên (overwrite).

Phạm vi (Scope) của một biến là khu vực trong chương trình của các bạn mà biến đó được khái niệm. Biến trong JavaScript có hai phạm vi: Các biến Global & các biến Local.

Các tham số trong JavaScript là một loại của Array mà có tính chất length.

Context trong jQuery: Keyword nổi tiếng trong JavaScript là this tham chiếu tới Context giờ đây. Trong một hàm this có thể biến đổi lệ thuộc cách hàm đó được gọi.

2. Chỉ dẫn sử dụng jQuery căn bản

Gọi một hàm thư viện jQuery

Để một buổi lễ làm việc trên trang của các bạn thì bạn cần gọi nó bên trong hàm $(document).ready(). Toàn bộ mọi thứ bên trong sẽ tải ngay sau thời điểm DOM được tải & trước khi bài viết trang được tải.

Xem Thêm  Bootstrap là gì? Hướng dẫn chuyên sâu về Khung - bootstrap làm gì

Các hàm JavaScript trọng yếu:

  • charAt() Trả về ký tự tại chỉ mục (index) đã cho.
  • concat() Connect hai chuỗi văn bản & trả về một chuỗi mới.
  • forEach() Gọi một hàm cho mỗi phần tử của một mảng.
  • indexOf() Trả về chỉ mục về sự hiện ra trước tiên bên trong việc gọi đối tượng String với giá trị đã cho, hoặc -1 nếu như không tìm ra.
  • length() Trả về độ dài của chuỗi.
  • pop() Gỡ bỏ phần tử cuối của một mảng & trả về phần tử đó.
  • push() Thêm một hoặc nhiều phần tử tới phần cuối của một mảng & trả về độ dài mới của mảng đó.
  • reverse() Đảo ngược thứ tự các phần tử trong một mảng. Phần tử trước tiên thành cuối cùng & cuối cùng thành trước tiên.
  • sort() Xếp đặt phân loại các phần tử của một mảng.
  • substr() Trả về các ký tự trong một mảng khởi đầu từ địa điểm đã cho từ số các ký tự đã xác nhận.
  • toLowerCase() Trả về giá trị chuỗi đang gọi được thay đổi thành kiểu chữ thường.
  • toString() Trả về sự trình diễn chuỗi của giá trị số.
  • toUpperCase() Trả về giá trị chuỗi đang gọi được thay đổi thành chữ hoa

Custom Script trong jQuery là gì

jQuery chạy tốt hơn khi bạn có riêng Custom Code trong một Custom JavaScript file: custom.js.

Chẳng hạn như tất cả chúng ta bao custom.js này vào trong HTML file như sau: 

Sử dụng nhiều thư viện trong jQuery

Trong jQuery, bạn có thể sử dụng nhiều thư viện khác nhau mà không gây sự xung đột giữa chúng.

Chẳng hạn như dùng song hành thư viện jQuery & thư viện MooTools JavaScript. Bạn có thể kiểm soát phương pháp: jQuery – Công thức noConflict để tìm hiểu thêm cụ thể.

Nội dung trên mình đã giới thiệu về jQuery một cách cụ thể để bạn có thể tìm hiểu từ lúc mới khởi đầu. Nếu bạn thấy nội dung hay là ý nghĩa thì hãy để lại phản hồi phía dưới nhé

Viết một bình luận