Tài liệu Jquery tiếng Việt dễ hiểu

Nguyễn Văn Hùng 299252
1.Giới thiệu về jquery
 jQuery là một thư viện Java Script mới với rất nhiều
functions và classes được dựng sẵn.
• jQuery nhanh chóng, ngắn gọn giúp việc duyệt các tài
liệu HTML, gỡ rỗi sự kiện, thực hiện các hoạt hình và bổ
sung tương tác Ajax vào Website trở lên đơn giản. jQuery
được thiết kế để thay đổi cách chúng ta viết JavaScript.
Đặc biệt Jquery hỗ trợ mạnh khả năng làm việc với API.
• Nếu chuyên về thiết kế web và biết một chút về
JavaScript thì khi dùng jQuery sẽ thấy dễ dàng và rất tiện
lợi.
2. Các yêu cầu để tìm hiểu jQuery
 1) Kiến thức cần có
• Các kiến thức cơ bản về HTML và CSS.
• Không cần biết nhiều về javaScript và các thư viện
JavaScript khác.

 2) Bắt đầu với JQuery
• Để có thể làm việc với jQuery chúng ta cần có thư viện
• jQuery có thể tải về từ trang

2. Các yêu cầu để tìm hiểu jQuery
- Để có thể sử dụng jQuery thì trang web phải liên hệ đến thư viện jQuery
như sau
<script type="text/javascript" src="jquery.js" mce_src="jquery.js"> </script>
- Các đoạn mã jQuery được đặt trong đoạn mã sau để đảm bảo rằng chúng
chỉ thực thi sau khi tài liệu đã được tải xong
$(document).ready(function(){
// Your code here
});

3. Các chủ điểm chính trong jQuery

 - jQuery Selectors
 - Attributes
 - Sự kiện
 - Hiệu ứng
 - Ajax

3.1 JQuery selectors

a) Các thành phần trong JQuery Selectors
 Ba thành phần quan trọng nhất của jQuery Selector là tên thẻ
HTML, ID và Class. Người lập trình có thể chỉ sử dụng nó hoặc
kết hợp với những Selector khác để chọn

 Ví dụ 1: Chọn thẻ HTML

Tô màu đỏ cho tất cả các thẻ <a>

$("a").css("background", "red");




3.1 JQuery selectors
 Ví dụ 2: Chọn ID

 Tô màu đỏ cho thẻ a với ID = foo

$("a#foo").css("background", "red");

Ví dụ 3: Chọn Class

Tô màu đỏ cho các thẻ a với các class = bar

$("a.bar").css("background", "red");

3.1.1.Các Selector cơ bản
 Một số Selector cơ bản của jQuery

1.#id:Trả về một đối tượng có thuộc tính id được truyền vào
ví dụ: $("#myId").addClass("myClass");
2. element :Trả về tất cả các phần tử có tên được chỉ ra
ví dụ: $("div").addClass("myClass");
3. Class : Trả về tất cả các phần tử thuộc lớp có tên được chỉ ra
ví dụ: $(".wrapper").addClass("myClass");


3.1.1.Các Selector cơ bản
4) selector1, selector2, selectorN: Trả về dãy các Selector được liệt kê
Ví dụ: $("select,input,p").css("border","1px solid #f00");
 5) * : Trả về tất cả các phần tử
