Cộng đồng công nghệ

jQuery là một thư viện JavaScript trọng lượng nhẹ.

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/DOM
• Xử lý CSS
• Hàm đáp ứng sự  kiện HTML
• Hiệu ứng động
• AJAX
• Cá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à:

• Google
• Microsoft
• IBM
• Netflix

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.com
• Khai báo sử dụng JQuery từ một CDN, như Google

Tải xuống JQuery

Có 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én
• Phiê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:

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: $().

JQuery element selector

Thẻ 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();
    });
});