1. Khái niệm JQuery
jQuery là một thư viện JavaScript trọng lượng nhẹ.
Đang xem: Khai báo thư viện jquery, hướng dẫn cài Đặt và sử dụng
Mục đích của jQuery giúp chúng ta sử dụng JavaScript trên website dễ dàng hơn.
jQuery cung cấp nhiều nhiệm vụ phổ biến yêu cầu nhiều dòng mã JavaScript, trong một phương thức mà ta có thể gọi với 1 dòng code.
jQuery cũng đơn giản hóa nhiều công việc phức tạp bởi JavaScript, như AJAX và xử lý DOM.
Thư viện jQuery gồm các đặc điểm sau:
Xử lý HTML/DOMXử lý CSSHàm đáp ứng sự kiện HTMLHiệu ứng độngAJAXCác tiện ích
Có nhiều framework JS, nhưng JQuery phổ biên nhất, và cũng có khả năng mở rộng nhất. Nhiều công ty lớn sử dụng JQuery trên web, như là:
GoogleMicrosoftIBMNetflix
JQuery làm việc trên tất cả trình duyệt.Đội JQuery biết về tất cả vấn đề khi làm việc với trình duyệt, và họ giải quyết vấn đề này trong thư viện JQuery.JQuery chạy chính xác như nhau trong tất cả các trình duyệt.
2. Bắt đầu với JQuery
Thêm JQuery vào web.
Có 2 cách để bắt đầu sử dụng JQuery:
Download thư viện JQuery từ JQuery.comKhai báo sử dụng JQuery từ một CDN, như Google
Tải xuống JQueryCó 2 phiên bản JQuery để tải xuống:
Phiên bản Production – dành cho website đang chạy, phiên bản này đã được nénPhiên bản Development – dành cho web đang phát triển và kiểm thử, bản này chưa nén, và đọc được
Cả hai phiên bản có thể tải xuống từ jquery.com
Thư viện JQuery library là tập tin JavaScript, bạn tham chiếu thư viện bằng thẻ HTML Đặt file thư viện trong cùng thư mục với trang web sử dụng thư viện.HTML5 không yêu cầu có thuộc tính type = “text/javascript”jQuery CDN
Nếu không muốn download jQuery, có thể khai báo sử dụng nó từ một CDN (Content Delivery Network).
Cả hai Google và Microsoft đều chứa JQuery.
Đế sử dụng JQuery từ Google hay Microsoft:
3. Cú pháp JQuery
Cú pháp JQuery là chon thẻ HTML và thực hiện thao tác trên thẻ.Cú pháp: $(selector).
action()
Dấu $ để định nghĩa/ truy cập jQuery(selector) là thẻ HTML cần thực hiện thao tác trên thẻ JQuery action() là thực hiện thao tác trên thẻ
Ví dụ:
$(this).hide() – che dấu thẻ hiện hành.
$(“p”).hide() – che dấu tất cả các thẻ p.
$(“.test”).hide() – che dấu tất cả các thẻ với class=”test”.
$(“#test”).hide() – che dấu thẻ với id=”test”.JQuery có thể sử dụng cú pháp CSS để chọn thẻ. Sự kiện
Chú ý tất cả các phương thức JQuery trong ví dụ, đặt trong một sự kiện tài liệu ready.Điều này ngăn cản bất kỳ mã JQuery khi chạy trước khi tài liệu load xong (là sẵn sàng ready).
Cú pháp:$(function(){ // jQuery methods});
Ví dụ:
$(document).ready(function(){ $(“p”).click(function(){ $(this).hide(); });});
jQuery selectors là thành phần quan trọng, cho phép bạn chọn và xử lý các thẻ HTML.
jQuery selectors được sử dụng để tìm hay chọn thẻ HTML dựa trên name, id, classes, types, các thuộc tính và giá trị của thuộc tính…
Dựa trên các CSS Selectors tồn tại và bổ sung, có vài selectors của chính bạn.
Tất cả selectors trong JQuery bắt đầu với dấu $ và cặp dấu ngoặc tròn: $().
Xem thêm: Review Kem Dưỡng Clinique Cho Da Dầu, : Clinique Dramatically Different Moisturizing
JQuery element selectorThẻ chọn dựa trên tên thẻ:Chọn thẻ p: $(“p”)
Ví dụ: Khi nguời dùng click một button, tất cả thẻ
sẽ được che dấu.Ví dụ:$(document).ready(function(){ $(“button”).click(function(){ $(“p”).hide(); });});Chọn thẻ dựa vào thuộc tính #id của thẻ
Chọn thẻ sử dụng thuộc tính id của thẻ HTML để chỉ định thẻ chọn.
Tìm thẻ với id là test: $(“#test”)
Ví dụ: Khi người dùng kích vào button, thể với id with id=”test” sẽ che dấu:
$(document).ready(function(){ $(“button”).click(function(){ $(“#test”).hide(); });});.class Selector
Tìm thẻ với định dạng css class chỉ rõ: $(“.test”)
Ví dụ: Khi người dùng kích vào button, thẻ với class=”test” sẽ che dấu:$(document).ready(function(){ $(“button”).click(function(){ $(“.test”).hide(); });});