Ví dụ: $("*").css("color","#f00");
6) ^ : Tìm những thành phần bắt đầu bằng chuỗi sau dấu ^
Ví dụ: $('a[href^=mailto:]').addClass('email');
7) $ : Tìm chuỗi kết thúc với cụm từ sau $
Ví dụ: $('a[href$=„.pdf]‟'').addClass('ebook');
3.1.2 Các yếu tố chọn lọc cơ bản
 1. :first
Tương ứng với phần tử đầu tiên được chọn

Ví dụ: $("tr:first").fadeTo("slow",1);
 2. :last
Tương ứng với phần tử cuối cùng được chọn
Ví dụ: $("ul li:last").fadeTo("slow",1);
 3. :not(selector)
Bỏ các phần tử tương ứng với selector
Ví dụ: $("ul li:not(.active)").addClass("myClass");
 4. :even
Tương ứng với các phần tử chẵn
Ví dụ: $("tr:even").css("color","#f00");
 5. :odd
Tương ứng với các phần tử lẻ
Ví dụ: $("tr:odd").css("color","#0f0");



3.1.2 Các yếu tố chọn lọc cơ bản
 6. :selected :
Dùng để lấy ra các đối tượng có thuộc tính selected là true
Ví dụ: $(“option:selected").val();
7. :checked :
Thường dùng với checkbox và radio để lấy ra những đối tượng được checked
Ví dụ: $("input[type=checkbox]:checked").attr("disabled","disabled");


Trên đây là một số Selector cơ bản của jQuery chi tiết có thể xem tại

3.2.Attributes
 Các thuộc tính cơ bản trong jQuery

3.2.Attributes
Thuộc
tính
Chi
tiết thuộc tính
Ví
dụ
addClass
(Class)
Thêm
mỗi class đã xác định
vào
các
phần tử phù hợp nếu có
nhiều
class thì mỗi class cách
nhau
bởi khoảng trắng

$("#
myId").addClass("myClass");
removeClass
(Class)
Loại
bỏ tất cả hoặc các class đã
xác
định khỏi tập phần tử phù
hợp

$("#

myId").removeClass("myClass
");
toogleClass
(Class)
Thêm
class nếu class đó chưa tồn

tại
hoặc loại bỏ nếu class đã tồn
tại

$("#
myId").toogleClass("myClass");
html
()
Lấy
nội dung html của phần tử
$("#
myText").html();
html
(val)
Thiết
lập nội dung html cho
phần
tử
$("#
myText").html("52Pm1");
text
()
Lấy

nội dung text của phần tử
$("#
myText").text("52Pm1");

3.2.Attributes
Thuộc
tính
Chi
tiết thuộc tính
Ví
dụ
Css

Lấy
giá trị của một element hoặc
thiết
lập css cho property
$("p").
css("background","#f00");
Attr

Dùng
để lấy giá trị của một
attribute
của element hoặc gán giá
trị
cho một attribute
$(".
myClass").attr("id");
removeAttr

Dùng
để gở bỏ một attribute của
một
element
$
(“#myImage”).removeAttr(“title”)
;

3.3.Sự kiện
 Các sự kiện cung cấp các tương tác với cửa sổ trình duyệt
và tài liệu hiện hành đang được load trong trang web, các
hành động của user khi nhập dữ liệu vào form và khi click
vào các button trong form.
Khi sử dụng bộ quản lý sự kiện chúng ta có thể viết các
hàm để biểu diễn cho các hành động dựa vào các sự kiện
đựoc chọn
3.3.Sự kiện
 Các sự kiện trong jQuery
 So sánh giữa sự kiện của JavaScript và jQuery

JavaScript

jQuery

onblur

onchange

onclick

ondblclick

onerror

onfocus

onkeydown

onkeypress

onkeyup

onload

onmousedown

onmousemove

onmouseout

onmouseover

submit


blur

change

click

dblclick

error

focus

keydown

keypress

keyup

load

mousedown

mousemove

mouseout

mouseover

Submit

3.3.Sự kiện
 Một số sự kiện quan trọng
1) Click
Khi user Click vào 1 link hoặc thành phần của Form

Ví dụ: $("a").click(function(){
alert("ban dang click vao the a");
});
Khi ta click vào tất cả các thẻ a trong trang Html sẽ có một alert thông báo “ban dang click
vao the a” hiện ra
2) change
Xãy ra khi giá trị của Form Field bị thay đổi bởi user
Ví du: khi thay đổi giá trị của combobox
3.3.Sự kiện

Ví dụ khi ta thay đổi giá trị trong thẻ select
<select id="gt" name="gt">
<option value="0">Nam</option>
<option value="1">Nữ</option>
</select>
$("#gt").change(function(){
alert("ban dang chon"+$(this).val());
});

Nếu chọn Nam thì sẽ hiện ra thông báo “ban dang chon 0” với 0 là value của option mà ta đã chọn

3) hover
Sự kiện xảy ra khi ta di chuột qua một thành phần nào đó

Ví dụ:
$("a").hover(function(){
$(this).css("text-decoration","underline");
})
Sự kiện này chỉ ra khi ta di chuột qua thẻ a thì thẻ a sẽ được thêm gạch chân

3.3.Sự kiện
 Một số sự kiện khác như blur,dblclick,delegate,… Có
thể tham khảo tại trang web

3.4 Hiệu ứng
 Các hiệu ứng động của jQuery sẽ làm cho trang web của
bạn thêm phần sinh động. Jquery cho phép bạn ẩn hiện,
trượt lên trượt xuống các thành phần của trang web. Bạn
cũng có thể cho nó xảy ra cùng một lúc hoặc theo thứ tự
định trước
3.4 Hiệu ứng
 Các hiệu ứng cơ bản trong jQuery
1) Hiệu ứng ẩn và hiện trong jQuery
Với jQuery, chúng ta có thể ẩn và hiện 1 thẻ HTML với 2 phương thức hide() và show()
Ví dụ:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Cả 2 phương thức đều cần 2 tham số tùy chọn (không nhất phải có) đó là
speed và callback.
Cú pháp:
$(selector).hide(speed,callback)

$(selector).show(speed,callback)
Tham số speed biểu diễn cho tốc độ của hiệu ứng ẩn và hiện, có 3 chế độ
đó là “slow”, “fast” và “normal” hoặc tính theo mili giây.

3.4 Hiệu ứng
 2) Hiệu ứng jQuery Toggle
 Phương thức toggle() cho phép gắn chặt với tính hiển thị
của các thẻ HTML được dùng phương thức show() và
hide(). Do đó khi dùng phương thức này, một đối tượng có
thể đồng thời ẩn và hiện thông qua các thao tác thực thi
của người dùng.
 Cú pháp:
 $(selector).toggle(speed,callback)
 Tham số speed biểu diễn cho tốc độ của hiệu ứng ẩn và
hiện, có 3 chế độ đó là “slow”, “fast” và “normal” hoặc
tính theo mili giây.

3.4 Hiệu ứng
 Ví dụ:
 $("button").click(function(){
$("p").toggle();
});
 Tham số callback là tên của một hàm được thực hiện sau
khi hiệu ứng ẩn (hiện) xảy ra.
3.4 Hiệu ứng
 3) Các hiệu ứng jQuery Slide - slideDown, slideUp,
slideToggle
 Các phương thức slide cho phép dần dần thay đổi độ cao
(height) của thẻ HTML được chọn. Trong jQuery có các
phương thức slide như sau:

 $(selector).slideDown(speed,callback)
 $(selector).slideUp(speed,callback)
 $(selector).slideToggle(speed,callback)
 Tham số speed biểu diễn cho tốc độ của hiệu ứng ẩn và hiện,
có 3 chế độ đó là “slow”, “fast” và “normal” hoặc tính theo
mili giây. Tham số callback là tên của một hàm được thực hiện
sau khi hiệu ứng ẩn (hiện) xảy ra.

3.4 Hiệu ứng
 Ví dụ về phương thức slideDown()
 $(".flip").click(function(){
$(".panel").slideDown();
});
 Ví dụ về slideUp()
$(".flip").click(function(){
$(".panel").slideUp()
})
 Ví dụ về slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});