jQuery · youhoc

jQuery

In-depth Analysis of jQuery

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();

Hiệu ứng không đẹp lắm, nếu thích màu mè thì nên xài fade.

Hàm SlideUp / SlideDown

Phải đang ẩn thì mới slideDown được

Phải đang hiện thì mới slideUp được

$(".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

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()

$(".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)

tạo một child element bên trong DOM chỉ định

element mới sẽ nằm cuối cùng (append) hoặc đầu tiên (prepend) của DOM

nếu selector có nhiều DOM thì sẽ thêm tất cả DOM

// 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)

tạo một sibling element trước hoặc sau DOM chỉ định

nếu selector có nhiều DOM thì sẽ thêm tất cả DOM

// 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

attr()

prop()

val()

// 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

⁠

https://stackoverflow.com/questions/18701282/what-is-content-type-and-datatype-in-an-ajax-request⁠

⁠

https://api.jquery.com/jquery.ajax/⁠

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)

⁠

https://github.com/stil/curl-easy⁠

⁠

Tham khảo thêm

⁠

https://docs.guzzlephp.org/en/stable/overview.html⁠

⁠

https://stackoverflow.com/questions/962915/how-do-i-make-an-asynchronous-get-request-in-php⁠

⁠

https://stackoverflow.com/questions/124462/how-to-make-asynchronous-http-requests-in-php⁠

⁠

Ajax POST

Learn from Sendy API

(Form Subscribe via Ajax)

⁠

https://sendy.co/api⁠

⁠

apply to form submission such as: comments.

URLencoded or JSON?

⁠

https://stackoverflow.com/questions/11281117/x-www-form-urlencoded-vs-json-http-post/13457437#13457437⁠

⁠

form-data - simple, key pair

JSON - multi-level, assoc array

More about Ajax

Call back after success

Fire on scroll to visible

Click button (rather than submit)

jQuery DOM control