Skip to content
Hiệu ứng không đẹp lắm, nếu thích màu mè thì nên xài fade.
Phải đang ẩn thì mới slideDown đượcPhải đang hiện thì mới slideUp được
Trong các trường hợp trên, hầu như các hàm đều diễn ra đồng thời.Nếu muốn đợi sau khi hàm trên hoàn thành mới chạy hàm dưới thì sử dụng delay() và tiếp nối các hàm.delay() KHÔNG WORK với show() và hide()
tạo một child element bên trong DOM chỉ địnhelement mới sẽ nằm cuối cùng (append) hoặc đầu tiên (prepend) của DOMnếu selector có nhiều DOM thì sẽ thêm tất cả DOM
tạo một sibling element trước hoặc sau DOM chỉ địnhnếu selector có nhiều DOM thì sẽ thêm tất cả DOM
attr()prop()val()
apply to form submission such as: comments.
form-data - simple, key pairJSON - multi-level, assoc array
Call back after successFire on scroll to visibleClick button (rather than submit)jQuery DOM control
youhoc
- Pages
Select elements / Chọn DOM
Basic Selection
Parent / Children Selection
Advanced Selection
Ẩn / hiện DOM
Hàm Fade
// ẩn đi trong 2s (fade to 0)
// không giữ spacing
$("#id-name").fadeOut(2000);
// hiện ra trong 2s
$("#id-name").fadeIn(2000);
// mờ đi 50% trong 2s
// vẫn giữ spacing ngay cả khi về 0%
$("#id-name").fadeTo(2000,0.5);
// bật hoặc tắt trong 2s tùy vào trạng thái
// quay trở lại trạng thái cũ (nếu trước đó có set opacity)
$("#id-name").fadeToggle(2000,0.5);
Hàm Show / Hide
$("#id-name").show();
$("#id-name").hide();
$("#id-name").toggle();
Hàm SlideUp / SlideDown
$(".red-box").hide();
$(".red-box").slideDown(1000);
$(".blue-box").slideUp(1000);
Hàm Animate
// rất nhiều thông số có thể cấu hình với animate()
$(".red-box").animate({
"margin-bottom": "+=100",
"opacity": "0",
"width": "50px",
"height": "100px",
"font-size": "20px",
},2000,"linear");
Delaying & Chaining Animation
$(".red-box").delay(5000).fadeOut().delay(1000).fadeIn();
Callback Function
Thực thi 1 function sau khi một fucntion khác hoàn thành
$(".red-box").fadeTo(3000,0, function() {
alert("Animation Finished");
});
===============
DOM Manipulation
Adding new elements (append / prepend)
// thêm text vào cuối hoặc đầu của p
$("p:last").append("Hehe");
$("p:first").prepend("Huhu");
Adding new elements (after / before)
// thêm 1 DOM vào trước hoặc sau DOM chỉ định
$("p:last").after("Đây là đoạn cuối");
$("p:first").before("Đây là tiêu đề");
GOOGLE KHÔNG INDEX ĐƯỢC CÁC NỘI DUNG NÀY
// di chuyển một DOM đến một vị trí khác
$("p:last").after(function(){
return $("#another_DOM");
});
// hoặc gán nội dung từ một function khác
$("p:last").after(function(){
return "Nội dung được tạo dynamic";
});
Replace the whole element (replaceWidth)
$("li").replaceWith("Nội dung cần thay thế");
$("li").replaceWith(function(){
return "";
});
$("Nội dung cần thay thế").replaceAll(".el1, .el2");
Remove the whole DOM
$("li").remove(); (không còn lưu trạng thái, ko listen được nữa)
$("li").detach(); (vẫn còn lưu trạng thái, event handler)
Có thể gán những DOM đã remove vào biến để lưu lại xài sau
var removedDOM = $("li").remove();
var detachedDOM = $("li").detach();
Remove DOM Content
Chỉ remove nội dung trên trong DOM, nhưng không remove tag
$("p").empty();
Manipulate attributes and properties
// lấy giá trị href từ aLink
var something = $("#aLink").attr("href");
console.log($("#aLink").attr("href"));
// Lưu ý: khác nhau giữa prop() và attr()
console.log($("input:checkbox").prop("checked"));
// true / false
console.log($("input:checkbox").attr("checked"));
// checked (không thay đổi giá trị)
// value thì chủ yếu là lấy từ input form
var textInput = $("input:text").val();
console.log($("input:text").val());
// gán giá trị cho attr
$("#aLink").attr("href","www.abc.com");
// gán value cho input form
$("input:text").val("Hehe");
$("input[name='name']").val("Huu Nghi");
=====================
Thực hiện một hàm sau một khoảng thời gian nhất định
setInterval()
i = (i+1) % array.length
Tạo 1 slideshow theo kiểu mơi
============================================
Async, Ajax & POST API
AJAX Send GET Request and ignore the result
Request the test.php page, but ignore the return results.
$.get( "test.php" );
Request the test.php page and send some additional data along (while still ignoring the return results).
$.get( "test.php", { name: "John", time: "2pm" } );
Pass arrays of data to the server (while still ignoring the return results).
$.get( "test.php", { "choices[]": ["Jon", "Susan"] } );
============================
Async, Ajax & POST API
Async
(to defer API loading, or send and forget)
Tham khảo thêm
Ajax POST
Learn from Sendy API
(Form Subscribe via Ajax)
URLencoded or JSON?
More about Ajax
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.