1.jQuery là gì
jQuery là 1 thư viện javascript giúp cho việc lập trình javascript của bạn nhanh hơn thú vị hơn.
2 .Hello world
Bước 1: Download jQuery ở trên trang chủ jquery.com
Bước 2: Tạo 1 file html với nội dung như sau:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="result"></div>
<script>
$(document).ready(function(){
$('#result').html('Hello world!');
});
</script>
</body>
</html>
Giải thích code
Đầu tiên bạn thêm đoạn
script có chứa nội dung của jQuery vào đầu trang để có thể sử dụng các hàm trong jQuery$(document).ready(function(){
$('#result').text('Hello world!');
});
Đoạn code này sẽ tạo ra chữ
Hello world! là nội dung bên trong thẻ div có id là result.$(document).ready. Đoạn này jQuery sẽ kiểm tra xem DOM đã sẵn sàng để javascript thực thi hay chưa.
Chú ý: Luôn luôn viết code jQuery của bạn trong document ready.
3. Event trong jQuery
Khi bạn xem một trang web bạn thường có rất nhiều thao tác với trang web đó như click vào một link nào đó, nhấn phím để chuyển sang bài tiếp theo, di chuột vào một tấm ảnh . Tất cả những hành động đó được gọi là event. Trong jQuery cung cấp rất nhiều event tương ứng với các hành động đó của bạn.
Trong khuôn khổ bài viết này tôi chỉ để cập đến sự kiện
click và cách để handle nó. Bạn hoàn toàn có thể áp dụng ví dụ của tôi với các sự kiện khác.
Code html
<button id="btn">Click me!</button>
Code js
$(document).ready(function(){
$('#btn').click(function(){
alert('Hello world');
});
});
Đoạn code trên sẽ hoạt động như sau: Khi bạn click vào nút button với id là btn thì 1 hộp thoại sẽ xuất hiện với thông báo là "Hello world";
function bên trong click chính là function để bạn handle sự kiện khi bạn click vào nút button hay nói 1 cách khác như sau : khi click vào button thì làm cái gì sau đó.
Bạn có thể viết luôn handle function như ví dụ trên cũng được hoặc có 1 cách khác bạn có thể tạo 1 function bên ngoài và truyền nó vào như sau:
//Hàm handle không có bất kỳ tham số nào
function myfunction(){
alert('Hello world');
}
$(document).ready(function(){
//Truyền tên hàm vào trong sự kiện click
$('#btn').click(myfunction);
});
=> 2 ví dụ đều cho kết quả tương đương
4. Một số hiệu ứng
fadeIn : Hiện thành phần được chọn từ mờ đến sáng dần$('p').fadeIn(200)// Thẻ p sẽ hiện ra từ từ sau 200ms
=> Đọc thêm : fadeIn
fadeOut: Làm trong suốt thành phần được chọn 1 cách từ từ$('p').fadeOut(200)// Thẻ p sẽ từ từ biến mất sau 200ms
=> Đọc thêm : fadeOut
hide: Ẩn thành phần được chọn ngay lập tức$('p').hide() //Thẻ p ẩn đi ngay lập tức
=> Đọc thêm : hide
show: Hiển thành phần được chọn ngay lập tức$('p').show() //Thẻ p hiện ra ngay lập tức
=> Đọc thêm : show
animate: Tạo hiệu ứng chuyển động cho thành phần được chọn $('p').animate({
left: '-=50'//Thẻ p dịch chuyển sang trái 50px
},200, function(){
//Code callback ở đây
});
=> Đọc thêm : animate
slideUp: Hiệu ứng xổ xuống ( hay dùng làm dropdown menu )//html
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
<button></button>
//jquery
$('button').click(function(){
$('ul').slideUp();
});
=> Đọc thêm : slideUp
slideDown: Tương tự slideUp nhưng là hiệu ứng cuộc lên//html
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
<button></button>
//jquery
$('button').click(function(){
$('ul').slideDown();
});
=> Đọc thêm : slideDown
slideToggle : Chuyển đổi giữa slideUp và slideDown//html
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
<button></button>
//jquery
$('button').click(function(){
$('ul').slideToggle();
});
=> Đọc thêm : slideToggle
