==== Cú pháp cơ bản của Jquery ====

$(selector).action();

Mỗi file HTML sẽ chỉ có duy nhất 1 dòng mở đầu

$(document).ready(function(){
...
})

==== Các action cơ bản của Jquery ====

Giấu selector

$(selector).hide();
-> Thêm "slow", "fast", number(đơn vị milisecond) để điều chỉnh độ
nhanh chậm
-> Ví dụ 1: $(selector).hide("slow"); -> ẩn đi chậm
-> Ví dụ 2: $(selector).hide(1500); -> ẩn đi trong 1500 milisecond (1,5
giây)
$(selector).slideUp(); Trượt selector lên để giấu
$(selector).fadeOut(); Trong suốt dần để giấu

Hiển thị selector

$(selector).show();
$(selector).slideDown(); Trượt selector xuống để hiện ra
$(selector).fadeIn(); Rõ dần lên để hiện ra

Chuyển đổi giữa 2 trạng thái giấu và hiện

$(selector).slideToggle(); Hiệu ứng trượt lên -> xuống

$(selector).fadeToggle(); Hiệu ứng rõ -> trong suốt

Khi user click chuột vào selector thì kích hoạt các action ...

$(selector).click(function(){
...
})

Có thể thay click bằng

dblclick - Click đúp
mouseenter - rê chuột vào
mouseleave - rê chuột ra
mouseup - nhả click
mousedown - nhấn chuột
hover - rê chuột vào

Thêm, bớt, hoán đổi class

$(selector).addClass("classname");
-> Thêm classname vào selector

$(selector).removeClass("classname");
-> Bớt classname vào selector

$(selector).toggleClass("classname1 classname2");
-> Đổi classname1 thành classname2 và ngược lại
-> Việc đổi icon trong website thực chất là đổi class của icon đó
Thay đổi value của 1 attribute

$(selector).attr("attribute_name","value");
-> VD: Đổi đường link liên kết tới hình guitar 1
$("#bigimgbox img").attr("src","link liên kết tới guitar1.jpg");

==== Tham khảo thêm ====

In ra ngoài màn hình

console.log("Nội dung muốn hiển thị");

-> In ra ngoài màn hình 1 nội dung nào đó

Multi action - dùng on

$(selector).on("click",function(){
...
})
tương đương với
$(selector).click(function(){
...
})

-> Dùng on khi muốn thực hiện nhiều action cùng lúc, mỗi action cách nhau
bằng 1 khoảng trống (space)

Ví dụ 1:
$(selector).on("click mouseenter",function(){
...
})

Ví dụ 2:
$ (selector).on({
"click": function(){console.log("clicked!");},
"hover": function(){console.log("hover!");}
})

Ngược lại on là off => hủy bỏ trạng thái của on

$(selector).off("click",function(){
...
})
-> Khi click sẽ ko tiến hành hành động nào đó

Nếu hành động chỉ diễn ra 1 lần duy nhất => thay on bằng one

$(selector).one("click",function(){
...
})
-> Khi click sẽ diễn ra hành động nhưng chỉ diễn ra 1 lần duy nhất

Ngừng animation bằng stop

$(selector).stop()

==== jQuerry Animate ====

$(selector).animate(properties ,duration, easing, complete)

Ví dụ:
+ html
<button id="run">Run</button>
<div id="block">Hello!</div>
+ css
#block{
background: #bca;
width: 100px;
}
+ jQuerry
$("#run").click(function(){
$("#block").animate({
opacity: .5,
marginLeft: "+=50",
height: "400px"
}, 3000, "ease-in", function(){
$(this).after("<div>Animate Complete!</div");
});
})

Có thể làm nhiều animation bằng cách thêm nhiều .animate

Ví dụ:
$("#run").click(function(){
$("#block")
.animate({width: "90%"}, 1000)
.animate({fontSize: "40px"}, 1000)
.animate({borderLeftWidth: "30px"}, 1000)
})

==== Getting and setting content and attributes ====