Jquery

1. Jquery Introduction :
Jquery, thư viện phổ biến nhất trên thế giới của JavaScript. Được sử dụng trên 66.59% trong top 1 triệu website có
nhiều lượng truy cập nhất thế giới. Gấp 2.5 lần tổng số lượng sử dụng của React, Vue, Angular - các framework rất
phổ biến trong việc xây dựng website hiện tại :
Thư viện này được xây dựng bởi John Resig vào năm 2006 nhằm giải quyết vấn đề khó tương thích giữa JS với các
trình duyệt khác nhau. Mục tiêu của Jquery là để giúp chúng ta viết ít code hơn mà có thể làm được nhiều việc hơn.
 Ví dụ :
Để tạo 2 button giúp hiển thị và giấu đi một đoạn văn trong JS :

js
1 document.addEventListener("DOMContentLoaded", function() {
2 let showButton = document.getElementById("show");
3 let hideButton = document.getElementById("hide");
4 let para = document.getElementById("para");
5
6 showButton.addEventListener("click", function() {
7 para.style.display = "block";
8
 8
});
9
10
hideButton.addEventListener("click", function() {
11
para.style.display = "none";
12
});
13
});

Đối với Jquery :

$(document).ready(function () {
$("#show").click(function () {
$("p").show();
});
$("#hide").click(function () {
$("p").hide();
});
})

2. Jquery Basic :

2.1. Syntax :
 Cú pháp cơ bản của Jquery :

$(selector).action()

Trong đó :
$ : Kí hiệu để sử dụng Jquery
(selector) : Chọn một phần tử
action() : Thực hiện hành động lên phần tử đó

Ví dụ :
Ẩn toàn bộ phần tử là thẻ <p> : $("p").hide()
Ẩn toàn bộ phần tử là lớp test : $()".p").hide()
Ẩn phần tử có id là test : $("#p").hide()

Cách chọn phần tử của JQuery tương tự với trọn phần tử trong CSS.

2.2. Document ready :

Document ready là một sự kiện để đảm bảo các hàm của jquery không được phép load trước khi trang hoàn tất load.
Cú pháp :

$(document).ready(function(){
// Cac ham jquery
 });

Cú pháp ngắn hơn :

$(function(){
$("p").hide();
});

Ví dụ :

$(document).ready(function() {
$("button").click(function(){
$("p").hide();
})
});

2.3. Selector :
Một số selector của khác của Jquery :

Syntax Description
$("*") Chọn toàn bộ phần tử
 Syntax Description
$(this) Chọn phần tử hiện tại
$("p.intro ") Chọn phần tử thẻ p trong lớp intro
$("p:first ") Chọn phần tử thẻ p đầu tiên
$("ul li:first ") Chọn phần tử li đầu tiên trong nằm trong phần tử ul đầu tiên
$("ul li:first-child") Chọn phần tử li đầu tiên của tất cả phần tử ul
$("[href]") Chọn toàn bộ phần tử có thuộc tính href
$("a[target='_blank']") Chọn toàn bộ phần tử có thuộc tính target trống
$("a[target!='_blank']") Ngược lại
$(":button") Chọn toàn bộ phần tử thẻ button và cả các phần tử thẻ input
$("tr:even") Chọn toàn bộ phần tử thẻ tr số chẵn
$("tr:odd") Chọn toàn bộ phần tử thẻ tr số lẻ

2.4. Action / Event :

Một số event thường gặp :

Mouse event Keyboard event Form event Doc/Window event

click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover
 hover
Mouse event Keyboard event Form event Doc/Window event
on

3. Một số thứ có thể làm với Jquery :

3.1. Tạo các hiệu ứng :

3.1.1. Show/Hide :

3.1.2. Fade In / Fade Out :

2 hàm này sẽ làm phần tử xuất hiện dần hoặc mờ dần :

$(document).ready(function() {
$("#fadein").click(function(){
$("p").fadeIn();
});
$("#fadeout").click(function(){
$("p").fadeOut();
});
});
 Tương tự ta có fadeToggle .

3.1.2.1. fadeTo() :
Hàm này sẽ quy định phần tử mờ dần hoặc hiện dần đến mức nhất định :

$(selector).fadeTo(speed,opacity,callback);

3.2. Thao tác với các DOM :

3.2.1. Get :

3.2.1.1. Get content :

Ta có 3 hàm chính để lấy ra các nội dung của các phần tử :
text() : Trả về văn bản nằm trong phần tử.
html() : Trả về văn bản của phân tử nhưng gồm cả các thẻ.
val() : Trả về nội dung của một form.

$(document).ready(function () {
$("#log").click(function () {
 alert($("p").text());
alert($("p").html());
alert($("#form").val());
});
});

3.2.1.2. Get Attribute :

Ta có thể dùng hàm attr() để lấy nội dung của thuộc tính ( bao gồm toàn bộ biểu thức thuộc tính ) của một phần tử
bất kì :

$(document).ready(function () {
$("#log").click(function () {
alert($("p").attr("style"));
});
});

3.2.2. Set :

3.2.2.1. Set content :

 Vẫn là 3 hàm trước đó, tuy nhiên khi ta truyền vào chúng các tham số, chúng lại trở thành cách hàm điều chỉnh lại nội
dung của phần tử :

$(document).ready(function () {
$("#log").click(function () {
$("h1").text("Set text");
$("p").html("Set HTML");
$("#form").val("Set value of the form");
});
});

3.2.2.2. Set attribute :

Tương tự ta cũng điều chỉnh được cái thuộc tính của phần tử :

$("#show").click(function () {
$("p").attr("style", "color: red");
});