SELECTORS : Các cách chọn phần tử
Chọn phần tử theo id
$("#vn").css("width","250px").css("border","solid 1px #FF9933");
Chọn phần tử theo tag
$("body").css("margin","20px");
Chọn theo class
$(".mien").hide().slideDown(2000);
Chọn phần tử có thuộc tính chứa chữ…
$("[href*='tintuc']").css("font-size","28px").css("text-transform","uppercase");
$("[href*='dulich']").css("font-style","italic");
Chọn phần tử mà thuộc tính chứa chữ …
$("[href~='tuc']").css("padding-left","50px");
Chọn phần tử có thuộc tính bắt đầu bằng …
$("[href^='tin']").css("color","#00CCFF");
Chọn phần tử có thuộc tính kết thúc bằng …
$("[href$='/']").css("background-color","#660033");
Chọn phần tử có thuộc tính khác với 1 giá trị
$("a[href!='#']").css("text-decoration","underline");
Chọn phần tử mà text có chứa chữ …
$("span:contains('t')").css("background-color","#003366");
Chọn các phần tử có index lớn hơn …
$(".tinh:gt(2)").css("color","#CC0066");
Chọn các phần tử có index nhỏ hơn …
$(".tinh:lt(2)").css("color","#660099");
Chọn các phần tử có index bằng…
$(".tinh:eq(2)").css("color","#CCCC33");
Chọn phần tử sau chót
$(".mien:last ul").append("<li>Hậu giang</li>");
Chọn phần tử đầu tiên
$(".mien:first ul").prepend("<li>Tuyên quang</li>");
Chọn các phần tử chẵn
$("#vn ul:even li:even").append(".");
Chọn các phần tử lẻ
$("#vn ul:odd li:odd").append("...");
Chọn phần tử con thứ n
$("#vn ul li:nth-child(2)").css("text-decoration","line-through");
Chọn phần tử chỉ có 1 con
$("#vn li:only-child").css("border","solid 1px #FF3300"); //chọn chỉ 1 con
TRAVERSING
Hàm .children() : Lấy các con của phần tử
$("#menu").children().css("margin-bottom","5px");
$("#menu div").children(".loaitin").css("border","solid 1px #600");
Hàm .find() : Tìm phần tử con
$("#menu").find("[href]").css("text-transform","uppercase");
Hàm .first() Lấy phần tử đầu tiên trong tập hợp
Hàm .last() Lấy phần tử cuối của tập hợp
Hàm .eq(): Lấy ra phần tử ở 1 chỉ số nào đó trong tập hợp
$(".loaitin").eq(2).css("font-size","30px");
Thuộc tính .length : Số phần tử của tập hợp
alert($(".loaitin").length);
Hàm .filter(): Lấy ra các phần tử thoã điều kiện
$("div").filter(".loaitin").css("text-align","right");
$("a").filter(":even").css("text-align","center");
$("a").filter(":odd").css("text-align","right");
Hàm .has(): Lấp phần tử có chứa một phần tử
$("a").has("span").css("font-style","italic");
Hàm .is() : Kiểm tra phần tử hiện hành có phải là…
$('#menu').mouseover(function(event) {
if ($(event.target).is('a') ) {
$(event.target).addClass('tosang');
}
});
$('#menu').mouseout(function(event) {
if ($(event.target).is('a') ) {
$(event.target).removeClass('tosang');
}
});
Hàm next : Lấy phần tử kế
str = $("[idTL=2]").next().html();
alert(str);
Hàm .nextAll() Lấy tất cả phần tử kế (sau nó)
$("[idTL=2]").nextAll().css("font-weight","bold");
Hàm .nextUntil(): lấy các phần tử kế cho đến khi …
$("#tt").nextUntil("#sk").css("font-size","30px");
$("#tool").nextUntil("div").css("font-size","8px");
Hàm .not(): Bỏ qua phần tử thõa điều kiện
$("a").not("[id='tt']").css("color","#66FF99");
Hàm .parent(): Lấy phần tử cha
v = $("#tool").parent().parent().attr("idTL");
alert(v);
Hàm .parents(): Lấy các đối tượng cha (đếm tận cùng bên ngoài)
$("#tool").parents().each(function(){
t = $(this).attr('id') ;
alert(t);
});
Hàm .each() : Lặp thông qua từng phần tử của tập hợp
Hàm .parentsUntil(): Lấy đối tượng cha cho đến khi …
$("#tool").parentsUntil('body').each(function(){
t = $(this).attr('id') ;
alert(t);
});
$("#tool").parentsUntil('#bodycuatrang').each(function(){
t = $(this).attr('id') ;
alert(t);
});
Hàm .prev(): Lấy đối tượng ở trước (láng giềng)
$("[idLT=5]").prev().html("Giải trí");
Hàm .prevAll(): Lấy các đối tượng ở trước (láng giềng)
$("[idLT=5]").prevAll().css("padding-left","40px");
Hàm .prevUntil(): Lấy các đối tượng ở trước (láng giềng) cho đến khi…
$("[idLT=5]").prevUntil('#tt').css("padding-left","40px");
Hàm .siblings(): Lấy các đối tượng láng giềng (ở trước hoặc sau)
$("[idLT=5]").siblings().css("padding-left","40px");
Hàm .slice(): Lấy ra 1 tập hợp các phần tử theo chỉ số
$("[idTL=1] a").slice(1).css("text-align","right");
$("[idTL=1] a").slice(1,4).css("text-align","right");
MANIPULATION
Hàm .css() : Định dạng CSS
Hàm .attr() : set/get giá trị cho 1 thuộc tính html
tt = $("#test p:last").attr("thutu"); alert(tt);
Hàm .html() : set/get mã html trong đối tượng
h = $("#test").html(); alert(h);
$("#test").html("<p>Loài bướm biết tìm thuốc để chữa bệnh</p>");
Hàm .text() : set/get chữ trong đối tượng
t = $("#test").text(); alert(t);
Hàm .val(): lấy giá trị của 1 đối tượng trong form
v = $("#lang").val(); alert(v);
v = $("#TenTL").val(); alert(v);
Hàm .height():Độ cao của đối tượng
cao = $("#test").height();
alert(cao);
Hàm .width(): Độ rộng của đối tượng
rong= $("#test p span:first").width();
alert(rong);
Hàm .addClass(): Thêm class cho phần tử
$("#test").addClass('abc');
Hàm .removeClass() : Gỡ bỏ class
$("#test").removeClass("tosang");
Hàm . after(): Thêm code html sau phần tử
$("#test p:last").after("<p>Hành trình kỳ lạ của cua đỏ</p>");
Hàm .before(): Thêm code html trước phần tử
$("#test p:last").before("<p>Hành trình kỳ lạ của cua đỏ</p>");
Hàm .append() : thêm html vào cuối đối tượng (bên trong)
$("#test p:last").append(" chúng ta");
Hàm .prepend() : thêm html vào đầu đối tượng
$("#test p:last").prepend("Hình ảnh ");
Hàm .appendTo(): Thêm mã html vào cuối đối tượng (bên trong)
$("<p>Loài ếch nhỏ bằng hạt đậu</p>").appendTo("#test");
Hàm .detach(): Xóa phần tử
Hàm .remove(): Xóa phần tử
Hàm .empty(): Xóa phần tử
$("#test p:first").detach();
$("#test p:first").remove();
$("#test p:first").empty();
Hàm .hasClass()
if( $("#test").hasClass("tosang")==true) alert("OK") ;
else alert("not OK");
Hàm .offset(): Vị trí của phần tử trong trang web
L = $("#test").offset().left;
T = $("#test").offset().top;
alert(L +" " + T);
Hàm .removeAttr(): Gõ bỏ 1 thuộc tính
Hàm .scrollLeft()
Hàm .scrollTop()
T = $("#footer").offset().top;
$(window).scrollTop(T);
$("#demo").scrollTop(100);
AJAX
Hàm $.ajax(): Tạo request ajax, có thể chỉ định nhiều tham số (cache, data type, method…)
Hàm .load(): Tạo request ajax dạng get
Hàm $.get(): Tạo request ajax dạng get
Hàm $.post(): Tạo request ajax dạng post
Hàm .serialize(): Lấy các giá trị trong form tạo thành chuỗi theo kiểu key1=value1&key2=value2…
