THAM KHẢO JQUERY

THAM KHẢO JQUERY

SELECTORS : Các cách chọn phần tử

1. Chọn phần tử theo id

$("#vn").css("width","250px").css("border","solid 1px  #FF9933");

2. Chọn phần tử theo tag

$("body").css("margin","20px");

3. Chọn theo class

$(".mien").hide().slideDown(2000);

4. 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");

5. Chọn phần tử mà thuộc tính chứa chữ …

$("[href~='tuc']").css("padding-left","50px");

6. Chọn phần tử có thuộc tính bắt đầu bằng …

$("[href^='tin']").css("color","#00CCFF");

7. Chọn phần tử có thuộc tính kết thúc bằng …

$("[href$='/']").css("background-color","#660033");

8. Chọn phần tử có thuộc tính khác với 1 giá trị 

$("a[href!='#']").css("text-decoration","underline");

9. Chọn phần tử mà text có chứa chữ …

$("span:contains('t')").css("background-color","#003366"); 

10. Chọn các phần tử có index lớn hơn …

$(".tinh:gt(2)").css("color","#CC0066");

11. Chọn các phần tử có index nhỏ hơn …

$(".tinh:lt(2)").css("color","#660099");

12. Chọn các phần tử có index bằng…

$(".tinh:eq(2)").css("color","#CCCC33");

13. Chọn phần tử sau chót

$(".mien:last ul").append("<li>Hậu giang</li>");

14. Chọn phần tử đầu tiên

$(".mien:first ul").prepend("<li>Tuyên quang</li>");

15. Chọn các phần tử chẵn

$("#vn ul:even li:even").append(".");

16. Chọn các phần tử lẻ

$("#vn ul:odd li:odd").append("...");

17. Chọn phần tử con thứ n

$("#vn ul li:nth-child(2)").css("text-decoration","line-through");

18. Chọn phần tử chỉ có 1 con

$("#vn li:only-child").css("border","solid 1px #FF3300"); //chọn chỉ 1 con

TRAVERSING

19. 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");

20. Hàm .find() : Tìm phần tử con 

$("#menu").find("[href]").css("text-transform","uppercase"); 

21. Hàm  .first() Lấy phần tử đầu tiên trong tập hợp

22. Hàm .last() Lấy phần tử cuối của tập hợp

23. 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");

24. Thuộc tính .length : Số phần tử của tập hợp

alert($(".loaitin").length);

25. 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");

26. Hàm .has(): Lấp phần tử có chứa một phần tử

$("a").has("span").css("font-style","italic");

27. 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');

  }

});

28. Hàm next : Lấy phần tử kế 

str = $("[idTL=2]").next().html();

alert(str);

29. Hàm  .nextAll()  Lấy tất cả phần tử kế (sau nó) 

$("[idTL=2]").nextAll().css("font-weight","bold");

30. 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");

31. Hàm .not(): Bỏ qua phần tử thõa điều kiện

$("a").not("[id='tt']").css("color","#66FF99");

32. Hàm .parent():  Lấy phần tử cha

v = $("#tool").parent().parent().attr("idTL");

alert(v);

33. 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);

});

34. Hàm   .each() : Lặp thông qua từng phần tử của tập hợp

35. 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);

});

36. Hàm .prev(): Lấy đối tượng ở trước (láng giềng)

$("[idLT=5]").prev().html("Giải trí");

37. Hàm .prevAll(): Lấy các đối tượng ở trước (láng giềng)

$("[idLT=5]").prevAll().css("padding-left","40px");

38. 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");

39. 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");

40. 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

41. Hàm .css() : Định dạng CSS

42. Hàm .attr() : set/get giá trị cho 1 thuộc tính html

tt = $("#test p:last").attr("thutu"); alert(tt);

43. 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>");

44. Hàm .text() : set/get chữ trong đối tượng

t = $("#test").text(); alert(t);

45. 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);

46. Hàm .height():Độ cao của  đối tượng

cao = $("#test").height();

alert(cao);

47. Hàm .width(): Độ rộng của đối tượng

rong=  $("#test p span:first").width();

alert(rong);

48. Hàm .addClass(): Thêm class cho phần tử

$("#test").addClass('abc');

49. Hàm .removeClass() : Gỡ bỏ class 

$("#test").removeClass("tosang");

50. 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>");

51. 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>");

52. Hàm .append() : thêm html vào cuối đối tượng (bên trong)

$("#test p:last").append(" chúng ta");

53. Hàm .prepend() : thêm html vào đầu đối tượng

$("#test p:last").prepend("Hình ảnh ");

54. 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");

55. Hàm .detach(): Xóa phần tử

56. Hàm .remove(): Xóa phần tử

57. Hàm .empty(): Xóa phần tử

$("#test p:first").detach();

$("#test p:first").remove();

$("#test p:first").empty();

58. Hàm .hasClass()

if( $("#test").hasClass("tosang")==true) alert("OK") ;

else alert("not OK");

59. Hàm .offset(): Vị trí của phần tử trong trang web

L = $("#test").offset().left;

T = $("#test").offset().top;

alert(L +" " + T);

60. Hàm .removeAttr(): Gõ bỏ 1 thuộc tính

61. Hàm .scrollLeft()

62. Hàm .scrollTop()

T = $("#footer").offset().top;

$(window).scrollTop(T);

$("#demo").scrollTop(100);

AJAX

63. Hàm $.ajax(): Tạo request ajax, có thể chỉ định nhiều tham số (cache, data type, method…)

64. Hàm  .load(): Tạo request ajax dạng get

65. Hàm  $.get(): Tạo request ajax dạng get

66. Hàm  $.post(): Tạo request ajax dạng post

67. Hàm .serialize(): Lấy các giá trị trong form tạo thành chuỗi theo kiểu key1=value1&key2=value2…