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

Rate this post

Chúng ta đều biết rằng frontend sử dụng rất nhiều hiệu ứng và giao tiếp nhiều với server thông qua Javascript. Tuy nhiên, làm như vậy cần mã Javascript rất dài.

Để hạn chế điều này nhưng vẫn đảm bảo yêu cầu, các ngôn ngữ lập trình, đặc biệt là javascript thường được xây dựng và phát triển xung quanh các thư viện. Thư viện là một tập hợp các chức năng được sử dụng thường xuyên có trong một chức năng hoặc đối tượng.

jQuery là gì?

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

jQuery làm gì?

Xem thêm:: Nha Khoa Tiếng Anh Là Gì? Phân tích ngữ nghĩa của các từ cho nha khoa

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

  • Ajax – xử lý Ajax
  • Thuộc tính – xử lý các thuộc tính của các đối tượng HTML
  • Hiệu ứng xử lý – effect
  • Sự kiện – xử lý sự kiện
  • Biểu mẫu – xử lý biểu mẫu
  • DOM – xử lý mô hình đối tượng dữ liệu
  • Bộ chọn – xử lý luồng đối tượng HTML
  • Hiệu ứng và hình ảnh động
  • Phân tích cú pháp JSON

Tại sao nên sử 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.
  • Làm cho các ứng dụng web tương thích với các trình duyệt khác nhau. Các trình duyệt khác nhau có thể chỉ định cách viết mã Javascript để thực hiện cùng một công việc theo những cách khác nhau. Ví dụ: một số trình duyệt không hỗ trợ sự kiện DOMNội dung được tải trong phương pháp addEventListener() nhưng ủng hộ sự kiện TRỌNG TẢI HOẶC sẵn sàng cho sự thay đổi HOẶC phụ trách. Kết quả là các lập trình viên Javascript thường gặp khó khăn trong việc đối phó với sự thay đổi này. Sử dụng thư viện jQuery cho phép bạn viết mã Javascript hoạt động trên hầu hết các loại trình duyệt khác nhau với cùng một mã.
  • Thư viện và cộng đồng phong phú giúp giảm thời gian viết ứng dụng.
  • jQuery giúp người dùng dễ dàng viết mã, các chức năng liên quan đến giao diện người dùng với số lượng mã tối thiểu. Ví dụ: trong JavaScript thuần túy, chúng tôi viết đoạn mã sau:

document.addEventListener(‘DOMContentLoaded’, function() { var btnEl = document.getElementsByTagName(“button”)[0]; var textEl = document.getElementById(“văn bản”); btnEl.addEventListener(“click”, function() { textEl.innerHTML = “TopDev – Việc làm CNTT cho các nhà phát triển hàng đầu”; }); });

Viết bằng jQuery chúng ta có:

Cú pháp cơ bản

Cú pháp jquery luôn bắt đầu bằng $ 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 nhấn nút có id = button-id # var textbox = $(‘#textbox-id’); # => Nhận thẻ đầu ra HTML with id = textbox-id # alert(textbox.val()); in giá trị của textbox.};

Tài liệu đã sẵn sàng (sự kiện sẵn sàng)

Xem thêm:: NHỮNG ĐIỀU BẠN CẦN BIẾT VỀ TIÊU CHUẨN CỐT LÕI VÀ CÔNG BỐ

Để đảm bảo rằng các tập lệnh JQuery không được thực thi trước khi trang tải xong, bạn nên sử dụng sự kiện sẵn sàng mặc định cho tài liệu. Cú pháp:

$(tài liệu).ready(hàm(){ // Đoạn mã JQuery });

Tại sao sử dụng sự kiện này? ví dụ: trong trường hợp mã JQuery của bạn chạm vào một lớp có tên “TopDev” nhưng lớp này chưa được tải, hành động JQuery sẽ không thành công. Bạn có thể di chuyển mã xuống cuối trang để sửa nhưng với sự kiện sẵn sàng thì bạn có thể để mã ở đầu trang.

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

Một 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 các sự kiện: $(selector).event(Execution_Code) jQuery có các sự kiện sau:

    • Các sự kiện do hành động “chuột”
      • click: khi bạn click vào đối tượng.
      • dblclick: khi bạn double click vào đối tượng.
      • mouseenter: khi rê chuột vào đối tượng.
      • mouseleave: khi bạn di chuyển chuột ra khỏi đối tượng.
    • Các sự kiện phát sinh từ thao tác bàn phím
      • keypress: khi phím được nhấn trên đối tượng.
      • keydown: khi phím được nhấn và giữ.
      • keyup: khi phím được giải phóng.
    • Sự kiện đến từ biểu mẫu
      • gửi: khi nhấn gửi dữ liệu (nhấn nút có kiểu gửi).
      • change: khi bạn thay đổi giá trị trong thẻ input.
      • tiêu điểm: khi người dùng nhấp vào thẻ đầu vào hoặc sử dụng nút tab để chuyển sang thẻ đầu vào khác.
      • blur: khi bạn bỏ thẻ input.
    • Sự kiện đến từ trình duyệt
      • load: khi trang đang tải.
      • thay đổi kích thước: khi trang thay đổi kích thước tổng thể của nó.
      • scroll: khi trang đang cuộn lên và xuống.
      • download: khi trang đang tải lại.

Lấy phần tử trong HTML

Xem thêm:: Tiêu chí nào đảm bảo một gia đình hạnh phúc?

Trong Javascript thuần túy, để lấy một phần tử trong HTML, bạn sẽ có cú pháp document.getElementBy{Id|Class|Tagname}(“Name_element”)… Có thể bạn sẽ thấy rất dài và tốn thời gian. Trong jQuery để lấy một phần tử trong HTML, chỉ cần sử dụng $(selector). Ví dụ:

  • $(This): Lấy phần tử hiện tại.
  • $(“h1”): Lấy các thành phần thẻ H1.
  • $(“TopDev”): Nhận các phần tử có lớp “TopDev”.
  • $(“#TopDev”): Lấy phần tử có id là “TopDev”.
  • $(“*”): Lấy tất cả các phần tử.
  • $(“p.intro”): Lấy p phần tử có lớp 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.
  • $(“một[target=’_blank’]: Lấy phần tử a với thuộc tính target=’_blank’
  • $(“một[target!=’_blank’]: lấy các phần tử a có thuộc tính đích chứ không phải ‘_blank’
  • $(“:button”): Lấy các phần tử nút hoặc phần tử đầu vào của loại nút.
  • $(“tr:even”): Lấy phần tử tr chẵn trong bảng.
  • $(“tr:odd”): Lấy các đối số trong bảng.

Xem thêm:: Tiêu chí nào đảm bảo một gia đình hạnh phúc?

Trước khi jQuery ra đời, việc tương tác với các phần tử HTML bằng Javascript là một công việc rất tẻ nhạt và yêu cầu các lập trình viên phải viết rất nhiều đoạn mã dài để 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 các phần tử HTML trở nên đơn giản hơn rất nhiều.

Bạn có thể quan tâm:

  • Tôi nên học gì khi sử dụng jQuery?
  • 9 trường tải lên tệp mã nguồn mở
  • Các plugin jQuery hàng đầu để tạo Hộp đèn miễn phí tốt nhất cho trang web

Chaolong TV cảm ơn bạn đã đọc bài viết JQuery là gì? Tìm hiểu về jQuery , hy vọng rằng những thông tin chúng tôi chia sẻ sẽ hữu ích cho bạn. Đừng quên Cháo Lòng TV là website trực tiếp bóng đá miễn phí, tốc độ cao, được yêu thích nhất hiện nay nhé !

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *