Functions, Widgets, Plugins trong Jquery

A. Hàm on trong Jquery

  • Hàm on() trong jquery là một hàm thường dùng để gắn sự kiện cho tag được chọn hoặc tag con của nó.
  • Từ jQuery version 1.7, hàm on() đã được đưa ra để thay thế cho các hàm bind(), live() và delegate().
  • Hàm on có thể dùng để gắn sự kiện cho tag hiện hành hoặc những tag sẽ tạo trong sau này, tức hiện tại chưa có (các tag con sẽ được tạo sau này).
  • Để gỡ sự kiện đã gắn, bạn dùng hàm off()
  • Để gắn 1 sự kiện chỉ chạy 1 lần rồi thôi thì dùng hàm one()

A1. Cú pháp của hàm on:

$(selector).on(sựkiện , tagCon , data, function, map )
Parameter Description
sựkiện Required. Chỉ định 1 hoặc nhiều sự kiện hoặc namespace mà bạn muốn gắn vào tag được chọn.  Các sự kiện cách nhau bởi khoảng trắng
tagCon Optional. Để khai báo rằng sựkiện chỉ gắn tới tag con của selector hiện tại cứ không phải chính selector, giống như hàm delegate() đã bị bỏ
data Optional. Khai báo dữ liệu sẽ chuyển đến cho hàm thực thi khi sự kiện diễn ra.
function Required. Hàm thực thi khi sự kiện diễn ra.
map Chỉ định các event map ({event:function, event:function, …}) chứa 1 hoặc nhiều sự kiện để gắn vào selector, và các hàm để chạy khi sự kiện xảy ra

A2. Gắn nhiều sự kiện

Dùng hàm on để gắn nhiều sự kiện (cùng thực thi 1 hàm) cho tag được chọn

<html><head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script>
 $(document).ready(function(){
   $("p").on("mouseover mouseout", 
     function(){
        $(this).toggleClass("intro");
     }
   );
 });
 </script>
 <style> .intro { font-size: 150%; color: red;} </style>
 </head>
 <body class="p-3">
 <p>Bài thơ về Mẹ</p>
 </body></html> 

A3. Gắn các sự kiện cho tag với map parameter

Bạn có thể gắn các sự kiện cho tag, mỗi sự kiện chạy 1 hàm khác nhau

<html><head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script>
$(document).ready(function(){
  $("#baitho").on({
    mouseover: function(){
      $(this).css("background-color", "lightgray");
    },  
    mouseout: function(){
      $(this).css("background-color", "lightblue");
    }, 
    click: function(){
      $(this).css("background-color", "yellow");
    }  
  });
});
</script>
</head><body>
<p id="baitho" class="col-5 mx-auto mt-5 border border-info p-4 text-center">
Mẹ ơi con chịu bao điều<br>
Nhưng không chịu nổi thân diều đứt dây
</p>
</body></html>

A4. Gắn sự kiện tự định nghĩa cho tag

Ngoài các sự kiện chuẩn như click, dbclick, mouseover… bạn có thể dùng on để gắn sự kiện mới của bạn cho các tag

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#chuc").on("chao", function(event, ten){
    $(this).text("Chào " + ten+ "! Chúc an lành");
  });
  $("button").click(function(){
    $("#chuc").trigger("chao", ["Tèo"]);
  });
});
</script> 
<button> Chào </button>
<p id="chuc"></p>

A5. Chuyển dữ liệu tới hàm thực thi

Cách dùng hàm on để chuyển giá trị tới hàm thực thi như sau:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" >

<script>
function hamchay1(event) {
  $("#ketqua").html(event.data.msg).addClass("bg-info mx-auto text-center p-2 text-danger h3 text-uppercase");
}
function hamchay2(event) {
  $("#ketqua").html(event.data.msg).addClass("bg-warning mx-auto text-center p-2 text-secondary h4 text-italic");
}

$(document).ready(function(){
  $("#dung").on("click", {msg: "Bé giỏi quá"}, hamchay1);
  $("#sai").on("click", {msg: "Sai rồi bé ơi"}, hamchay2);
});
</script>
<button id="dung">Đúng </button> <button id="sai">Sai</button> 
<p id="ketqua"></p>

A6. Thêm sự kiện cho các tag chưa có (sẽ có sau)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
  $("div").on("click", "p", function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
<div style="background-color:yellow">
  <p>This is a paragraph.</p>
  <p>Click any p element to make it disappear. Including this one.</p>
  <button>Insert a new p element after this button</button>
</div>

B.Callback Function

  • Trong jquery, hàm callback là các hàm thực thi sau khi 1 hiệu ứng hay 1 hàm chính đã thực thi xong 100%. Do đó bạn dùng hàm callback khi muốn làm thêm 1 việc gì đó khi hiệu ứng/hàm trước kết thúc.
  • Các lệnh JavaScript thực thi tuần tự từ trên xuống, với các hiệu ứng chạy theo thời gian chỉ định, có thể code ở hàng dưới đã chạy trong khi lệnh phía trên chạy chưa xong, có thể gây ra lỗi. Trường hợp như thế, bạn dùng hàm callback.
  • Trong jquery, đa phần các hàm là có tham số callback, đó là điểm mạnh mà jquery hỗ trợ bạn để thực thi các hiệu ứng/hàm 1 cách có thứ lớp.
  • Ví dụ :
$(selector).hide(speed, callback);

Ví dụ:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#k1").hide().show(2000, 
    	function(){ $("#k1").css("font-size","150%");}
    );
    //aa
        
  });
});
</script>
<div class="col-6 mx-auto mt-4 text-center"> <h4>LỤC VÂN TIÊN</h4>
<button id="btn1" class="h5">></button>
<p class="khotho bg-info p-2" id="k1">
Trước đèn xem truyện Tây-minh<br>Gẫm cười hai chữ nhân tình éo le,<br>
Hỡi ai lẳng lặng mà nghe,<br>Dữ răn việc trước, lành dè thân sau .
</p>
  

</div>

Trong ví dụ trên, hàm callback chỉ chạy sau khi hiệu ứng show thực hiện xong. Bạn sẽ thấy khác biệt khi di chuyển lệnh trong hàm callback xuống sau dòng chữ //aa. Hai cách viết là khác nhau, xem phân tích sau:

Dùng callback: cỡ chữ lớn lên sau khi hàm show chạy xong

  $("#btn1").click(function(){
    $("#k1").hide().show(2000, 
    	function(){ $("#k1").css("font-size","150%");}
    );
    //aa   
  });

Và không dùng callback: cỡ chữ lớn lên ngay, trước khi hiệu ứng show kết thúc

$("#btn1").click(function(){
    $("#k1").hide().show(2000, 
    
    );
    //aa
    $("#k1").css("font-size","150%");   
  });

 C. jQuery AJAX

  • AJAX là kỹ thuật giúp bạn tạo ra các request ngầm lên server để thực hiện các nghiệp vụ cần thiết mà không cần phải nạp lại trang web. Sau khi request ngầm lên server, bạn nhận được dữ liệu và hiện nó ở đâu trong trang tùy ý. Nhờ đó, dữ liệu hiện rất nhanh,
  • AJAX = Asynchronous JavaScript And XML.
  • Các website có lượng user tương tác lớn như Gmail, Google Maps, Youtube, Facebook đều khai thác tối đa ajax để xử lý thông tin mà không phải nạp lại toàn bộ trang.
  • jQuery cung cấp cho bạn một số hàm để tạo các request theo kiểu AJAX. Bạn dùng các hàm này để request và nhận các kiểu dữ liệu như text, HTML, XML, hoặc JSON từ server sử dụng phương thức Get và Post rồi xử lý ở client

C1. Hàm load() trong Jquery

  • Hàm load() giúp bạn tạo 1 request đến 1 trang web trên server theo phương thức get.
  • Dữ liệu nhận được từ trang web sẽ được hàm load() hiện ra trong tag được chọn.

Cú pháp hàm load

$(selector).load( URL , data , callback );
  • URL : là địa chỉ trang web mà bạn request.
  • data : là  tham số đưa lên cho trang url (nếu trang đó cần) , tham số này có thể bỏ qua.
  • callback : là hàm xử lý khi dữ liệu từ URL về tới , tham số này có thể bỏ qua.
$("#div1").load("demo_test.txt");

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load

C2. HTTP Request: GET vs. POST

Có hai cách request HTTP lên server web để yêu cầu 1 trang web, đó là  GETPOST.

  • GET – Dùng để requests dữ liệu từ url chỉ định.
  • POST – Dùng khi submit dữ liệu từ 1 form tới 1 trang web trên server

Khi bạn nhập url trên thanh địa chỉ của trình duyệt, hoặc nhắp 1 hyperlink là đang tạo 1 request dạng gẹt. Request dạng get có thể lấy dữ liệu từ cache của trình duyệt.

Request POST được tạo ra khi submit 1 form, request POST thì không bao giờ lấy dữ liệu trong cache, vì nó lo gửi dữ liệu từ form lên server

C3. Hàm $.get() trong Jquery

Hàm  $.get() trong jquery để tạo 1 request dạng get đến 1 trang web trên server. Cú pháp: 

$.get( URL , callback );
  • URL : địa chỉ trang web request đến
  • callback : hàm xử lý khi trang web đổ dữ liệu về . Thông số của hàm callback bạn khai báo để nhận dữ liệu từ trang web
