Mục lục

1. ‘Bộ chọn’ của JQuery
2. Thay đổi nội dung thẻ chứa văn bản
3. Thay đổi thuộc tính của thẻ
4. Chèn thêm, xóa, ẩn, hiện thẻ
5. Thay đổi CSS của thẻ
6. Sử lý các sự kiện xảy ra đối với thẻ

Trước khi có thể sử dụng JQuery thì chúng ta cần thêm thư viện này vào trang web. Có 2 cách mình hay làm để thêm JQuery vào trang:

• Tải file thư viện JQuery về sau đó thêm <script src="{đường dẫn tới file thư viện}"></script> vào thẻ head của trang.
• Thêm <script src="https://code.jquery.com/jquery-3.5.0.js"></script> vào thẻ head của trang, đây là bản JQuery mới nhất.

Và hãy nhớ đoạn script hay file script của chúng ta phải được gọi sau thư viện JQuery thì mới có thể chạy được.

1. ‘Bộ chọn’ của JQuery:

Để có thể chọn một phần tử(element) trên trang web bằng id sử dụng JavaScript thì chúng ta sẽ làm như sau:
document.getElementById('{id của element}');
Hoặc có thể chọn phần tử bằng tên, bằng tag name, bằng class, …. và mỗi cái sẽ có hàm để chọn khác nhau.
Nhưng khi sử dụng JQuery thì chúng ta sẽ sử dụng đoạn code ngắn gọn xúc tích hơn như sau:

Ví dụ phần từ của chúng ta: <div id="divId" class="divClass">This is my DIV</div>

Có thể dùng ký tự ‘$’ hoặc ‘JQuery’ đề được

• Chọn phần tử bằng tên thẻ: Không nên làm như này vì chọn như này sẽ chọn tất cả thẻ div có trên trang
  let myDiv = $('div');
• Chọn phần tử bằng id:
  let myDiv = $('#divId'); hoặc let myDiv = JQuery('#divId');
• Chọn phần tử bằng class:
  let myDiv = $('.divId'); hoặc let myDiv = JQuery('.divId');

Trường hợp phần tử nằm trong phần tử khác thì chúng ta chọn nó như khi viết CSS vậy:

<ol id='myOl'>
<li class='li-1'>Text 1</li>
<li class='li-2'>Text 2</li>
<li class='li-3'>Text 3</li>
<li class='li-4'>Text 4</li>
<li class='li-5'>Text 5</li>
<li>Text 6</li>
</ol>

let myLi_1 = $('#myOl .li-1');

2. Thay đổi nội dung thẻ chứa văn bản

3. Thay đổi thuộc tính của thẻ

Nếu bạn muốn thay đổi src của thẻ img hay herf của thẻ a thì bạn sẽ sử dụng hàm:
attr('{tên thuộc tính}', '{giá trị}');

Ví dụ:$('img').attr('herf', 'www.google.com');
Lấy giá trị thuộc tính của thẻ: let link = $('img').attr('herf');

4. Chèn thêm, xóa, ẩn, hiện thẻ

1. Chèn thêm thẻ vào thẻ khác:
   • Chèn thêm phần tử vào vị trí cuối cùng của các phần tử bên trong trong phần tử đích:
     $( "div" ).append( "<p>Test</p>" );
   • Chèn thêm phần tử vào vị trí đầu tiên của các phần tử bên trong trong phần tử đích:
     $( "div" ).prepend( "<p>Test</p>" );
   • Chèn phần tử nhất định vào vị trí cuối cùng bên trong một phần tử nào đó:
     $( "<p>Test</p>" ).appendTo( "div" );
   • Chèn phần tử nhất định vào vị trí trên cùng bên trong một phần tử nào đó:
     $( "<p>Test</p>" ).prependTo( "div" );
2. Xóa phần tử:
   • Xóa nội dung của phần tử:
     $('div').empty();
   • Xóa phần tử + các sự kiện được liên kết + dữ liệu JQuery:
     $('div').remove();
   • Xóa phần tử mà không xóa các sự kiện + dữ liệu JQuery được liên kết để có thể sử dụng về sau:
     let removeElement = $('div').detach();
3. Ẩn, hiện phần tử:
   • Ẩn phần tử: $('div').hide();
   • Hiện phần tử: $('div').show();
   • Thay đổi trạng thái ẩn hiện: $('div').toggle();

5. Thay đổi CSS của thẻ

Để thay đổi được các thuộc tính CSS của thẻ ta sử dụng hàm css(key, value);
Ví dụ:
$('div').css('background-color', '#fff'); sẽ đặt màu nền của các thẻ div thành màu trắng
let color = $('div').css('background-color'); sẽ lấy ra màu của các thẻ div

Bạn cũng có thể lấy ra nhiều giá trị css bằng cách truyền vào một mảng tên các thuộc tính:
let css = $('div').css(['background-color', 'width', 'height', 'color']);

6. Sử lý các sự kiện xảy ra đối với thẻ

Để sử lý các sự kiện xảy ra với thẻ như ‘click’, ‘change’, ‘submit’, … chúng ta sử dụng hàm on(events, handler)
Ví dụ:

• Khi bấm vào nút: $('button').on('click', function(){ console.log('Button clicked!') });
• Hủy sự kiện submit forrm: $('form').on('submit', false );
• Ẩn thẻ hiện tại khi click vào nó: $('.hideMy').on('click', function(){ $(this).hide() });

Bạn cũng có thể bắt sự kiện ‘click’ bằng cách sau: $('button').click(function() { $(this).hide() });, một số sự kiện khác cũng có thể làm như vậy.
Hàm click() nếu không tryền tham số sẽ mô phỏng lại hành động click vào phần tử đó: $('button').click();