Giới thiệu về jQuery, cú pháp cơ bản và tích hợp

Javascript

(Bài tiếp) Selector chọn phần tử trong jQuery

jQuery là gì?

jQuery là một thư viện JavaScript nhỏ gọn, chạy nhanh. jQuery giải quyết các vấn đề tương tác với HTML, bắt sự kiện, hiệu ứng động ... trở lên rất đơn giản.

Mọi tính năng của jQuery thực ra nó bao bọc các lệnh, hàm của JavaScript nên để hiểu jQuery bạn cần hiểu về HTML cơ bản cũng như CSS cơ bản trước.

Các tính năng chính jQuery cung cấp gồm:

Tương tác với HTML/DOM
Tương tác với CSS
Bắt và xử lý sự kiện HTML
Các hiệu ứng và chuyển động trong HTML
AJAX (Asynchronous JavaScript and XML)
JSON parsing
Các tiện ích xây dựng sẵn

Tại sao nên chọn jQuery

Hiện nay có nhiều JavaScript Framework xuất hiện nhưng jQuery vẫn là Framework phổ biến nhất và nhiều thành phần mở rộng cài thêm (extend). Nhiều công ty công nghệ lớn sử dụng jQuery như Google, Microsoft, IBM, Netflix ...

Ngoài ra jQuery còn tương thích với nhiều trình duyệt khác nhau thậm chí là IE6, bạn thật sự không cần bận tâm nhiều về việc code của mình không chạy được trên các trình duyệt khác nhau.

Cài đặt - tích hợp jQuery vào Website

Để sử dụng jQuery trong trang HTML, bạn cần đảm bảo trang HTML của mình load chính xác thư viện jQuery bằng cách sử dụng thẻ <script> ở phần <head> của HTML

<html>
    <head>
        <script src="file-jquery.js"></script>
    </head>
    <body>
        ....
    </body>
</html>

Cách 1 : tải về file js thư viện tại jQuery download (nên chọn bản đã nén có chữ .min.js), sau đó tích hợp vào trang bằng thẻ <script>. Ví dụ: <script src="/public/jquery-3.1.1.min.js"></script>

Cách 2 : thay vì phải tải về file thư viện, bạn dùng luôn từ các CDN (Content Delivery Network) giúp cho trang tải nhanh hơn.

Dùng CDN Google : Lấy link phiên bản jQuery tại jQuery Google, sau đó tích hợp vào Website, ví dụ:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

Dùng CDN Microsoft : Lấy link phiên bản jQuery tại jQuery Microsoft, sau đó tích hợp vào Website, ví dụ:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js">
</script>

Ví dụ đầu tiên về jQuery

Viết code đảm bảo HTML đã tải đầy đủ

Nói chung bạn có thể sử dụng các hàm của thư viện jQuery ở bất kỳ đâu trên trang, tuy nhiên cách tốt để thực hành là cần đảm bảo các mã sử dụng jQuery do bạn viết chỉ chạy sau khi toàn bộ trang HTML được tải đầy đủ. Để làm điều này thì bạn cần bắt sự kiện ready của đối tượng document

$(document).ready(function() {
   // Mã JavaScript / jQuery ở đây
});

Hoặc viết gọn lại

$(function() {
   // Mã JavaScript / jQuery ở đây
});

Ký tự $ được dùng để truy cập jQuery.

Ví dụ 2

Ví dụ sau sử dụng jQuery để khi trang tải xong thì tìm phần tử HTML có id là start, thay nội dung trong nó bằng chữ : GO!

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    
    <script>
        $(function() {
            $("#start").html("Go!");
        });
     </script>
     
  </head>
  <body>
    <div id="start">Start</div>
  </body>
</html>

Cách tốt hơn là mã JavaScript bạn nên viết trên một file ví dụ file yourjs.js rồi tải vào trang.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    
    <script src="yourjs.js"></script> 
    
  </head>
  <body>
    <div id="start">Start</div>
  </body>
</html>

Lúc đó code JavaScript / jQuery viết trong yourjs.js

$(function() {
  $("#start").html("Go!");
});

Phương thức html() của jQuery dùng để thay đổi nội dung phần tử.

Cú pháp jQuery

Khi sử dụng jQuery, bạn cần chọn các phần tử(query) sau đó thực hiện các hành động trên chúng, điều này được thể hiện bằng cú pháp sử dụng jQuery:

$("selector").action()

$ là ký hiệu cho biết bạn truy cập jQuery
(selector) phần tìm phần tử HTML, theo cách chọn phần tử như đã biết trong CSS (xem thêm chọn phần tử HTML). Ví dụ chọn tất cả các phần tử p là $('p'), ví dụ chọn phần tử có id là examp là $('#examp'), ví dụ chọn các phần tử có class là examclass là $('.examclass')
action() là các hành động trên phần tử đã chọn, là các hàm mà jQuery cung cập, bạn sẽ học dần các hàm này

Xem lại ví dụ trên, câu lệnh theo cú pháp đó là

$("#start").html("Go!");

Vài ví dụ thêm

$("p").hide();      // ẩn đi tất cả các thẻ p
$(".demo").hide();  // ẩn đi các phần tử có class="demo"
$("#demo").hide()   // ẩn đi phần tử có id="demo"

Bạn nhận thấy, cách chọn phần tử trong jQuery giống với cách chọn phần tử của CSS

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

(Bài tiếp) Selector chọn phần tử trong jQuery