Thay đổi định dạng (styling) các phần tử

Để thay đổi định dạng của các phần tử chúng ta có thể thực hiện theo hai cách. Cách đầu tiên là chúng ta có thể thêm hay xoá các lớp (bằng các phương thức addClass hay removeClass); cách thứ hai là thay đổi các định dạng trực tiếp.

Thêm và xoá các lớp

Thêm class

Chúng ta có thể thay đổi định dạng các phần tử bằng cách thêm hay xoá thuộc tính class. Để thêm thuộc tính class, chúng ta dùng phương thức addClass với cú pháp:

Phương thức Chức năng
addClass(classname,function(index,currentclass)) Thêm một hay nhiều thuộc tính class đến các phần tử được chọn. classname là tên một hay nhiều thuộc tính class được thêm, function là hàm trả về một hay nhiều thuộc tính class với index là vị trí phần tử, currentclass là tên class hiện tại của phần tử được chọn.

Ví dụ 1: thêm một class

Cho đoạn mã HTML sau:


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Add a class name to the first p element</button>

Đoạn mã CSS (lớp intro):


.intro {

font-size: 150%;

color: red;

}

Đoạn mã jQuery:


$("button").click(function(){

$("p:first").addClass("intro");

});

Thực thi với trình duyệt:

Khi nhấn button thì kết quả:

Ví dụ 2: thêm hai class

Cho đoạn mã HTML sau:


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Add a class name to the first p element</button>

Đoạn mã CSS (lớp intro):


.intro {

font-size: 30px;

color: blue;

}

.note {

background-color: yellow;

}

Đoạn mã jQuery:


$("button").click(function(){

$("p:first").addClass("intro note");

});

Thực thi với trình duyệt:

Ví dụ 3: thêm class dùng function

Cho đoạn mã HTML sau:


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Add a class name to the first p element</button>

Đoạn mã CSS (lớp intro):


.par_0 {

color: blue;

}

.par_1 {

color: red;

}

Đoạn mã jQuery:


$("button").click(function(){

$("p").addClass(function(n){

return "par_" + n;

});

});

Thực thi với trình duyệt:

Xoá class

Chúng ta có thể thay đổi định dạng các phần tử bằng cách xoá thuộc tính class. Để xoá thuộc tính class, chúng ta dùng phương thức removeClass với cú pháp:

Phương thức Chức năng
removeClass(classname,function(index,currentclass)) Xoá một hay nhiều thuộc tính class đến các phần tử được chọn. classname là tên một hay nhiều thuộc tính class bị xoá, function là hàm trả về một hay nhiều thuộc tính class với index là vị trí phần tử, currentclass là tên class hiện tại của phần tử được chọn.

 Ví dụ 1: xoá một class

Cho đoạn mã HTML sau:


<h1>This is a heading</h1>

<p class="intro">This is a paragraph.</p>

<p class="intro">This is another paragraph.</p>

Đoạn mã CSS (lớp intro):


.intro {

font-size: 120%;

color: red;

}

Đoạn mã jQuery:


$("button").click(function(){

$("p").removeClass("intro");

});

Thực thi với trình duyệt:

Nhấn button, kết quả:

Ví dụ 2: xoá ba class

Cho đoạn mã HTML sau:


<h1 class="head">This is a heading</h1>

<p class="intro">This is a paragraph.</p>

<p class="main">This is another paragraph.</p>

<button>Remove the "head", "intro" and "main" class from the selected elements</button>

Đoạn mã CSS (lớp intro):


.head {

font-size: 2em;

color: green;

}

.intro {

font-size: 120%;

color: red;

}

.main {

font-size: 20px;

color: blue;

}

Đoạn mã jQuery:


