jQuery là gì? Giới thiệu về jQuery

jQuery là gì?

jQuery là 1 bộ thư viện được viết dựa trên ngôn ngữ JavaScript đa trình duyệt giúp đơn giản hoá việc viết mã lệnh JavaScript. jQuery là thư viện mã nguồn mở (hoàn toàn miễn phí sử dụng) được bắt đầu phát triển John Resig và phiên bản đầu tiên được ra đời vào tháng 8 năm 2006.

Nói một cách dễ hiểu hơn, khi thiết kế website, các hiệu ứng trên website của bạn được cấu thành dựa trên các đoạn mã Javascript khá dài dòng và phức tạp. Để tiết kiệm thời gian của các lập trình viên trong vấn đề này, người ta đã sáng lập ta jQuery như một giải pháp triệt để giúp sử dụng JavaScript một cách ttương tác và hấp dẫn hơn.

jQuery được sử dụng trong 99% trên tổng số website trên thế giới (trừ những website sử dụng JS Framework).

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

  • Ajax – xử lý Ajax
  • Atributes – Xử lý các thuộc tính của đối tượng HTML
  • Effect – xử lý hiệu ứng
  • Event – xử lý sự kiện
  • Form – xử lý sự kiện liên quan tới form
  • DOM – xử lý Data Object Model
  • Selector – xử lý luồng lách giữa các đối tượng HTML

Những ưu điểm nổi bật của jQuery có thể kể đến:

+ jQuery là một thư viện JavaScript nhỏ, nhanh và nhẹ.

+ jQuery là nền tảng độc lập, sử dụng mã nguồn mở nên cũng dễ mở rộng và phát triển

+ jQuery giúp các lập trình viên có thể đơn giản hóa các thao tác AJAX và thao tác DOM.

+ jQuery cung cấp các phương thức xử lý sự kiện, hiệu ứng, tương tác tuyệt vời hơn chỉ với những dòng lệnh đơn giản.

Những tính năng nổi bật trong jQuery 3.0

Hiện nay, jQuery đã có đến phiên bản 3.0 với nhiều đặc điểm nổi bật như:

Thay đổi phương thức .data() : Trong phiên bản cũ, nếu trong thẻ HTML có thuộc tính data-* mà trong dấu * có chứa số và tên quá dài thì khi gọi hàm .data() bạn sẽ lấy được sai giá trị của thuộc tính đó.

Ở phiên bản mới 3.0 của jQuery, bạn sẽ khắc phục được tất cả những vấn đề này. Hàm data() sẽ tự hiểu tên thuộc tính thành foo-42name thay vì foo-42-name

Trong bản 3.0, JQuery đã hỗ trợ trả về kiểu decimal đối với các hàm width(), height(), .css("width"), và .css("height")

Trong JQuery 3.0, sẽ không còn các phương thức  .load(), .unload(), và .error()

jQuery 3.0 có nhiều tính năng nổi bật

Phương thức unwrap( selector ) :Ở phiên bản 3.0 jQuery có thêm phương thức unwrap, đây là phương thức có tác dụng xóa bỏ thẻ cha của một selector. Ngoài ra, JQuery còn có các cải thiện hiệu năng cho việc sử dụng animation và kiểm soát lỗi khi runtime.

+ Phương thức node of: node of là một phương thức tính năng hoàn toàn mới được cung cấp trong phiên bản mới này. Nó là một trong số những cách để lấy ra đối tượng Iterable trong tập hợp mảng.

Các cú pháp của jQuery

Với ưu điểm rõ ràng, dễ sử dụng, các cú pháp của j-Query cũng được thiết lập để thỏa mãn tính chất này. Một số cú pháp từ jQuery mà bạn có thể tham khảo có thể kế đến như sau.

Lấy phần tử trong HTML

Trong Javascript, nếu muốn lấy một phần tử trong HTML bạn sẽ có cú pháp document.getElementBy{Id|Class|Tagname}("Tên_element")…khá dài và rất tốn thời gian khi thiết kế. Trong khi đó với j-Query, bạn chỉ cần sử dụng $ (selector)Ví dụ:

  • $ (This) : Lấy phần tử hiện tại.
  • $ ("h1") : Lấy các phần tử thẻ H1.
  • $ (".Test") : Lấy các phần tử có class “Test“.
  • $ ("# Test") : Lấy phần tử có ID là “Test“.
  • $ ("*") : Lấy tất cả phần tử.
  • $("p.intro") : Lấy các phần tử p có class là “intro
  • $("p:first") : Lấy phần tử p đầu tiên trong tài liệu HTML.
  • $("p:last") : Lấy phần tử p cuối cùng trong tài liệu HTML.
  • $("ul li:first") : Lấy phần tử li đầu tiên trong phần tử ul
  • $("[href]") : Lấy các phần tử có thuộc tính href.
  • $("a[target='_blank']") :  Lấy các phần tử a có thuộc tính target='_blank'
  • $("a[target!='_blank']") :  lấy các phần tử a có thuộc tính target nhưng không phải là '_blank'
  • $(":button") : Lấy các phần tử button hoặc các phần tử input có loại là button.
  • $("tr:even") : Lấy các phần tử tr chẵn trong bảng.
  • $("tr:odd") :   Lấy các phần tử tr lẽ trong bảng.
jQuery cung cấp các phương thức xử lý sự kiện, hiệu ứng, tương tác tuyệt vời hơn chỉ với những dòng lệnh đơn giản

Các thao tác cho các phần tử trong jQuery

Thao tác có thể hiểu là một hành động đến từ người dùng hoặc từ trình duyệt web. Cú pháp sử dụng thao tác thông thường: $ (selector).thao_tác(Mã_thực_thi) . Trong j-Query có những thao tác sau:

  • Các thao tác đến từ hành động của “chuột”
    • click: khi click vào đối tượng.
    • dblclick: khi double click vào đối tượng.
    • mouseenter: khi rê chuột vào đối tượng.
    • mouseleave: khi đưa chuột rời khỏi đối tượng.
  • Các thao tác đến từ hành động của bàn phím
    • keypress: khi phím được nhấn vào đối tượng.
    • keydown: khi phím được nhấn xuống và giữ nguyên.
    • keyup: khi phím được thả ra.
  • Các thao tác đến từ form đăng ký
    • submit: khi người dùng nhấn gửi dữ liệu đi (loại button với loại submit).
    • change: khi thay đổi giá trị trong thẻ input.
    • focus: khi người dùng nhấn vào thẻ input hoặc dùng nut tab chuyển đến thẻ input khác.
    • blur: khi rời khỏi thẻ input.
  • Các thao tác đến từ trình duyệt web
    • load: khi trang đang tải.
    • resize: khi trang thay đổi kích thước tổng thể.
    • scroll: khi trang đang cuộn lên xuống.
    • unload: khi trang đang được load lại.

CMAY – CÔNG TY THIẾT KẾ WEB CHUYÊN NGHIỆP 

Hotline: 0886 02 02 02 – 1800 6016

Email: kinhdoanh03@wbc.vn – kinhdoanh04@wbc.vn

Trụ sở chính: 06 Thăng Long, Quận Tân Bình, TP.HCM

//cmay.vn/wp-content/uploads/2018/03/footer_logo.png