Giới thiệu Jquery và chọn phần tử trong Jquery

A. GIỚI THIỆU JQUERY

  • Jquery là một thư viện Javascript giúp đơn giản cách viết JavaScript trong trang web.
  • JQuery giúp định dạng lại và thay đổi thông tin trong trang web.
  • Jquery giúp bạn tạo ra nhiều hiệu ứng trong trang như: các hiệu ứng tương tác user, các hiệu ứng đồ họav.v..
  • jQuery cho phép tạo ra các plugin mới nếu bạn muốn. Một plugin rất nổi tiếng viết trên nền jquery là Datatables.
  • Jquery cũng được bootstrap sử dụng để chạy các code js của nó.

Download và chèn jQuery vào trang

B1. Vào trang https://jquery.com/  => nhắp Download

download-jquery

B2. Nhắp nút phải chuột =>  Save as rồi lưu vào máy để dùng

download-jquery-2

B3. Chèn thư viện jquery vào trang

<!doctype html> <html><head>  
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="utf-8">
    <title>Tiêu đề trang web</title>
    <script src="js/jquery-3.4.1.min.js"> </script>    
    <script>
    $(document).ready(function(e){
        // Mã jquery của bạn
    
    });//$(document)
    </script>
  </head>
  <body>
    
  </body></html>

Chèn jQuery vào trang từ  CDN

B1. Vào trang  https://jquery.com/download/
B2. Nhắp Google CDN (hoặc các CDN khác cũng được)

jquery-google-cdn

B3. Chèn thư viện jquery vào trang

  <head>  
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="utf-8">
    <title>Tiêu đề trang web</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   
    <script>
    $(document).ready(function(e){
        // Mã jquery của bạn
    
    });//$(document)
    </script>
  </head>
  <body>
    
  </body></html>

B. JQUERY SELECTORS – CHỌN PHẦN TỬ

jQuery Selectors tức là dùng jquery để chọn phần tử trong trang. Chọn phần tử để thực hiện một việc gì đó.

Điểm rất hay của jquery là cú pháp chọn phần tử giống như cú pháp chọn của css. Lệnh cơ bản trong jquery là như sau:

$(query).action()

  • $ là kí hiệu đặc biệt, xác định đây là câu lệnh jQuery.
  • query diễn tả phần tử sẽ chọn trong trang, có nhiều cách chọn (element selector, #id…)
  • action là hàm sẽ tác động lên các phần tử được chọn (click, change…)

B1.   Element selector – chọn tag trong toàn trang

Là cách chọn tag trong trang theo tên tag trong chuẩn html . Ví dụ sau là chọn tag p, tag a

$("p")
$("a")

B2.  id selector – chọn tag theo tên riêng

Là cách chọn phần tử trong trang theo tên riêng do bạn đặt ra. (Tên riêng của tag bạn đặt trong thuộc tính id).

Ví dụ: có 1 tag như sau <div id=”giohang”> </div> . Bạn chọn tag này trong như sau:

$("#giohang")

B3.  class selector – chọn tag theo class

Là cách chọn phần tử theo thuộc tính class.

Ví dụ trong trang của bạn có các tag <h4 class=”box”>   </div>  thì việc chọn các tag này là như sau:

$(".box")

B4. Các cách chọn khác

$(“*”) Chọn tất cả phần tử (tag)
$(this) Chọn phần từ hiện tại
$(“p.intro”) Chọn các tag p có class=”intro”
$(“p:first”) Chọn tag p đầu tiên
$(“ul li:first”) Chọn <li> đầu tiên trong <ul> đầu tiên
$(“ul li:first-child”) Chọn <li> đầu tiên trong mỗi <ul>
$(“[href]”) Chọn các tag có thuộc tính href
$(“a[target=’_blank’]”) Chọn các tag a có thuộc tính target là _blank
$(“a[target!=’_blank’]”) Chọn các tag <a> có thuộc tính target khác _blank
$(“:button”) Chọn các tag <button> và <input> có type=”button”
$(“tr:even”) Chọn các tag <tr> chẵn
$(“tr:odd”) Chọn các tag <tr> lẻ

w3schools.com/jquery/jquery_ref_selectors.asp