$("button").click(function(){

$("p, h1").removeClass("head intro main");

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ 3: xoá class với function

Cho đoạn mã HTML sau:


<h1>This is a heading</h1>

<ul>

<li class="listitem">Peter</li>

<li class="listitem">Lois</li>

<li class="listitem">Chris</li>

<li class="listitem">Stewie</li>

</ul>

<button>Remove class "listitem" from the li elements with index 0 and 1</button>

Đoạn mã CSS (lớp listitem):


.listitem {

color:red;

}

Đoạn mã <strong>jQuery</strong>:

$("button").click(function(){

$("li").removeClass(function(n) {

if (n==0||n==1) {return "listitem"}

else {return ""}

});

});

Thực thi với trình duyệt:

Nhấn button:

Kiểm tra một phần tử có tồn tại thuộc tính class không

Để kiểm tra một phần tử có tồn tại thuộc tính class không chúng ta dùng phương thức hasClass theo cú pháp sau:

Phương thức Chức năng
hasClass(classname) Xác định  classname là tên thuộc tính class có tồn tại hay không, nếu tồn tại thì phương thức trả về true, ngược lại trả về false.

 Ví dụ : xác định lớp intro có tồn tại hay không

Cho đoạn mã HTML sau:


<h1>This is a heading</h1>

<p class="intro">This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Does any p element have an "intro" class?</button>

Đoạn mã CSS (lớp listitem):


.intro {

font-size: 120%;

color: red;

}

Đoạn mã jQuery:


$("button").click(function(){

alert($("p").hasClass("intro"));

});

Thực thi với trình duyệt:

Khi nhấn button:

* Chú ý: chúng ta có thể dùng phương thức toggleClass để thêm hay xoá một hay nhiều thuộc tính class của phần tử được chọn. Tham khảo thêm về toggleClass tại http://api.jquery.com/toggleClass/

Nhận hay thiết lập thuộc tính css

Chúng ta có thể thiết lập các thuộc tính định dạng css cho một phần tử bằng thuộc tính style (kiểu inline) và chúng ta cũng có thể làm điều này trong jQuery với phương thức css(). Phương thức css() dùng để nhận hay thiết lập các thuộc tính css cho một phần tử bất kỳ.

Nhận thuộc tính

Để lấy giá trị của một thuộc tính css của một phần tử chúng ta dùng phương thức css() theo cú pháp:

Phương thức Chức năng
css(propertyname) Lấy giá trị của thuộc tính propertyname của phần tử đầu tiên trong tập các phần tử được chọn.

Ví dụ:

Cho đoạn mã HTML sau:


<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>

<p style="background-color:#00ff00">This is a paragraph.</p>

<p style="background-color:#0000ff">This is a paragraph.</p>

<button>Return background-color of p</button>

Đoạn mã jQuery:


$("button").click(function(){

// lấy giá trị của thuộc tính background-color của phần tử p đầu

// tiên

alert("Background color = " + $("p").css("background-color"));

});

Thực thi với trình duyệt:

Nhấn button, kết quả:

Thiết lập thuộc tính

Có thể thiết lập một hay nhiều thuộc tính css cho một phần tử bất kỳ bằng phương thức css () theo cú pháp sau:

Phương thức Chức năng
css(“propertyname”,”value”) Thiết lập thuộc tính propertyname với giá trị value cho tất cả các phần tử được chọn trong tập.
css({

“propertyname1″:”value1”,

“propertyname2″:”value2”,…})

Thiết lập các thuộc tính propertyname1, propertyname2,… với các giá trị tương ứng là value1, value2,… cho tất cả các phần tử được chọn trong tập.

Ví dụ 1: thiết lập thuộc tính background-color với giá trị yellow cho tất cả phần tử p

Cho đoạn mã HTML sau:


<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>

<p style="background-color:#00ff00">This is a paragraph.</p>

<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set background-color of p</button>

Đoạn mã jQuery:


$("button").click(function(){

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

});

Thực thi với trình duyệt:

Nhấn button, kết quả:

Ví dụ 2: thiết lập thuộc tính background-color với giá trị yellow, thuộc tính font-size với giá trị 200% cho tất cả phần tử p

Cho đoạn mã HTML sau:


<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>

<p style="background-color:#00ff00">This is a paragraph.</p>

<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set multiple styles for p</button>

Đoạn mã jQuery:


$("button").click(function(){

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

});

Thực thi với trình duyệt:

Nhấn button, kết quả:

jQuery – dimensions (các chiều)

Chúng ta có thể dễ dàng làm việc với các chiều (dài, rộng) của phần tử hay của cửa sổ trình duyệt với các phương thức jQuery. Một vài phương thức quan trọng làm việc với các chiều:

Phương thức Chức năng
width() Thiết lập và trả về chiều ngang hay dài (width) của một phần tử (không bao gồm padding, margin, border).
height() Thiết lập và trả về chiều dọc hay rộng (height) của một phần tử (không bao gồm padding, margin, border).
innerWidth() Trả về chiều ngang hay dài (width) của một phần tử (bao gồm padding).
innerHeight() Trả về chiều dọc hay rộng (height) của một phần tử (bao gồm padding).
outerWidth() Trả về chiều ngang hay dài (width) của một phần tử (bao gồm padding và border).
outHeight() Trả về chiều dọc hay rộng (height) của một phần tử (bao gồm padding và border).
outerWidth(true) Trả về chiều ngang hay dài (width) của một phần tử (bao gồm padding, border, margin).
outHeight(true) Trả về chiều dọc hay rộng (height) của một phần tử (bao gồm padding, border, margin).

Việc thiết lập và trả về các giá trị của các phương thức có thể hình dung một cách trực quan như sau:

Ví dụ về width() và height():

Cho đoạn mã HTML sau:

<div id="div1"> <br></div>
<button>Display dimensions of div</button>

<p>width() - returns the width of an element.</p>

<p>height() - returns the height of an element.</p>

Đoạn mã CSS:


#div1 {

height: 100px;

width: 300px;

padding: 10px;

margin: 3px;

border: 1px solid blue;

background-color: lightblue;

}

Đoạn mã jQuery:


$("button").click(function(){

var txt = "";

txt += "Width of div: " + $("#div1").width() + "</br>";

txt += "Height of div: " + $("#div1").height();

$("#div1").html(txt);

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ về innerWidth() và innerHeight():

Cho đoạn mã HTML sau:

</div>
<br>

<button>Display dimensions of div</button>

<p>innerWidth() - returns the width of an element (includes padding).</p>

<p>innerHeight() - returns the height of an element (includes padding).</p>

Đoạn mã CSS:


#div1 {

height: 100px;

width: 300px;

padding: 10px;

margin: 3px;

border: 1px solid blue;

background-color: lightblue;

}

Đoạn mã jQuery:


$("button").click(function(){

var txt = "";

txt += "Width of div: " + $("#div1").width() + "</br>";

txt += "Height of div: " + $("#div1").height() + "</br>";

txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";

txt += "Inner height of div: " + $("#div1").innerHeight();

$("#div1").html(txt);

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ về outerWidth() và outerHeight():

Cho đoạn mã HTML sau:

</div>
<br>

<button>Display dimensions of div</button>

<p>outerWidth() - returns the width of an element (includes padding and border).</p>

<p>outerHeight() - returns the height of an element (includes padding and border).</p>

Đoạn mã CSS:


#div1 {

height: 100px;

width: 300px;

padding: 10px;

margin: 3px;

border: 1px solid blue;

background-color: lightblue;

}

Đoạn mã jQuery:


$("button").click(function(){

var txt = "";

txt += "Width of div: " + $("#div1").width() + "</br>";

txt += "Height of div: " + $("#div1").height() + "</br>";

txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";

txt += "Outer height of div: " + $("#div1").outerHeight();

$("#div1").html(txt);

});

Thực thi với trình duyệt:

Khi nhấn button

Ví dụ về outerWidth(true) và outerHeight(true):

Cho đoạn mã HTML sau:

</div>
<br>

<button>Display dimensions of div</button>

<p>outerWidth(true) - returns the width of an element (includes padding, border, and margin).</p>

<p>outerHeight(true) - returns the height of an element (includes padding, border, and margin).</p>

Đoạn mã CSS:


#div1 {

height: 100px;

width: 300px;

padding: 10px;

margin: 3px;

border: 1px solid blue;

background-color: lightblue;

}

Đoạn mã jQuery:


$("button").click(function(){

var txt = "";

txt += "Width of div: " + $("#div1").width() + "</br>";

txt += "Height of div: " + $("#div1").height() + "</br>";

txt += "Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";

txt += "Outer height of div (margin included): " + $("#div1").outerHeight(true);

$("#div1").html(txt);

});

Thực thi với trình duyệt:

Khi nhấn button:

Vị trí (position) phần tử và thanh cuộn (scroll bar)

jQuery cung cấp các phương thức dùng để xác định vị trí các phần tử hay vị trí thanh cuộn (scroll bar). Các phương thức cơ bản:

Phương thức Chức năng
offset() Nhận vị trí hiện tại của phần tử đầu tiên trong tập các phần tử được chọn, tương đối đến document.
offset

({top:value,left:value})

Thiết lập vị trí cho mọi phần tử trong tập các phần tử được chọn, tương đối đến document.
offset(function

(index,

currentoffset))

Thiết lập vị trí cho mọi phần tử trong tập các phần tử được chọn bằng cách dùng hàm, tương đối đến document. index là vị trí chỉ số của phần tử; currentoffset là vị trí hiện tại của phần tử được chọn.
position() Trả về vị trí hiện tại của phần tử đầu tiên, tương đối đến phần tử cha,  trong tập các phần tử được chọn.
scrollLeft() Trả về vị trí thanh cuộn ngang (horizontal scrollbar) cho các phần tử được chọn.
scrollLeft(value) Thiết lập vị trí giá trị value cho thanh cuộn ngang (horizontal scrollbar) của các phần tử được chọn.
scrollTop() Trả về vị trí thanh cuộn dọc (vertical scrollbar) của các phần tử được chọn.
scrollTop(value) Thiết lập vị trí giá trị value cho thanh cuộn dọc (vertical scrollbar) của các phần tử được chọn.

Ví dụ dùng offset() để nhận vị trí:

Cho đoạn mã HTML sau:


<p>This is a paragraph.</p>

<button>Return the offset coordinates of the p element</button>

Đoạn mã jQuery:


$("button").click(function(){

var x = $("p").offset();

alert("Top: " + x.top + " Left: " + x.left);

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ dùng offset() để thiết lập vị trí:

Cho đoạn mã HTML sau:


<p>This is a paragraph.</p>

<button>Set the offset coordinates of the p element</button>

Đoạn mã jQuery:


$("button").click(function(){

$("p").offset({top: 200, left: 200});

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ dùng offset() để thiết lập vị trí bằng hàm:

Cho đoạn mã HTML sau:


<p>This is a paragraph.</p>

<button>Set offset coordinates of the p element</button>

Đoạn mã jQuery:


$("button").click(function(){

$("p").offset(function(n, c){

newPos = new Object();

newPos.left = c.left + 100;

newPos.top = c.top + 100;

return newPos;

});

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ dùng position() để nhận vị trí của phần tử:

Cho đoạn mã HTML sau:


<p>This is a paragraph.</p>

<button>Return the top and left position of the p element</button>

Đoạn mã jQuery:


$("button").click(function(){

var x = $("p").position();

alert("Top position: " + x.top + " Left position: " + x.left);

});

Thực thi với trình duyệt:

Khi nhấn button

Ví dụ dùng scrollLeft() để nhận vị trí của thanh cuộn ngang:

Cho đoạn mã HTML sau:


&nbsp;

<div style="border:1px solid black;width:100px;height:130px;overflow:auto">

The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.

</div><br>

<button>Set horizontal scrollbar position to 100px</button>

Đoạn mã jQuery:


$("button").click(function(){

$("div").scrollLeft(100);

});

Thực thi với trình duyệt:

Nhấn button:

Ví dụ dùng scrollLeft() để thiết lập vị trí của thanh cuộn ngang:

Cho đoạn mã HTML sau:


<div style="border:1px solid black;width:100px;height:130px;overflow:auto">

The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.

</div><br>

<button>Set horizontal scrollbar position to 100px</button>

Đoạn mã jQuery:


$("button").click(function(){

$("div").scrollLeft(100);

});

Thực thi với trình duyệt:

Khi nhấn button

Ví dụ dùng scrollTop() để nhận vị trí của thanh cuộn dọc:

 

Cho đoạn mã HTML sau:


<div style="border:1px solid black;width:100px;height:150px;overflow:auto">

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div><br>

<button>Return the vertical position of the scrollbar</button>

<p>Move the scrollbar down and click the button again.</p>

Đoạn mã jQuery:


$("button").click(function(){

alert($("div").scrollTop() + " px");

});

Thực thi với trình duyệt:

Khi nhấn button

Ví dụ dùng scrollTop() để thiết lập vị trí của thanh cuộn dọc:

Cho đoạn mã HTML sau:


<div style="border:1px solid black;width:100px;height:150px;overflow:auto">

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

</div><br>

<button>Set vertical scrollbar position to 100px</button>

Đoạn mã jQuery:


$("button").click(function(){

$("div").scrollTop(100);

});

Thực thi với trình duyệt:

Khi nhấn button

* Có thể tham khảo thêm về offset (), position (), scrollLeft(), scrollTop() tại http://api.jquery.com/category/offset/

Làm việc với nội dung của phần tử

Làm việc với nội dung HTML

jQuery cung cấp phương thức html() để nhận và thiết lập nội dung HTML cho phần tử được chọn. Cú pháp:

Phương thức Chức năng
html() Nhận nội dung HTML từ phần tử được chọn.
html(content) Thiết lập nội dung HTML content cho phần tử được chọn.
html(function(

index,

currentcontent))

Thiết lập nội dung HTML content cho phần tử được chọn bằng hàm. index là vị trí chỉ mục của phần tử trong tập, currentcontent là nội dung hiện tại của phần tử được chọn.

Ví dụ dùng html() để nhận nội dung HTML:

Cho đoạn mã HTML sau:


<button>Return the content of the p element</button>

<p>This is a <b>paragraph</b>.</p>

Đoạn mã jQuery:


$("button").click(function(){

alert($("p").html());

});

Thực thi với trình duyệt:

Nhấn button

Ví dụ dùng html() để thay thế nội dung HTML của phần tử:

Cho đoạn mã HTML sau:


<button>Change content of all p elements</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:


$("button").click(function(){

$("p").html("Hello <b>world!</b>");

});

Thực thi với trình duyệt:

Nhấn button:

Ví dụ dùng html() để thay thế nội dung HTML của phần tử bằng hàm:

Cho đoạn mã HTML sau:


<button>Change the content of the p elements</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:


$("button").click(function(){

$("p").html(function(n){

return "This p element has index: " + n;

});

Thực thi với trình duyệt:

Khi nhấn button

Làm việc với nội dung văn bản (plain text)

jQuery cung cấp phương thức text() để nhận và thiết lập nội dung văn bản (plain text) cho phần tử được chọn. Cú pháp:

Phương thức Chức năng
text() Nhận nội dung văn bản từ phần tử được chọn.
text(content) Thiết lập nội dung văn bản content cho phần tử được chọn.
text(function(

index,

currentcontent))

Thiết lập nội dung văn bản content cho phần tử được chọn bằng hàm. index là vị trí chỉ mục của phần tử trong tập, currentcontent là nội dung hiện tại của phần tử được chọn.

 Ví dụ dùng text() để nhận nội dung HTML:

Cho đoạn mã HTML sau:


<button>Return the text content of all p elements</button>

<p>This is a paragraph.</p>

<p>This is <b>another</b> paragraph.</p>

Đoạn mã jQuery:


$("button").click(function(){

alert($("p").text());

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ dùng text() để thay thế nội dung văn bản:

Cho đoạn mã HTML sau:


<button>Set text content for all p elements</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:


$("button").click(function(){

$("p").text("Hello world!");

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ dùng text() để thay thế nội dung văn bản bằng hàm:

Cho đoạn mã HTML sau:


<button>Set text content of the p elements</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:


$("button").click(function(){

$("p").text(function(n){

return "This p element has index: " + n;

});

});

Thực thi với trình duyệt:

Khi nhấn button:

Thêm nội dung đến phần tử

Chúng ta có thể thêm nội dung vào các phần tử được chọn. Một số phương thức phổ biến trong jQuery:

Phương thức Chức năng
append(content,

function(index,

html))

Chèn nội dung content (html, text, jQuery objects, DOM) vào cuối các phần tử được chọn. function là hàm (tuỳ chọn) trả về nội dung chèn với index là vị trí chỉ số của phần tử trong tập, html là mã HTML hiện tại của phần tử được chọn.
prepend(content,

function(index,

html))

Chèn nội dung content (html, text, jQuery objects, DOM) vào đầu các phần tử được chọn. function là hàm (tuỳ chọn) trả về nội dung chèn với index là vị trí chỉ số của phần tử trong tập, html là mã HTML hiện tại của phần tử được chọn.
after(content,

function(index))

Chèn nội dung content (html, text, jQuery objects, DOM) vào sau các phần tử được chọn. function là hàm (tuỳ chọn) trả về nội dung chèn với index là vị trí chỉ số của phần tử trong tập.
before(content,

function(index))

Chèn nội dung content (html, text, jQuery objects, DOM) vào cuối các phần tử được chọn. function là hàm (tuỳ chọn) trả về nội dung chèn với index là vị trí chỉ số của phần tử trong tập.
$(content).appendTo(

selector)

Chèn nội dung content (html) vào cuối các phần tử selector được chọn.

Chú ý: Nếu content là phần tử tồn tại sẵn sẽ được di chuyển từ vị trí ban đầu đến vị trí cuối của selector.

$(content).prependTo(

selector)

Chèn nội dung content (html) vào đầu các phần tử selector được chọn.

Chú ý: Nếu content là phần tử tồn tại sẵn sẽ được di chuyển từ vị trí ban đầu đến vị trí cuối của selector.

$(content).

insertBefore(selector)

Chèn nội dung content (html) vào trước các phần tử selector được chọn.

Chú ý: Nếu content là phần tử tồn tại sẵn sẽ được di chuyển từ vị trí ban đầu đến vị trí cuối của selector.

$(content).insertAfter(

selector)

Chèn nội dung content (html) vào sau các phần tử selector được chọn.

Chú ý: Nếu content là phần tử tồn tại sẵn sẽ được di chuyển từ vị trí ban đầu đến vị trí cuối của selector.

Ví dụ về append(): chèn nội dung vào cuối các phần tử p

Đoạn mã HTML:


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<ol>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

</ol>

<button id="btn1">Append text</button>

<button id="btn2">Append list item</button>

Đoạn mã jQuery:


$("#btn1").click(function(){

$("p").append(" <b>Appended text</b>.");

});

$("#btn2").click(function(){

$("ol").append("<li>Appended item</li>");

});

Kết quả trên trình duyệt:

Khi nhấn nút Append text:

Ví dụ về append(): chèn nội dung vào cuối các phần tử p dùng hàm

Đoạn mã HTML:


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Insert content at the end of each p element</button>

Đoạn mã jQuery:


$("button").click(function(){

$("p").append(function(n){

return "<b>This p element has index " + n + ".</b>";

});

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về append(): chèn nội dung HTML, jQuery, DOM vào cuối phần tử p

Đoạn mã HTML:


<p>This is a paragraph.</p>

<button onclick="appendText()">Append text</button>

Đoạn mã jQuery:


function appendText() {

var txt1 = "<p>Text.</p>";              // Create text with HTML

var txt2 = $("<p></p>").text("Text.");  // Create text with jQuery

var txt3 = document.createElement("p");

txt3.innerHTML = "Text.";               // Create text with DOM

$("body").append(txt1, txt2, txt3);     // Append new elements

}

Kết quả trên trình duyệt:

Khi nhấn Append text:

Ví dụ về prepend(): chèn nội dung vào đầu các phần tử p

Đoạn mã HTML:


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<ol>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

</ol>

<button id="btn1">Prepend text</button>

<button id="btn2">Prepend list item</button>

Đoạn mã jQuery:


$("#btn1").click(function(){

$("p").prepend("<b>Prepended text</b>. ");

});

$("#btn2").click(function(){

$("ol").prepend("<li>Prepended item</li>");

});

Kết quả trên trình duyệt:

Khi nhấn Prepend text

Khi nhấn Prepend list item

Ví dụ về prepend(): chèn nội dung HTML, jQuery, DOM vào đầu phần tử p

Đoạn mã HTML:


<p>This is a paragraph.</p>

<button onclick="prependText()">Prepend text</button>

Đoạn mã jQuery:


function prependText() {

var txt1 = "<p>Text.</p>";              // Create text with HTML

var txt2 = $("<p></p>").text("Text.");  // Create text with jQuery

var txt3 = document.createElement("p");

txt3.innerHTML = "Text.";               // Create text with DOM

$("p").prepend(txt1, txt2, txt3);       // Prepend new elements

}

Kết quả trên trình duyệt:

Khi nhấn Prepend text

Ví dụ về prepend(): chèn nội dung vào đầu phần tử p bằng hàm

Đoạn mã HTML:


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Insert content at the beginning of each p element</button>

Đoạn mã jQuery:


$("button").click(function(){

$("p").prepend(function(n){

return "<b>This p element has index " + n + "</b>. ";

});

});

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về after(): chèn nội dung vào sau phần tử p

Đoạn mã HTML:


<button>Insert content after each p element</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:


$("button").click(function(){

$("p").after("<p>Hello world!</p>");

});

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về after(): chèn nội dung vào sau phần tử p dùng hàm

Đoạn mã HTML:


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<p>This is another paragraph.</p>

<button>Insert content after each p element</button>

Đoạn mã jQuery:


$("button").click(function(){

$("p").after(function(n){

return "
<div>The p element above has index " + n + ".</div>
";

});

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về after(): chèn nội dung HMTL, jQuery, DOM vào trước phần tử p

Đoạn mã HTML:


<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">

<p>Click the button to insert text after the image.</p>

<button onclick="afterText()">Insert after</button>

Đoạn mã jQuery:


function afterText() {

var txt1 = "<b>I </b>";   // Create element with HTML

var txt2 = $("<i></i>").text("love ");    // Create with jQuery

var txt3 = document.createElement("b");   // Create with DOM

txt3.innerHTML = "jQuery!";

$("img").after(txt1, txt2, txt3);      // Insert new elements after img

}

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về before(): chèn nội dung vào trước phần tử p

Đoạn mã HTML:


<button>Insert content before each p element</button>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

Đoạn mã jQuery:


$("button").click(function(){

$("p").before("<p>Hello world!</p>");

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về before(): chèn nội dung vào trước phần tử p bằng cách dùng hàm

Đoạn mã HTML:


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<p>This is another paragraph.</p>

<button>Insert content before each p element</button>

Đoạn mã jQuery:


$("button").click(function(){

$("p").before(function(n){

return "
<div>The p element below has index " + n + ".</div>
";

});

});

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về before(): chèn nội dung HTML, jQuery, DOM vào trước phần tử p

Đoạn mã HTML:


<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">

<p>Click the button to insert text before the image.</p>

<button onclick="beforeText()">Insert before</button>

Đoạn mã jQuery:


function beforeText() {

var txt1 = "<b>I </b>";                    // Create element with HTML

var txt2 = $("<i></i>").text("love ");     // Create with jQuery

var txt3 = document.createElement("b");    // Create with DOM

txt3.innerHTML = "jQuery!";

$("img").before(txt1, txt2, txt3);    // Insert new elements before img

}

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về prependTo(): chèn nội dung vào đầu mỗi phần tử p

Đoạn mã HTML:


<button>Insert span element at the beginning of each p element</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:


$("button").click(function(){

$("<span>Hello World! </span>").prependTo("p");

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về prependTo(): chèn nội dung vào đầu mỗi phần tử p

Đoạn mã HTML:


<button>Insert span element at the beginning of each p element</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:

$("button").click(function(){

$("<span>Hello World! </span>").prependTo("p");

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về prependTo(): chèn nội dung đã tồn tại vào đầu mỗi phần tử p

Đoạn mã HTML:


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>
<div>Hello world!</div>
<button>Move and insert the div element before each p element</button>

Đoạn mã jQuery:


$("button").click(function(){

$("div").prependTo("p");

});

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về appendTo(): chèn nội dung vào cuối mỗi phần tử p

Đoạn mã jQuery:


$("button").click(function(){

$("<span>Hello World!</span>").appendTo("p");

});

Đoạn mã HTML:


<button>Insert span element at the end of each p element</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về appendTo(): chèn nội dung tồn tại sẵn vào cuối mỗi phần tử p

Đoạn mã jQuery


$("button").click(function(){

$("h1").appendTo("p");

});

Đoạn mã HTML:


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Move and insert the h1 element at the end of each p element</button>

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về insertBefore(): chèn nội dung vào trước mỗi phần tử p

Đoạn mã jQuery


$("button").click(function(){

$("<span>Hello world!</span>").insertBefore("p");

});

Đoạn mã HTML:


<button>Insert span element before each p element</button>

<br><br>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về insertBefore(): chèn nội dung tồn tại sẵn vào trước mỗi phần tử p

Đoạn mã jQuery


$("button").click(function(){

$("div").insertBefore("p");

});

Đoạn mã HTML:


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>
<div>Hello world!</div>
<button>Move and insert the div element before each p element</button>

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về insertAfter(): chèn nội dung vào sau mỗi phần tử p

Đoạn mã jQuery


$("button").click(function(){

$("<span>Hello world!</span>").insertAfter("p");

});

Đoạn mã HTML:


<button>Insert span element after each p element</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về insertAfter(): chèn nội dung đã tồn tại vào sau mỗi phần tử p

Đoạn mã jQuery


$("button").click(function(){

$("h1").insertAfter("p");

});

Đoạn mã HTML:


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Move and insert the h1 element after each p element</button>

Kết quả trên trình duyệt:

Khi nhấn button

Wrap và unwrap

jQuery cung cấp phương thức wrap dùng để biến đổi một hay nhiều phần tử trở thành bộ chứa chứa một hay nhiều phần tử khác bên trong. Cú pháp phương thức wrap():

Phương thức Chức năng
wrap(

wrappingElement,function(

index))

Biến đổi phần tử wrappingElement thành bộ chứa chứa mỗi phần tử được chọn. wrappingElement có thể là phần tử HTML, đối tượng jQuery, hay phần tử DOM. Hàm tuỳ chọn function(index) trả về phần tử wrappingElement, index là vị trí của phần tử trong tập.

Ví dụ 1: biến phần tử div thành bộ chứa chứa phần tử p:

HTML


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Wrap a div element around each p element</button

CSS


div{background-color: yellow;}

jQuery


$("button").click(function(){

$("p").wrap("<div></div>");

});

Ví dụ 2: biến phần tử div thành bộ chứa chứa phần tử p bằng phương thức wrap có sử dụng hàm function:

HTML


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Wrap a div element around each p element</button>

CSS


div{background-color: yellow;}

jQuery


$("button").click(function(){

$("p").wrap(function(){

return "<div></div>";

});

});

Đặc điểm chung của hai ví dụ trên là khi nhấn button thì mỗi phần tử p sẽ được chứa trong phần tử div như sau:

<div>

<div><p>This is a paragraph.</p></div>

<div><p>This is another paragraph.</p></div>

Nếu chúng ta muốn cả hai phần tử p được chứa trong chỉ một phần tử div như đoạn mã:

<div>

<div>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</div>

thì có thể dùng phương thức wrapAll(). Cú pháp:

Phương thức Chức năng
wrapAll(

wrappingElement)

Biến đổi một hay nhiều phần tử wrappingElement thành bộ chứa chứa tất cả phần tử được chọn. wrappingElement có thể là phần tử HTML, đối tượng jQuery, hay phần tử DOM.

Ví dụ về wrapAll:

HTML


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Wrap a div element around each p element</button>

CSS


div{background-color: yellow;}

jQuery


$("button").click(function(){

$("p").wrapAll("<div></div>");

});

Thỉnh thoảng chúng ta cũng muốn biến đổi một (hay nhiều) phần tử thành bộ chứa chứa nội dung của một hay nhiều phần tử, ví dụ chúng ta dùng phần tử b để chứa nội dung của mỗi phần tử p như sau:


<p><b>This is a paragraph.</b></p>

<p><b>This is another paragraph.</b></p>

Trong tình huống này chúng ta có thể dùng phương thức wrapInner(), cú pháp:

Phương thức Chức năng
wrapInner(

wrappingElement,function(

index))

Biến đổi một hay nhiều phần tử wrappingElement thành bộ chứa chứa nội dung của phần tử được chọn. wrappingElement có thể là phần tử HTML, đối tượng jQuery, hay phần tử DOM. Hàm tuỳ chọn function(index) trả về phần tử wrappingElement, index là vị trí của phần tử trong tập.

Ví dụ: dùng phần tử b để chứa nội dung của mỗi phần tử p


$("p").wrapInner("<b></b>");

Có thể dùng wrapInner với function:


$("p").wrapInner(function(){

return "<b></b>"

});

Ngược với phương thức wrap(), chúng ta có thể dùng phương thức unwrap() để xoá phần tử cha của các phần tử được chọn. Cú pháp:

Phương thức Chức năng
unwrap() Xoá phần tử cha của phần tử được chọn.

Ví dụ: xoá phần tử cha của tất cả phần tử pdivarticle

HTML

<div>

This is a paragraph inside a div element.

</div>
<article>

<p>This is a paragraph inside an article element.</p>

</article>

<button>Remove the parent element of each p element</button>

CSS


div{background-color: yellow;}

article{background-color: pink;}

jQuery


$("button").click(function(){

$("p").unwrap();

});

Kết quả trên trình duyệt:

Khi nhấn button:

Xoá phần tử

Chúng ta có thể thêm nội dung đến các phần tử bằng các phương thức như append, prepend, after, before, v.v. Chúng ta cũng có thể xoá nội dung hay phần tử bằng các phương thức:

Phương thức Chức năng
remove(selector) Xoá các phần tử được chọn bao gồm cả text, các node con, dữ liệu và tất cả các sự kiện. Tham số selector là tuỳ chọn, dùng để xác định một hay nhiều phần tử bị xoá. Nếu là xoá nhiều phần tử thì các phần tử cách nhau bởi dấu phẩy trong danh sách tham số.
detach() Xoá các phần tử được chọn bao gồm cả text và các node con nhưng vẫn giữ lại dữ liệu và các sự kiện của phần tử.
empty() Xoá nội dung của phần tử được chọn

Ví dụ xoá tất cả phần tử p bằng phương thức remove:

HTML


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

jQuery


$("p").remove();

Ví dụ xoá tất cả phần tử p có thuộc tính class = “test”

HTML


<p>This is a paragraph.</p>

<p class="test">This is another paragraph.</p>

<p class="test">This is another paragraph.</p>

jQuery


$("p").remove(".test");

Ví dụ xoá tất cả phần tử p có thuộc tính class = “test” và class = “demo”

HTML


<p>This is a paragraph.</p>

<p class="test">This is p element with class="test".</p>

<p class="test">This is p element with class="test".</p>

<p class="demo">This is p element with class="demo".</p>

jQuery


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

Ví dụ xoá tất cả phần tử p bằng phương thức detach:

HTML


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

jQuery


$("p").detach();

detach mặc dù xoá các phần tử nhưng dữ liệu và sự kiện vẫn được giữ nguyên. Có thể tham khảo ví dụ tại https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_detach_remove hay http://api.jquery.com/detach/ .

Ví dụ xoá toàn bộ nội dung của phần tử div bằng phương thức empty:

HTML


<div style="height:100px;background-color:yellow">

This is some text

<p>This is a paragraph inside the div.</p>

</div>

<p>This is a paragraph outside the div.</p>

<button>Remove content of the div element</button>

jQuery


$("button").click(function(){

$("div").empty();

});

Kết quả trên trình duyệt:

Khi nhấn button:

Sao chép và thay thế phần tử

Chúng ta đã biết cách thêm nội dung, xoá phần tử và chúng ta cũng có thể sao chép và thay thế các phần tử với các phương thức:

Phương thức Chức năng
clone(true|false) Tạo một bản sao các phần tử được chọn. true xác định trình xử lí sự kiện (event handler) được sao chép, false (mặc định) xác định trình xử lý sự kiện không được sao chép.
replaceWith(content,

function(index))

Thay thế phần tử được chọn bằng nội dung content. content có thể là các phần tử HTML, đối tượng jQuery hay các phần tử DOM. Hàm tuỳ chọn function trả về nội dung để thay thế, index là chỉ số vị trí của phần tử trong tập.
replaceAll(selector) Thay thế phần tử được chọn bằng các phần tử HTML mới.

Ví dụ sao chép tất cả các phần tử p và thêm các bản copy này đến phần tử body:

HTML


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Clone all p elements, and append them to the body element</button>

jQuery


$("button").click(function(){

$("p").clone().appendTo("body");

});

Kết quả trên trình duyệt:

Khi nhấn button:

Tham khảo ví dụ về sao chép trình xử lý sự kiện tại https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_clone_eventhandler

Ví dụ thay thế phần tử p đầu tiên bằng nội dung Hello world!

HTML


<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Replace the first p element with new text</button>

jQuery


$("button").click(function(){

$("p:first").replaceWith("Hello world!");

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ thay thế tất cả phần tử p bằng nội dung mới với function:

HTML


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<p>This is another paragraph.</p>

<button>Replace each p element</button>

jQuery


$("button").click(function(){

$("p").replaceWith(function(n){

return "<h3>This element has index " + n + ".</h3>";

});

});

Kết quả trên trình duyệt

Khi nhấn button

Ví dụ thay thế các phần tử p bằng các phần tử h2:

HTML


<button>Replace all p elements with h2 elements</button><br>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<p>This is another paragraph.</p>

jQuery


$("button").click(function(){

$("<h2>Hello world!</h2>").replaceAll("p");

});

Kết quả trên trình duyệt

Khi nhấn button:

Thiết lập hay nhận các giá trị từ các phần tử form

Các phần tử form là các phần tử luôn xuất hiện cùng với form như text, checkbox, radio, v.v. với các thuộc tính cơ bản là namevalue.

Chúng ta có thể thiết lập hay lấy các giá trị từ các phần tử form bằng phương thức val(), cú pháp:

Phương thức Chức năng
val() Trả về giá trị thuộc tính value từ các phần tử form.
val(value) Thiết lập giá trị cho thuộc tính value của phần tử form
val(function(index,

currentvalue))

Thiết lập giá trị cho thuộc tính value của phần tử form dùng function.

Ví dụ thiết lập giá trị cho thuộc tính value của phần tử input kiểu text:

HTML


<p>Name: <input type="text" name="user"></p>

<button>Set the value of the input field</button>

jQuery


$("button").click(function(){

$("input:text").val("Ngoc Minh");

});

Kết quả trình duyệt

Khi nhấn button

Ví dụ nhận giá trị từ thuộc tính value của phần tử input kiểu text:

HTML


Firstname: <input type="text" name="fname" value="Ngoc Minh"><br>

Lastname: <input type="text" name="lname" value="Tran"><br><br>

<button>Trả về Firstname</button>

jQuery


$("button").click(function(){

alert($("input:text").val());

});

Kết quả trình duyệt

Khi nhấn button:

Ví dụ thiết lập giá trị cho thuộc tính value của phần tử input kiểu text dùng function:

HTML


<p>Name: <input type="text" name="user" value="Ngoc Minh"></p>

<button>Set the value of the input field</button>

jQuery


$("button").click(function(){

$("input:text").val(function(n, c){

return c + " Tran";

});

});

Kết quả trình duyệt

Khi nhấn button:

< Học jQuery