Một số nội dung cơ bản về Jquery
Trang 11 Giới thiệu về jquery
1.1 Những gì jquery có thể làm
a DOM – hướng tới các thành phần trong tài liệu: Jquery cho phép bạn chọn bất cứ thành phần nào của tài liệu để “vọc” một cách dễ dàng như sử dụng CSS thông qua các quy tắc selector rất mạnh của nó
b Thay đổi nội dung trang web ngay cả khi nó được load xong Jquery có thể thay đổi cấu trúc trăng web, các thuộc tính của các thành phần như class, style,… để thay đổi trang web từ hiển thị đến bản thân nội dung của tài liệu Jquery tương thích với nhiều loại trình duyệt, nên sẽ giúp trang web hiển thị giống nhau ở các trình duyệt khác nhau
c Tương tác với người dung: Với thư viện javaScript như jQuery, nó cho bạn nhiều cách để tương tác với người dùng ví dụ như khi người dùng nhấp chuột vào đường link thì sẽ có gì xảy ra Nhưng cái hay của nó là không làm cho code HTML của bạn rối tung lên chính là nhờ các Event Handlers Hơn nữa Event Handler API sẽ bảo đảm rằng trang web của bạn tương thích hầu hết với các trình duyệt
d Tạo hiệu ứng động cho những thay đổi của tài liệu: Jquery cho hỗ trợ một số hiệu ứng động rất linh hoạt để thay đổi các thành phần của trang web,và cũng hỗ trợ để bạn tự tạo các hiệu ứng riêng
e Lấy thông rin server mà không cần tải lại trang web: jquery có sãn một số phương thức riêng để hỗ trợ người dung sử dụng ajax một các dễ dàng và linh hoạt
1.2 Jquery làm việc như thế nào
a Khai báo thư viện jquery
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
Trang 2</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
</script>
</body>
</html>
Thư viện là một tệp tin js bình thường nên ta khai báo như khi thêm một tệp js và tài liệu để sử dụng
b Code sử dụng jquery
Nếu code javascript thông thường thì chúng ta dung
window.onload = function(){ alert("welcome"); }
để viết code xử lý sau khi trang đã load xong, tuy nhiên dung cách này có hạn chế: đoạn code này sẽ chỉ chạy khi nào tài liệu HTML được tải về hoàn toàn, cả cả tất cả ảnh, banner,…Đây là một hạn chế khi bạn muốn chạy code mà document chưa load xong
Với jquery, nó khắc phục được hạn chế này
$(document).ready(function(){
// CODE ở đây
});
Các đoạn code sẽ được chạy khi nào document sãn sàng để thao tác
Ví dụ:
$(document).ready(function(){
$("a").click(function(event){
alert("hello to jquery!");
});
});
Tác dụng: thêm sự kiện click cho các thẻ a, khi ấn vào các link thì
sẽ xuất hiện thông báo(lệnh alert được thực thi)
c Một số lệnh phổ biến
Thêm bớt class cho đối tượng:
Tạo 1 class css
<style>
.mylink
{
color:red;
text-decoration:none;
}
</style>
Trang 3Thêm class này vào thể a bằng lệnh:
$(‘a’).addClass(“mylink”);
Các lien kết sẽ chuyển màu đỏ và không vó gạch chân Để bỏ class
$(‘a’).removeClass(“mylink”);
Hiệu ứng đặc biệt:
Jquery hỗ trợ một số hiệu ứng đặc biệt như show, hide để hiển thị hay ẩn đi thành phần nào đó Lệnh
$("a").click(function(event){
event.preventDefault();// tránh việc chuyển link sau khi click vào thẻ a
$(this).hide("slow");// thể a sẽ ẩn đi với tốc độ “slow”
});
Ở đây khi click vào thể a nó sẽ ẩn đi với tốc độ chậm, có thể đổi
“slow” thành số với dơn vị là mini giây ví dụ: hide(1000); ẩn đi hoàn toàn sau 1 giây
d Callback và hàm Callback là hàm được truyền như một đối số của một hàm, và nó được thực thi sau khi hàm cha thực thi xong Một điều đặc biệt là các hàm sau hàm cha có thể được thực thi trước khi hàm callback được thực thi
Hàm callback không có đối
$.get('myhtmlpage.html', myCallBack);
Hàm callback có đối
$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});
2 Selectors
2.1 Document Object Model (Mô hình đối tượng tài liệu): Một trong những tính năng mạnh mẽ nhất của jQuery là khả năng chọn các thành phần trong DOM một cách dễ dàng Nói nôm na thì DOM là một dạng phả hệ của các thành phần HTML Các thành phần này có mối tương quan với nhau như một “gia đình” HTML hạnh phúc Khi chúng ta nói đến các mối quan hệ này bạn hãy liên tưởng đến mối quan hệ trong gia đình như ông bà, bố mẹ, anh chị em v.v Bạn có thể xem bài Hướng đối tượng dựa vào cấp bậc XHTML để biết rõ hơn về mối quan hệ của các thành phần HTML
2.2 Hàm $()
Cho dù bạn sử dụng Selector nào đi chăng nữa trong jQuery, bạn luôn bắt đầu bằng một dấu dollar ($) và một đôi ngoặc đơn như: $() Tất cả những gì có thể
Trang 4được sử dụng trong CSS cũng có thể được lồng vào dấu ngoặc kép (”) và đặt vào trong hai dấu ngoặc đơn, cho phép chúng ta áp dụng các phương pháp jQuery cho tập hợp các phần tử phù hợp
Ba thành phần quan trọng nhất của jQuery Selector là tên thẻ HTML, ID và Class Bạn có thể chỉ sử dụng nó hoặc kết hợp với những Selector khác để chọn Dưới đây là một ví dụ về mỗi Selecter khi sử dụng một mình
Khi chúng ta thêm các phương pháp vào hàm $(), thì các phần tử nằm trong đối tượng jQuery sẽ được tự động loop và diễn ra ở “hậu trường” Cho nên chúng
ta không cần phải sử dụng bất cứ một vòng lặp nào cả, như vòng lặp for chẳng hạn, điều này thường phải làm trong khi viết code về DOM Sau khi bạn đã nằm bắt được những khái niệm cơ bản, bây giờ chúng ta sẽ khám phá thêm những tính năng mạnh mẽ khác của jQuery
2.3 Các quy tắc cho bộ selector
(“*”) : chọn tất cả các đối tượng
:animated : chọn tất cả các phần tử đang diễn ra một hoạt hình(animation) tại thời điểm chạy bộ selector
[name|="value"] : chọn các phần tử có thuộc tính được chỉ định với giá trị bằng giá trị đưa ra hoặc bắt đầu với từ đó và theo sau là dấu gạch ngang (-)
[name*="value"] : chọn các thành phần có thuộc tính được chỉ định với giá trị có chứa chuỗi đưa ra
[name~="value"] : chọn các thành phần có thuộc tính được chỉ định với giá trị chứ 1 từ được đưa ra, phân chia bằng dấu cách
[name$="value"] : chọn ra các thành phần có thuộc tính được chỉ định với giá trị kết thúc bằng chuổi đưa ra, có phân việt hoa thường
[name="value"] : chọn thành phần có thuộc tính đưuọc chỉ định với một giá trị bằng chính xác chuỗi đưa ra
[name!="value"] : chọn ra các thành phần không chứa thuộc tính được chỉ định hoặc thuộc tính chỉ định không có giá trị như chuỗi đưa ra
[name^="value"] : chọn ra các thành phần chứa thuộc tính chỉ định với giá trị bắt đầu bằng chuỗi đưa ra
Trang 5:button : chọn ra các thành phần <button> và các thành phần có kiểu(type) button
:checkbox : chon tất cả thành phần có kiểu checkbox
:checked : chọn tất cả các thành phần được checked
(“parent > child”) : chọn tất cả các thành phần con trực tiếp cụ thể là các thành phần <child> của <parent>
(“.class”) : chon tất cả các thành phần có class như class đưa ra
:contains() : chọn các thành phần chứa văn bản cụ thể
(“tag1 tag2”) : chọn các thành phần <tag2> là con cháu của thành phần
<tag1>
:disabled : chọn các thành phần bị disable
(“element”) : chọn các thành phần với tag name là element
:empty : chọn các thành phần không có con(kể cả các node văn bản)
:enabled : chọn các thành phần được enabled
:eq(n) : chọn thành phần thứ n trong nhóm các thành phần phù hợp
:even chọn các thành phần chẵn, bắt đầu từ 0; ngược lại là odd
:file : chọn các thành phần kiểu file
:first-child : chọn các thành phần là con đầu tiên của cha nó
:first : chọn thành phần đầu tiên phù hợp
:focus chọn thành phần hiện tại được focus
:gt() : chọn tất cả thành phần có thứ tự lớn hơn trong nhóm các thành phần phù hợp
[name] : chọn các thành phần có thuộc tính chỉ định
:has() : chọn các thành phần chứa ít nhất một thành phần phù hợp với bộ chọn cụ thể
:header : chọn các thành phần là tiêu đề ví dụ như h1, h2, h3, …
:hidden : chọn các thành phần bị ẩn đi
(“#id”) : chọn thành phần có thuộc tính id với giá trị chỉ định
:image : chọn tất cả thành phần kiểu ảnh
Trang 6:input : chon các thành phần input, textare, select, và button.
:last-child : chọn các thành phần là con cuối của của cha nó
:last : chọn thành phần cuối cùng phù hợp
:lt(n) : chọn các thành phần có thứ tự nhỏ hơn n trong nhóm phù hợp
[name="value"][name2="value2"] : chọn các thành phần phù hợp với tất cả
bộ lọc thuộc tính đưa ra
(“selector1, selector2, selectorN”) : kết hợp các kết quả của từng bộ chọn (“prev + next”) : chọn các thành phần <next> mà theo sau một phần tử
<prev>
(“prev ~ siblings”) : chọn tất cả các thành phần anh em mà theo sau thành phần <prev>, có chung cha, và phù hợp với bộ lọc “siblings”
:not() : chọn các thành phần không phù hợp với selector
:nth-child(n) : chọn các thành phần thứ n của cha chúng
:odd : chọn các thành phần ở vị trí lẻ,bắt đầu từ 0
:only-child : chọn các thành phần là con duy nhất của cha chúng
:parent : chọn các thành phần là cha của thành phần nào đó, kể cả node văn bản
:password : chọn các thành phần kiểu password
:radio : chọn các thành phần kiểu radio
:reset : chọn các thành phần kiểu reset
:selected : chọn các thành phần đã được chọn (selected)
:submit : chọn các thành phần kiểu submit
:text : chọn các thành phần kiểu text
:visible : chọn các thành phần hiển(visible)
2.4 Phương pháp di chuyển trong DOM
Một số hàm thông dụng:
- ep(index) : giảm số phần tử của nhóm tìm được xuống 1 phần tử tại thứ
tự index
- first() : giảm số phần tử của nhóm tìm được xuống 1 phần tử tại vị trí đầu tiên
- last() : giảm số phần tử của nhóm tìm được xuống 1 phần tử tại vị trí cuối cùng
Trang 7- not(selector/element/function(index)) : xóa các thành phần phù hợp bộ selector/element/function(index) ra khỏi nhóm
- children(selector) : lấy ra các con của các thành phần
- closest(selector) : lấy ra ông bà tổ tiên gần nhất của thành phần mà thỏa man bộ selector
- next([selector]) : lấy ra phần tử anh em ngay liền kề với nó(và phù hợp với selector nếu có)
- parent([selector]) : lấy ra phần tử cha của các phần tử trong nhóm
- parents([selector]) : tương tự như parent() nhưng lệnh này lấy đến cả ông bà,…
- prev([selector]) : lấy ra phần tử anh em ngay trước nó
- siblings([selector]) : lấy ra các phần tử an hem với nó
- filter() cực kỳ mạnh mẽ ở chỗ nó có thể lấy một hàm làm tham số của
nó Hàm đó cho phép chúng ta tạo ra những phép kiểm phức tạp để xác định xem một thành phần nào đó có nên được giữ lại trong tập hợp kết quả trả về Nói ví dụ chúng ta muốn thêm một class cho tất cả những đường liên kết ngoài Jquery không có selector nào có thể tiến hành tác
vụ này Nếu không có hàm trong phương pháp filter(), chúng ta bắt buộc phải sử dụng vòng lặp để nhảy qua từng thành phần và kiểm tra nó riêng
rẽ Tuy nhiên với những hàm trong phương pháp filter() sau, chúng ta vẫn có thể dựa vào vòng lặp ẩn của jQuery và giữ cho code của chúng ta gọn gàng
$('a').filter(function() {
return this.hostname && this.hostname != location.hostname;
}).addClass('external');
Dòng code thứ 2 lọc tập hợp các phần tử <a> với hai tiêu chí sau:
1.Nó phải có thuộc tính href với tên miền (this.hostname) Chúng ta
sử dụng phép kiểm này để loại bỏ những liên kết dạng mailto và những thứ tương tự
2.Tên miền mà nó liên kết tới (this.hostname) không được giống (!=) với tên miền của trang hiện tại (location.hostname)
Nói chính xác hơn thì phương pháp filter() lặp qua tập hợp những phần
tử phù hợp, kiểm tra từng giá trị trả về bằng hàm đã tạo Nếu hàm trả về
là false, thì phần tử đó sẽ bị loại khỏi tập hợp Còn nếu giá trị trả về là true, thì phần tử đó được giữ lại
Trang 83 Events
Event bubbling(bong bóng sự kiện)
Khi ta click vào 1 liên kết, nó sẽ đốt cháy dự kiện click trên phần tử link, nó
sẽ làm nổ các hàm bao lấy sự kiện click vào phần tử
$('a').bind('click', function() { alert("That tickles!") });
Ở đây, click sẽ làm thực thi hàm alert để hiển thị một thông báo “That tickles!” Sự kiện click sau đó sẽ được nhân lên phía trên của cây DOM, lan truyền tới thành phần cha, sau đó là từng thành phần tổ tiên mà sự kiện click được nổ ra trên phần tử hậu duệ của nó
Bind : bind(eventType, [eventData], handler(eventObject))
evenType: click, focus, resize, …
multieven: khai báo cho nhiều event được gán vào phần tử
$('#foo').bind({
click: function() {
// do something on click
},
mouseenter: function() {
// do something on mouseenter
}
});
Trang 9evenData: truyền dữ liệu vào trong hàm(handler)
var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
alert(event.data.msg);
});
Handler: là hàm xử lý và được chạy khi sự kiện nổ ra
Ví dụ:
$('a').bind('click', function() { alert("That tickles!") });
Jquery sẽ quét toàn bộ tài liệu document, và gán hàm thông báo vào sự kiện click của từng phần tử $(“a”)
Live: live( eventType, eventData, handler )
$('a').live('click', function() { alert("That tickles!") });
Jquery sẽ gán cho document một hàm thông báo, kèm theo là 2 đối là “a” và
“click” Bất cứ khi nào có sự kiện bong bóng xảy ra trên document nó sẽ kiểm tra xem sự kiện đó có phải là “click” hay không, và sự kiện đó xảy ra trên thành phần
“a” hay không Nếu kiểm tra cả 2 đều đúng thì nó sẽ cho thực thi hàm
Delegate : delegate( selector, eventType, eventData, handler )
$('#container').delegate('a', 'click', function() { alert("That tickles!") });
Tương tự như hàm live, nhưng ở đây nó không gán cho cả document mà chỉ gán cho container Như vậy khi có sự kiện bong bóng nổ ra trên “container” thì nó
sẽ kiểm tra xem sự kiện đó có phải là “click” hay không, và sự kiện đó xảy ra trên thành phần “a” hay không Nếu kiểm tra cả 2 đều đúng thì nó sẽ cho thực thi hàm
Một số hàm dùng để gán hàm xử lyas sự kiện khác: tương tự như các sự kiện
hỗ trợ trong javascript, jquery hỗ trợ các hàm để gán cho sự kiện nào đó một hàm
xử lý Ví dụ như: click(handler), blur(handler),…
Để tránh hiện tượng bong bóng sự kiện ta có thể sử dụng
$('a').bind('click', function(e) {
e.preventDefault();
// or
e.stopPropagation();
//or
return false;
});
4 Effects
Show/hide
Trang 10.show( [duration], [easing], [callback] ) : hiện thành phần được chọn
.hide( [duration], [easing], [callback] ) : ẩn thành phần được chọn
• duration : thời gian thwujc hiện hoạt cảnh
• easing : tên hàm easing đưuọc sử dụng(để thêm easing có thể thêm plugin)
• callback : hàm được gọi sau khi hoạt cảnh hoàn thành
Toggle
.toggle( [duration], [easing], [callback] ) : tương tự như hide và show nhưng hàm này sẽ kiểm tra nếu thành phần đang hide sẽ được show, đang show sẽ được hide
FadeIn/fadeOut/fadeTo/fadeToggle
.fadeIn( [duration], [easing], [callback] ) : hiện thành phần được chọn theo kiểu fade
.fadeOut( [duration], [easing], [callback] ) : ẩn thành phần được chọn theo kiểu fade
.fadeTo( duration, opacity, [easing], [callback] ) : điều chỉnh độ trong suốt của thành phần đến giá trị xác định(opacity : opacity của thành phần cần được điều chỉnh đến)
Animate
.animate( properties, [duration], [easing], [complete] ) : thực thi hoạt cảnh tùy chỉnh dựa vào tập thuộc tính css (properties)
.animate(properties, options) :
Options tập các thông tin tùy chọn, hỗ trợ các đối:
duration: thời gian chạy.
easing: hàm easing.
complete: hàm thực thi sau khi hoàn thành animation.
st e p : hàm thực thi sau mỗi bước của animation.
queue: true/false chạy theo danh sách efect hoạc chạy ngay lập tức.
specialEasing: tập các thuộc tinh css ứng với các đối được định nghĩa trong hàm easing.
5 DOM
Thay đổi thuộc tính
.addClass() : thêm class cho đối tượng
Ví dụ:
$(“a”).addClass(“no-underline”);
.removeClass() : xóa class của đối tượng