JQuery là gì ? Tại sao lại nên sử dụng JQuery ?

Chúng ta đều biết rằng frontend sử dụng rất nhiều các hiệu ứng cũng như giao tiếp với server thông qua Javascript rất nhiều. Tuy nhiên để được như vậy thì cần code javascript rất dài. Vậy nên trong bài viết này chúng ta hãy cùng tìm hiểu về khái niệm JQuery – thư viện nổi bật nhất của JavaScript nhé.

jQuery là gì?

jQuery là thư viện javascript nổi bật nhất, phổ biến nhất trong lập trình web. Ra đời vào năm 2006 bởi John Resig. Nó đã trở thành một thành phần không thể thiếu trong các website có sử dụng Javascript. Với slogan “Write less – Do more” (viết ít hơn – làm nhiều hơn) nó đã giúp lập trình viên tiết kiệm được rất nhiều thời gian và công sức trong việc thiết kế website.

jQuery có công dụng gì?

jQuery cung cấp các phương thức xử lý sự kiện, hiệu ứng, tương tác  chỉ với những dòng lệnh đơn giản. Các module chính mà của jQuery sử bao gồm:

• Ajax – xử lý Ajax
• Atributes – xử lý 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ý form
• DOM – xử lý Data Object Model
• Selector – xử lý luồng lách các đối tượng HTML
• Hiệu ứng và hoạt hình
• Phân tích cú pháp JSON

Tại sao nên dùng jQuery

• jQuery rất nhanh và có thể mở rộng.
• jQuery cải thiện hiệu suất của một ứng dụng.
• Giúp các ứng dụng web tương thích với các trình duyệt khác nhau. Mỗi trình duyệt khác nhau có thể quy định cách viết mã lệnh Javascript để thực hiện cùng một công việc theo các cách khác nhau. Ví dụ một số trình duyệt không hỗ trợ sự kiện DOMContentLoaded trong phương thức addEventListener() mà lại hỗ trợ sự kiện load hoặc onreadystatechange hoặc onload. Do đó dẫn tới việc lập trình viên Javascript thường phải rất vất vả khi xử lý sự khác biệt này. Sử dụng thư viện jQuery cho phép bạn có thể viết mã lệnh Javascript chạy được trên hầu hết các loại trình duyệt khác nhau với cùng một code.
• Cộng đồng và thư viện phong phú giúp giảm thiểu thời gian viết ứng dụng.
• jQuery dễ dàng cho người dùng viết code, chức năng liên quan đến UI với lượng code tối thiểu nhất. Ví dụ: JavaScript thuần ta viết 1 đoạn mã sau

document.addEventListener('DOMContentLoaded', function () {
    var btnEl = document.getElementsByTagName("button")[0];
    var textEl = document.getElementById("text");
    btnEl.addEventListener("click", function() {
            textEl.innerHTML = "TopDev - Việc làm IT cho Top Developers";
    });
});

Viết bằng jQuery ta có:

$(function(){
    $("button").click(function(){
        $("#text").html("TopDev - Việc làm IT cho Top Developers");
    });
});

Cú pháp cơ bản

Cú pháp của jquery luôn bắt đầu bằng kí tự $ hoặc jQuery

Ví dụ 1

# Lấy đối tượng có id = button-id trong jquery
var object = $('#button-id');
hoặc
var object = jQuery('#button-id');

Ví dụ 2
$('#button-id').on('click', function(){
  var textbox = $('#textbox-id');
  alert(textbox.val());

  # $('#button-id').on('click', function(){}
  # => Hàm sự kiện click vào button có id = button-id
  # var textbox = $('#textbox-id');
  # => Lấy ra thẻ HTML có id = textbox-id
  # alert(textbox.val()); in ra giá trị của textbox.
};

Document Ready (sự kiện sẵn sàng)

Để đảm bảo các đoạn mã JQuery không chạy trước khi trang đã được tải xong, bạn cần sử dụng một sự kiện xác định sẵn tài liệu sẵn sàng. Cú pháp:

$(document).ready(function(){
   // Các đoạn JQuery
});

Tại sao cần sử dụng sự kiện này? ví dụ trong trường hợp đoạn mã JQuery của bạn có tác động đến một class có tên “TopDev” nhưng class này chưa được tải xong thì hành động của JQuery là thất bại. Bạn có thể đưa các đoạn mã về cuối trang để khắc phục nhưng với sự kiện sẵn sàng bạn có thể để nó ở đầu trang.

Sự kiện cho các phần tử trong jQuery

Sự kiện là một hành động đến từ người dùng hoặc trình duyệt. Cú pháp sử dụng sự kiện: $ (selector).sự_kiện(Mã_thực_thi) jQuery có những sự kiện sau:

• • Các sự kiện đế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 sự kiện đế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 sự kiện đến từ form
    • submit: khi nhấn gửi dữ liệu đi (loại button với type 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 sự kiện đến từ trình duyệt
    • 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.

Lấy phần tử trong HTML

Trước khi jQuery ra đời việc tương tác với phần tử HTML sử dụng Javascript là một công việc rất gian nan và đòi hỏi lập trình viên phải viết rất nhiều các đoạn code dài để chỉ thực hiện một công việc đơn giản. Sử dụng jQuery việc tương tác với phần tử HTML trở nên đơn giản hơn rất nhiều.

Trong Javascript thuần, 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")… Bạn có thể thấy nó quá dài và rất tốn thời gian. Trong jQuery để lấy ra một phần tử trong HTML 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.
• $(".TopDev") : Lấy các phần tử có class “TopDev“.
• $("# TopDev") : Lấy phần tử có ID là “TopDev“.
• $("*") : 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.

Trước khi jQuery ra đời việc tương tác với phần tử HTML sử dụng Javascript là một công việc rất gian nan và đòi hỏi lập trình viên phải viết rất nhiều các đoạn code dài để chỉ thực hiện một công việc đơn giản. Sử dụng jQuery việc tương tác với phần tử HTML trở nên đơn giản hơn rất nhiều.

Nguồn: https://topdev.vn/blog/jquery-la-gi/

Đọc thêm: Nguyên tắc thiết kế API