-------
Phần 30. Thay
đổi nội dung và sự kiện trong jQuery
Đây là clip số 15: prepend và append
prepend: gắn thêm nội dung vào đầu “phần nội dung” của một element
nào đó. Có hai phương thức có thể sử dụng là prepend() và prependTo().
Ví dụ,
[HTML]
<div id="result">
Nguyễn Văn Tèo
</div>
[JavaScript]
$(document).ready(function() {
$('#result').prepend('<p>Em
tên là: </p>');
});
[Kết quả - dạng HTML]
<div id="result">
<p>Em tên là: </p>
Nguyễn Văn Tèo
</div>
append: gắn thêm nội dung vào phía sau cùng “phần nội dung”
của một element nào đó. Có hai phương thức có thể sử dụng là append() và
appendTo().
Ví dụ,
[HTML]
<div id="result">
Nguyễn Văn Tèo
</div>
[JavaScript]
$(document).ready(function() {
$('#result').prepend('<p>
là em </p>');
});
[Kết quả - dạng HTML]
<div id="result">
Nguyễn Văn Tèo
<p>là em</p>
</div>
Dùng append để di chuyển một element, ví dụ dưới đây sẽ
chuyển thẻ p từ bên ngoài vào bên trong thẻ div:
[HTML]
<div id="result">
Nguyễn Văn Tèo
</div>
<p id="age">300</p>
[JavaScript]
$(document).ready(function() {
$('#result').append($('#age'));
});
Đây là clip 16: thêm phần tử vào trước hoặc sau phần tử khác
Dùng phương thức before(), insertBefore() để thêm phần tử
vào trước một phần tử khác.
Ví dụ,
[HTML]
<div>Nguyễn Văn Tèo</div>
<div>Cu
Tí</div>
[JavaScript]
$(document).ready(function() {
//
$('div').before('<p>Em là: </p>');
$('<p>Em
thì là: </p>').insertBefore($('div'));
});
Dùng phương thức after(), insertAfter() để thêm phần tử vào
sau một phần tử khác.
Ví dụ,
[HTML]
<div>Nguyễn Văn Tèo</div>
<div>Cu
Tí</div>
[JavaScript]
$(document).ready(function() {
//
$('div').after('<p>chính là em.</p>');
$('<p>chính
là em đây!</p>').insertAfter($('div'));
});
Đây là clip 17: thao tác với CSS class
- hasClass: kiểm tra một phần tử có chứa class hay không.
- addClass: thêm class cho phần tử.
- removeClass: gỡ bỏ class của một phần tử.
- toggleClass: chuyển đổi qua lại giữa hai trạng thái “có –
không có” class cho một phần tử.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<script
src="jquery.js"></script>
<style>
.color
{
color:
red;
}
</style>
<script>
$(document).ready(function()
{
$('#btnAddClass').click(function(){
$('h1').addClass('color');
});
$('#btnRemoveClass').click(function(){
$('h1').removeClass('color');
});
$('#btnToggleClass').click(function(){
$('h1').toggleClass('color');
});
$('#btnHasClass').click(function(){
alert($('h1').hasClass('color'));
});
});
</script>
</head>
<body>
<h1>Manipulating
with class</h1>
<button
id="btnAddClass">Add color</button>
<button
id="btnRemoveClass">Remove color</button>
<button
id="btnToggleClass">Toggle color</button>
<br />
<button
id="btnHasClass">Has color</button>
</body>
</html>
Đây là clip số 18: phương thức map()
Phương thức map() thường được sử dụng để tạo một mảng hay
một chuỗi dựa trên các phần tử DOM.
Đoạn mã sau dùng vòng lặp each() để tạo mảng chứa text của
các phần tử li:
[HTML]
<ul>
<li>AB</li>
<li>CDE</li>
<li>FG</li>
<li>HK</li>
<li>IJ</li>
</ul>
[JavaScript]
$(document).ready(function()
{
var result =
[];
$('li').each(function(){
result.push($(this).text());
});
console.log(result);
});
Với ví dụ trên, nếu thay thế vòng lặp each() bằng phương
thức map() để tạo mảng chứa text của các phần tử li, thì làm như sau:
[JavaScript]
$(document).ready(function()
{
var result =
[];
result =
$('li').map(function(){
return
($(this).text());
}).get();
console.log(result);
});
Có thể chèn thêm câu lệnh điều kiện trong map():
[JavaScript]
$(document).ready(function() {
var
result = $('li').map(function(index, element) {
if($(element).text()
== "AB") {
return
($(element).text());
}
}).get();
console.log(result);
});
Đây là clip số 19: sự kiện change trong jQuery
- Sự kiện change xảy ra khi một giá trị của element bị thay
đổi
- Các element thường sử dụng sự kiện này gồm: input,
textarea, select
- radio và checkbox phát sinh sự kiện change ngay khi người
dùng bấm nút chọn, trong khi các element khác sẽ phát sinh sự kiện change khi
không còn được focus (lost focus)
Ví dụ,
[HTML]
<label>Name: </label>
<input
class="test" type="text" /><br />
<label>Comments</label>
<textarea
class="test" cols="30"
rows="10"></textarea> <br />
<select
class="test">
<option>select</option>
<option
value="A">A</option>
<option
value="B">B</option>
</select><br
/>
<label>
<input
class="test" type="radio" value="radio" />
radio
</label><br
/>
<label>
<input
class="test" type="checkbox" value="checkbox"
/> checkbox
</label>
<div
id="result"></div>
[JavaScript]
$(document).ready(function() {
var
result = '';
$('.test').change(function(){
result
+= $(this).val();
$('#result').html(result);
});
});
Đây là clip số 20: sự kiện liên quan đến chuột trong jQuery
Ví dụ về sự kiện mouseover (rê chuột vào) và mouseout (rê
chuột ra),
[HTML]
<table>
<tbody>
<tr>
<td><img
src="download.png" id="imgTen" /></td>
<td><div
id="divTen" style="display: none">Hãy nhập
tên</div></td>
</tr>
<tr>
<td><img
src="download.png" id="imgTuoi" /></td>
<td><div
id="divTuoi" style="display: none">Hãy nhập
tuổi</div></td>
</tr>
<tr>
<td><img
src="download.png" id="imgDiaChi" /></td>
<td><div
id="divDiaChi" style="display: none">Hãy nhập địa
chỉ</div></td>
</tr>
</tbody>
</table>
[JavaScript]
<script>
$(document).ready(function()
{
$('img[src="download.png"]').mouseover(function()
{
$('#'
+ getDivId(this)).fadeIn(500);
}).mouseout(function()
{
$('#'
+ getDivId(this)).fadeOut(100);
});
});
function
getDivId (element) {
return
$(element).attr('id').replace('img','div');
}
</script>
-----------
Cập nhật [4/10/2017][5/10/2016]
-----------