$("button").click(function(){
  $.get("demo_test.asp", function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_get

C4. Hàm $.post() trong Jquery

Hàm $.post() trong jquery dùng để tạo 1 requests dạng post đến 1 trang web trên server (gửi data lên server). Hàm này giống như bạn submit dữ liệu từ form lên server.

$.post( URL , data , callback );
  • URL : địa chỉ trang web được gửi data đến
  • data: dữ liệu được gửi lên sever , theo dạng key=value. Ví dụ: lang=vi&color=yellow
  • callback : hàm xử lý khi request xong
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name: "Donald Duck",
    city: "Duckburg"
  },
  function(data, status){
    alert("Data: " + data + "\nStatus: " +status);
  });
});

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_post

D. JqueryUI

jQuery UI là 1 thư viện viết trên nền Jquery nhằm cung cấp các tương tác, các chức năng bổ sung, hiệu ứng, giao diện widgets, themes cho bạn dùng. Địa chỉ : https://jqueryui.com/

JqueryUI tương đương bootstrap ở chỗ: hỗ trợ làm giao diện web với code css, hàm js viết sẵn.

D1. Widgets in jQuery

Trong JqueryUI, Widget là nơi giúp bạn tạo ra các thành phần giao diện trong trang như datepicker, accordion, autocomplete, menu, slider…

Để sử dụng các widget trong jqueryUI, bạn nhúng thư viện jqueryui vào trang và dùng các code html+class css theo mẫu

D2. Button

jqueryui-button

D3. Datepicker

jqueryui-datepicker

D4. Tabs

jqueryui-tab

D5. Autocomplete

https://jqueryui.com/autocomplete/

jqueryui-autocomplete

E. Datatables plugin in jQuery

DataTables là một jquery plugin tuyệt vời. Nó giúp quản lý dữ liệu dạng table trong trang web thật dễ dàng. DataTables có nhiều đặc điểm nổi bật sau:

  • Phân trang, search tức thì, sắp xếp nhiều cột dữ liệu
  • Hỗ trợ nhiều data source: DOM, Javascript, Ajax và các xử lý trên máy chủ
  • Tương thích với: jQuery UI, Bootstrap
  • Có rất nhiều các tính năng được mở rộng:

E1. Website plugin datatables:

https://datatables.net/

jquery-plugin

E2. Nhúng plugin DataTables

a. Nhúng jquery:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

b. Nhúng datatable css:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

c. Nhúng datatable js:

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

d. Code khởi tạo datatable

<script>
$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );
  • #example: cách chọn table, có thể chỉnh cho phù hợp
  • “order”: [[ 3, “desc” ]] : Cấu hình cho datatable, có thể bổ sung, thêm bớt rất nhiều thông số

E3. Sử dụng Datatables

B1. Vào https://datatables.net/examples/

B2: Nhắp các mẫu ví dụ như trong hình dưới để xem các code mẫu demo:

datatables-example

B3: Lấy code html, css, js vào trang để dùng:

– Nhắp tab HTML để lấy code paste vào trang

datatables-example-2

– Nhắp tab CSS sẽ thấy địa chỉ file css, sử dụng link đang hiện để nhúng css vào trang (nếu chưa nhúng)

datatables-example-3

– Nhắp tab Javascript sẽ thấy các liên kết javascript, sử dụng link hiện ra  để nhúng javascript vào trang (nếu chưa nhúng)

datatables-example-4

– Gõ tag <script> </script> rồi copy code khởi tạo datatable (xem hình trên) rồi Paste vào trong tag script mới gõ

E4. Các cấu hình thường dùng

Zero configuration

https://datatables.net/examples/basic_init/zero_configuration.html
$(document).ready(function() {
    $('#example').DataTable();
} );

Feature enable / disable

https://datatables.net/examples/basic_init/filter_only.html
$(document).ready(function() {
    $('#example').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false
    } );
} );

Default ordering (sorting)

https://datatables.net/examples/basic_init/table_sorting.html
$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

Page length options

https://datatables.net/examples/advanced_init/length_menu.html
$(document).ready(function() {
    $('#example').DataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );
} );

Language options

https://datatables.net/examples/basic_init/language.html
$(document).ready(function() {
    $('#example').DataTable( {
        "language": {
            "lengthMenu": "Display _MENU_ records per page",
            "zeroRecords": "Nothing found - sorry",
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        }
    } );
} );

Setting defaults

https://datatables.net/examples/advanced_init/defaults.html
$.extend( true, $.fn.dataTable.defaults, {
    "searching": false,
    "ordering": false
} );
$(document).ready(function() {
    $('#example').DataTable();
} );

Ajax sourced data

https://datatables.net/examples/data_sources/ajax.html
$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": '../ajax/data/arrays.txt'
    } );
} );

F. Quiz

https://www.w3schools.com/quiztest/quiztest.asp?qtest=jQuery