[JQuery tutorial] Cách dùng JQuery để thay đổi nội dung trang web

Tổng quan

3-06-2021

NỘI DUNG BÀI VIẾT

Mục lục

‘Bộ chọn’ của JQuery
Thay đổi nội dung thẻ chứa văn bản
Thay đổi thuộc tính của thẻ
Chèn thêm, xóa, ẩn, hiện thẻ
Thay đổi CSS của thẻ
Xử 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

Để thay đổi nội dung của bất cứ thẻ nào có thể chứa văn bản chúng ta sẽ sử dụng hàm text('{nội dung}')
Ví dụ ta có một thẻ p như sau <p id='test'>Đây là đoạn văn bản ban đầu</p>
Để thay đổi nó thành <p id='test'>Văn bản đã thay đổi</p> bạn dùng đoạn code như sau:
$('#test').text('Văn bản đã thay đổi');

Bạn cũng có thể sử dụng hàm text() để lấy nội dung văn bản của một thẻ như sau: let text = $('#test').text();

Nếu bạn muốn thay đổi nội dung dưới dạng thẻ html thì hay dùng hàm html() thay thế cho hàm text(), hãy tự thử nó nhé!

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ẻ

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" );
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();
Ẩ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. Xử lý các sự kiện xảy ra đối với thẻ

Để xử 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();

Vậy là mình đã hướng dẫn các bạn sơ qua về cách dùng JQuery để thay đổi nội dung trang web giúp tăng trải nghiệm người dùng, ở phần tiếp theo mình sẽ hướng dẫn các bạn dùng Ajax của JQuey để thực hiện ‘CRUD’ trong Laravel. Hãy tìm hiểu thêm về JQuey ở đây nhé: jQuery API Documentation