Download : http://jquery.com/
Or : http://code.jquery.com/jquery-1.7.1.min.js (chèn vào thẻ script)
Chèn vào thẻ <head>:
<head>
<title>Hoc Jquery can ban</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
1. Jquery cơ bản
- Tạo hộp thoại thông báo. Các lệnh jquery phải đặt trong cặp thẻ
<script></script>
VD:
<script>
$(document).ready(function()
{
// thuc hien các lệnh trong hàm
alert("Load xong");
});
</script>
2. Thao tác với #id và .class
a. id (#id)
$(document).ready(function()
{
$('#lod').click(function()
{
alert("Ban da chon id #lod");
});
});
vd: <div id="lod">Chon #lod</div>
b. Class (.class)
$(document).ready(function()
{
$('.lod').click(function()
{
alert("Ban da chon class .lod");
});
});
vd: <div id="lod">Chon .lod</div>
c. Tương tự với tag
$(document).ready(function()
{
$('.lod').click(function()
{
alert("Ban da chon tag p");
});
});
vd: <p>Chon tag p</p>
3. Đối tượng - Append()
// Thêm dữ liệu bên trong append vào vị trí xác định trước.
- Bên trong Append có thể là function() hay văn bản (text)
VD:
$('p').click(function()
{
$('p').append("Ban vua chon the P");
});
Kết quả: Khi click vao thẻ p thì sẽ hiện ra: Ban vua chon the P.
4. Thao tác Jquery với Css
- Thiết kế menu:
<div id="menu">
<div class="theloai">Tin xa hoi</div>
<div class="loaitin">
<a href="#">The loai</a>
<a href="#">Du lich</a>
<a href="#">Xa hoi</a>
<a href="#">Suc khoe</a>
<a href="#">Am nhac</a>
</div>
</div>
- Tạo css:
#menu{width:180px; background:#cc6;}
#menu .theloai{background:#f63; color:#fff;display:block;}
#menu a{color:#900; display:block;text-decoration:none;}
#menu a:hover{color:#f30}
a- Định dạng css: thay đổi font chữ, màu chữ
$(document).ready(function()
{
$('.loaitin').css({"color":"blue","font-style":"italic","font-size":"200%"});
});
b- Thay đổi kích thước chữ
$(document).ready(function()
{
$('.loaitin').css({"font-size","200%"});
});
c- Khi click vào .theloai kích thước font chữ .loaitin tăng lên
$(document).ready(function()
{
$('.theloai').click(function()
{
var size=$('.loaitin').css("font-size");
size=parseInt(size);
size=size+2;
size=size+"px";
$('.loaitin').css("font-size",size);
});
});
d. Show() : hiện ra đối tượng, hide(): ẩn đối tượng, slideToggle(): Khi click lần thứ nhất hide, lần thứ hai show (Thường dùng làm menu)
VD:
$('.theloai').click(
function()
{
$('.loaitin').slideToggle(1000);
//$('.loaitin').show(1000);
//$('.loaitin').hide(1000);
});
e. - Khi click vào theloai tất cả
loaitin sẽ ẩn sau đó hiện ra
5. Thao tác Jquery với thẻ <input name=”tên”>
<table id="dstin" width="600" border="1">
<tr class="hang">
<td><input type="checkbox" id="chonhet"/></td>
<td>idLT</td>
<td>Ten loai tin</td>
<td>An Hien</td>
<td>Thu tu</td>
<td>The loai</td>
<td>Action</td>
</tr>
<tr class="hang">
<td><input type="checkbox" value="3" id="chon"/></td>
<td>3</td>
<td>Du lich</td>
<td>Dang Hien</td>
<td>2</td>
<td>Tin xa hoi</td>
<td><a href="#">Chinh</a> | <a href="#">Xoa</a></td>
</tr>
<tr class="hang">
<td><input type="checkbox" value="9" id="chon"/></td>
<td>9</td>
<td>The loai</td>
<td>Dang hien</td>
<td>3</td>
<td>Tin xa hoi</td>
<td><a href="#">Chinh</a> | <a href="#">Xoa</a></td>
</tr>
</table>
- Tạo css:
.hightlight{color:#900; background:#9c0}
.hang{cursor:pointer}
a. Thao tac Jquery với CSS, đưa con trỏ vào đổi màu nền, màu chữ
$('.hang').mouseover(function()
{
$(this).addClass('hightlight');
});
$('.hang').mouseout(function()
{
$(this).removeClass('hightlight');
});
Không có nhận xét nào:
Đăng nhận xét