APVN

Các hàm thường dùng trong jquery

03/12/2019

A. Các hàm HTML

a. Các hàm liên quan đến content: text(), html(), val()

Bạn có thể lấy ra nội dung các tag, gán vào nội dung các tag với 3 hàm sau:

text() – Gán hoặc trả về chữ bên trong của tag được chọn (không có tag html)
html() – Gán hoặc trả về code html và text bên trong tag được chọn
val() – Gán hoặc trả về value của các phần tử trong form

Ví dụ : get Content – Lấy nội dung:

$("#btn1").click(function(){
  alert( "Text: " + $("#test").text() );
});
$("#btn2").click(function(){
  alert( "HTML: " + $("#test").html() );
});
$("#btn1").click(function(){
  alert( "Value: " + $("#test").val() );
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_get
w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_val_get

Ví dụ: Set Content (Gán nội dung)

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set

b. Hàm lấy/gán attributes – attr()

Bạn có thể dùng hàm attr() để lấy ra giá trị hoặc ghi vào giá trị cho các thuộc tính của tag được chọn.

Ví dụ: Lấy ra giá trị thuộc tính:

$("button").click(function(){
  alert( $("#w3s").attr("href") );
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_attr_get

Ví dụ: Ghi vào giá trị của thuộc tính:

$("button").click(function(){
  $("#w3s").attr("href", "w3schools.com/jquery/");
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_attr_set

Hàm attr() cũng cho bạn ghi nhiều giá trị cho các thuộc tính:

$("button").click(function(){
  $("#w3s").attr({
    "href" : "w3schools.com/jquery/",
    "title" : "W3Schools jQuery Tutorial"
  });
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_attr_set2

Exercise Content & Atribute

c. Các hàm add elements – Thêm phần tử

jQuery có 4 hàm giúp thêm tag vào trang

Hàm append()

Hàm append() giúp thêm nội dung vào cuối tag được chọn

$("p").append("Some appended text.");

w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append

Hàm prepend()

Hàm prepend() giúp thêm nội dung vào chỗ bắt đầu của tag được chọn.

$("p").prepend("Some prepended text.");

w3schools.com/jquery/tryit.asp?filename=tryjquery_html_prepend

Hàm after(), before()

Hàm after() giúp chèn thêm nội dung ở sau tag được chọn.
Hàm before() giúp chèn nội dung vào trước tag được chọn

$("img").after("Some text after");
$("img").before("Some text before");

w3schools.com/jquery/tryit.asp?filename=tryjquery_html_after

Add Element Exercise

w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_dom_add1
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_dom_add2

d. Các hàm remove elements – Xóa phần tử

Để xóa phần tử hay nội dung trong trang, bạn dùng hai hàm:

Hàm remove()

Hàm removes sẽ xóa phần tử được chọn và cả các tag con của nó. Có thể chỉ định tham số chọn phần tử để xóa trong hàm remove

$("#div1").remove();
$("p").remove(".test");
$("p").remove(".test, .demo");

w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove2
w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove3

Hàm empty()

Hàm empty() sẽ xóa các tag con của phần tử được chọn

$("#div1").empty();

w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_empty

Remove exercise

w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_dom_remove1
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_dom_remove2
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_dom_remove3

B. Manipulating CSS – Các hàm điều chỉnh CSS

jQuery có các hàm sau để điều chỉnh css

addClass() – Adds one or more classes to the selected elements
removeClass() – Removes one or more classes from the selected elements
toggleClass() – Toggles between adding/removing classes from the selected elements
css() – Sets or returns the style attribute

a. Hàm addClass()

Hàm addClass dùng để thêm 1 hoặc nhiều class CSS cho phần tử được chọn

$("button").click(function(){
   $("h1, h2, p").addClass("blue");
   $("div").addClass("important");
 });
$("button").click(function(){
   $("#div1").addClass("important blue");
 });

w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_addclass
w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_addclass2

b. Hàm removeClass()

Hàm này dùng để gỡ một class CSS khỏi tag được chọn.

$("button").click(function(){
  $("h1, h2, p").removeClass("blue");
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_removeclass

c. Hàm toggleClass()

Hàm toogleClass để luân chuyển giữa addi/remove các classes css cho phần tử được chọn

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_toggleclass

Exercise:

w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_css_classes1
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_css_classes2
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_css_classes3
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_css_classes4

d. Hàm css()

Hàm css trả về giá trị của 1 thuộc tính css hoặc gán css cho tag được chọn.

Trả về giá trị 1 thuộc tính css của tag

css("propertyname");

Ví dụ:

$("p").css("background-color");

w3schools.com/jquery/tryit.asp?filename=tryjquery_css_getcolor

Gán giá trị 1 thuộc tính CSS của tag

css("propertyname","value");

Ví dụ:

$("p").css("background-color", "yellow");

w3schools.com/jquery/tryit.asp?filename=tryjquery_css_setcolor

Gán nhiều giá trị cho các thuộc tính CSS

css({"propertyname":"value","propertyname":"value",...});

Ví dụ:

$("p").css({"background-color": "yellow", "font-size": "200%"});

w3schools.com/jquery/tryit.asp?filename=tryjquery_css_set_multiple

Css function exercise:

w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_css1
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_css2
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_css3
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_css4

g. Các hàm khác

Method	Description
addClass()	Adds one or more class names to selected elements
after()	Inserts content after selected elements
append()	Inserts content at the end of selected elements
appendTo()	Inserts HTML elements at the end of selected elements
attr()	Sets or returns attributes/values of selected elements
before()	Inserts content before selected elements
clone()	Makes a copy of selected elements
css()	Sets or returns one or more style properties for selected elements
detach()	Removes selected elements (keeps data and events)
empty()	Removes all child nodes and content from selected elements
hasClass()	Checks if any of the selected elements have a specified class name
height()	Sets or returns the height of selected elements
html()	Sets or returns the content of selected elements
innerHeight()	Returns the height of an element (includes padding, but not border)
innerWidth()	Returns the width of an element (includes padding, but not border)
insertAfter()	Inserts HTML elements after selected elements
insertBefore()	Inserts HTML elements before selected elements
offset()	Sets or returns the offset coordinates for selected elements (relative to the document)
offsetParent()	Returns the first positioned parent element
outerHeight()	Returns the height of an element (includes padding and border)
outerWidth()	Returns the width of an element (includes padding and border)
position()	Returns the position (relative to the parent element) of an element
prepend()	Inserts content at the beginning of selected elements
prependTo()	Inserts HTML elements at the beginning of selected elements
prop()	Sets or returns properties/values of selected elements
remove()	Removes the selected elements (including data and events)
removeAttr()	Removes one or more attributes from selected elements
removeClass()	Removes one or more classes from selected elements
removeProp()	Removes a property set by the prop() method
replaceAll()	Replaces selected elements with new HTML elements
replaceWith()	Replaces selected elements with new content
scrollLeft()	Sets or returns the horizontal scrollbar position of selected elements
scrollTop()	Sets or returns the vertical scrollbar position of selected elements
text()	Sets or returns the text content of selected elements
toggleClass()	Toggles between adding/removing one or more classes from selected elements
unwrap()	Removes the parent element of the selected elements
val()	Sets or returns the value attribute of the selected elements (for form elements)
width()	Sets or returns the width of selected elements
wrap()	Wraps HTML element(s) around each selected element
wrapAll()	Wraps HTML element(s) around all selected elements
wrapInner()	Wraps HTML element(s) around the content of each selected element

Tham khảo thêm: http://www.w3schools.com/jquery/jquery_ref_html.asp

C. Các hàm Traversing

jQuery cung cấp cho bạn các hàm để di chuyển lên-xuống-qua lại giữa các tag trong trang. Bắt đầu tứ tag được chọn, bạn có thể ra ngoài (ancestors) các tag cha, tag ông nội, tag ông cố…. Hoặc từ tag được chọn, đi qua các tag láng giềng(siblings) , vào tag con(descendants) …

Từ tag được chọn, di chuyển lên xuống qua lại như thế gọi là traversing –di chuyển trong DOM (moving through DOM tree).

Jquery còn cung cấp các hàm để lặp qua các tag, thêm tag, chọn tag con….

a. Các hàm ancestors

jQuery có 3 hàm giúp bạn di chuyển lên các tag cha trong trang

Hàm parent()

Trả về tag cha của tag được chọn.
w3schools.com/jquery/tryit.asp?filename=tryjquery_parent

Hàm parents()

Trả về tất cả tag cha của tag được chọn
w3schools.com/jquery/tryit.asp?filename=tryjquery_parents

Hàm parentsUntil()

Trả về các tag cha của tag được chọn, cho đến 1 tag chỉ định
w3schools.com/jquery/tryit.asp?filename=tryjquery_parentsuntil

b. Các hàm descendants

jQuery có 2 hàm giúp bạn di chuyển vào trong các tag con của tag được chọn (Descendants)

Hàm children()

$(document).ready(function(){
  $("div").children();
});

Hàm children() trả về tất cả tag CON TRỰC TIẾP của tag được chọn. (traverses single level down in DOM).
w3schools.com/jquery/tryit.asp?filename=tryjquery_children

Có thể bổ sung cách chọn phần tử con trong hàm children:

 $(document).ready(function(){
  $("div").children("p.first");
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_children2

Hàm find()

$(document).ready(function(){
  $("div").find("span");
});

Hàm find() trả về các tag con cháu chắt chút chít … của tag được chọn. Trong hàm find có thể ghi tham số, còn muốn chọn hết thì ghi dấu *

w3schools.com/jquery/tryit.asp?filename=tryjquery_find

c. Các hàm siblings

Siblings là các phần tử có chung 1 cha. Có nhiều hàm trong jQuery giúo bạn đi tới các siblings trong DOM

Hàm siblings()

$(document).ready(function(){
  $("h2").siblings();
});

Hàm siblings() trả về tất cả sibling của phần tử được chọn. Có thể chỉ định tham số trong hàm siblings để chọn phần tử phù hợp. Ví dụ: siblings(“p”)
w3schools.com/jquery/tryit.asp?filename=tryjquery_siblings

Hàm next()

Hàm next() trả về sibling kế (sau) của phần tử được chọn.

$(document).ready(function(){
  $("h2").next();
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_next

nextAll()

Hàm siblings() trả về tất cả next sibling của phần tử được chọn.

$(document).ready(function(){
  $("h2").nextAll();
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_nextall

nextUntil()

Hàm siblings() trả về tất cả sibling kế của phần tử được chọn, cho đến trước phần tử chỉ định.

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_nextuntil

prev(), prevAll(), prevUntil()

Giống 3 hàm next() , nextAll(), nextUntil() nhưng hướng ngược lại

d. Các hàm filtering

Có nhiều hàm filter giúp bạn chọn lọc các phần tử đặc biệt. Như các hàm first(), last() , eq() giúp lọc ra phần tử trong 1 nhóm các phần tử đã chọn. Còn hàm filter() , hàm not() giúp chọn các phần tử phù hợp/không phù hợp.

Hàm first()

Hàm first() trả về phần tử đầu tiên của các phần tử chỉ định

$(document).ready(function(){
  $("div").first();
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_first

Hàm last()

Hàm last() trả về phần tử cuối của các phần tử chỉ định

$(document).ready(function(){
  $("div").last();
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_last

Hàm eq()

Hàm eq() trả về phần tử theo chỉ số trong các phần tử chỉ định. (Chỉ số tính từ 0)

$(document).ready(function(){
  $("p").eq(1);
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_eq

Hàm filter()

Hàm filter() để chọn phần tử theo bộ lọc chỉ ra

$(document).ready(function(){
  $("p").filter(".intro");
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_filter

Hàm not()

Hàm not() trả về các phần tử không phù hợp với bộ lọc chỉ ra

$(document).ready(function(){
  $("p").not(".intro");
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_not

e. Exercise traversing

D. jQuery Dimensions – Các hàm kích thước

jQuery có nhiều hàm giúp bạn gán/lấy kích thước các phần tử

a. Hàm width() , height()

Hàm width() giúp gán hoặc trả về độ rộng của phần tử (trừ padding, border và margin).

Hàm height() giúp gán hoặc trả về độ cao của phần tử (trừ padding, border và margin).

$("button").click(function(){
  var txt = "";
  txt += "Width: " + $("#div1").width() + "</br>";
  txt += "Height: " + $("#div1").height();
  $("#div1").html(txt);
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dim_width_height

c. Hàm innerWidth(), innerHeight()

Hàm innerWidth() trả về độ rộng của phần tử được chọn (gồm cả padding).

Hàm innerHeight() trả về độ cao của phần tử được chọn (gồm cả padding).

$("button").click(function(){
  var txt = "";
  txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
  txt += "Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dim_innerwidth_height

e. Hàm outerWidth(), outerHeight()

Hàm outerWidth() trả về độ rộng của phần tử (gồm cả padding và border).

Hàm outerHeight() trả về độ cao của phần tử (gồm cả padding và border).

$("button").click(function(){
  var txt = "";
  txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
  txt += "Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dim_outerwidth_height

Hàm outerWidth(true) trả về width của phần tử (gồm cả padding, border và margin).

The outerHeight(true) trả về height của phần tử (gồm cả padding, border, và margin).

$("button").click(function(){
  var txt = "";
  txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dim_outerwidth_height2

f. Độ rộng cao của document/windows

$("button").click(function(){
  var txt = "";
  txt += "Document width/height: " + $(document).width();
  txt += "x" + $(document).height() + "\n";
  txt += "Window width/height: " + $(window).width();
  txt += "x" + $(window).height();
  alert(txt);
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dim_width_height2

g. Gán độ rộng/cao

$("button").click(function(){
  $("#div1").width(500).height(500);
});

w3schools.com/jquery/tryit.asp?filename=tryjquery_dim_width_height_set

Demensions Exercise :

w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_dimensions1
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_dimensions2
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_dimensions3
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_dimensions4
w3schools.com/jquery/exercise_jq.asp?filename=exercise_jq_dimensions5

E. Tham khảo các hàm

Method	Description
add()	Adds elements to the set of matched elements
children()	Returns all direct children of the selected element
closest()	Returns the first ancestor of the selected element
contents()	Returns all direct children of the selected element (including text and comment nodes)
each()	Executes a function for each matched element
end()	Ends the most recent filtering operation in the current chain, and return the set of matched elements to its previous state
eq()	Returns an element with a specific index number of the selected elements
filter()	Reduce the set of matched elements to those that match the selector or pass the function’s test
find()	Returns descendant elements of the selected element
first()	Returns the first element of the selected elements
has()	Returns all elements that have one or more elements inside of them
is()	Checks the set of matched elements against a selector/element/jQuery object, and return true if at least one of these elements matches the given arguments
last()	Returns the last element of the selected elements
next()	Returns the next sibling element of the selected element
nextAll()	Returns all next sibling elements of the selected element
nextUntil()	Returns all next sibling elements between two given arguments
not()	Returns elements that do not match a certain criteria
offsetParent()	Returns the first positioned parent element
parent()	Returns the direct parent element of the selected element
parents()	Returns all ancestor elements of the selected element
parentsUntil()	Returns all ancestor elements between two given arguments
prev()	Returns the previous sibling element of the selected element
prevAll()	Returns all previous sibling elements of the selected element
prevUntil()	Returns all previous sibling elements between two given arguments
siblings()	Returns all sibling elements of the selected element
slice()	Reduces the set of matched elements to a subset specified by a range of indices

w3schools.com/jquery/jquery_ref_traversing.asp

A. Các hàm HTML

a. Các hàm liên quan đến content: text(), html(), val()

b. Hàm lấy/gán attributes – attr()

c. Các hàm add elements – Thêm phần tử

Hàm append()

Hàm prepend()

Hàm after(), before()

d. Các hàm remove elements – Xóa phần tử

Hàm remove()

Hàm empty()

B. Manipulating CSS – Các hàm điều chỉnh CSS

a. Hàm addClass()

b. Hàm removeClass()

c. Hàm toggleClass()

d. Hàm css()

g. Các hàm khác

C. Các hàm Traversing

a. Các hàm ancestors

Hàm parent()

Hàm parents()

Hàm parentsUntil()

b. Các hàm descendants

Hàm children()

Hàm find()

c. Các hàm siblings

Hàm siblings()

Hàm next()

nextAll()

nextUntil()

prev(), prevAll(), prevUntil()

d. Các hàm filtering

Hàm first()

Hàm last()

Hàm eq()

Hàm filter()

Hàm not()

e. Exercise traversing

D. jQuery Dimensions – Các hàm kích thước

a. Hàm width() , height()

c. Hàm innerWidth(), innerHeight()

e. Hàm outerWidth(), outerHeight()

f. Độ rộng cao của document/windows

g. Gán độ rộng/cao

E. Tham khảo các hàm

BÀI VIẾT LIÊN QUANXEM THÊM

Tạo trang layout responsive với bootstrap và jquery

Tables trong Bootstrap

Functions, Widgets, Plugins trong Jquery

BÀI VIẾT LIÊN QUAN XEM THÊM