Bài giảng JQuery

t cả các attribute filter.
Attribute Filter
Attribute Filter
Attribute Filter
Attribute Filter
Content & Visibility Filter
BỘ LỌC THEO
NỘI DUNG Ý NGHĨA
:contains(text) Lọc các phần tử có chứa chuỗi text
:empty Lọc các phần tử rỗng
:has(selector) Lọc các phần tử có chứa ít nhất 1 element thỏa selector
:parent Lọc các phần tử là cha ( chứa ít nhất 1 element kháchoặc text )
BỘ LỌC THEO TRẠNG
THÁI HiỂN THỊ Ý NGHĨA
:visible Lọc các phần tử có trạng thái là visible ( đang hiểnthị )
:hidden Lọc các phần tử có trạng thái hidden ( đang ẩn )
Content Filter
Content Filter
Content Filter
Content Filter
Child Filter
BỘ LỌC Ý NGHĨA
:nth-child(index)
:nth-child(even)
:nth-child(odd)
Lọc các phần tử theo vị trí so với cha của nó
:nth-child(equation) Lọc phần tử theo vị trí ( vị trí thỏa phương trìnhtham số ) so với cha của nó
:first-child Lấy phần tử đầu tiên so với cha của nó
:last-child Lấy phần tử cuối cùng so với cha của nó
:only-child Lấy phần tử nếu phần tử này là con duy nhất sovới cha của nó
Child Filter
Nội dung trình bày
 Giới thiệu về JQuery
 JQuery Selector
 JQuery Filter
 Thay đổi nội dung document
 Xử lý sự kiện
 Hiệu ứng & hoạt ảnh
Duyệt danh sách các element trong document
BỘ LỌC Ý NGHĨA
size(), length Lấy số phần tử trong tập kết quả của Selector
get() Lấy tập DOM elements trong tập kết quả củaSelector
get(index) Lấy DOM element ở vị trí index
find(expression) Lấy các element con cháu thỏa expression
each() Gọi thực thi phương thức với từng element trongtập kết quả của Selector
Duyệt danh sách các element trong document
alert( $("p").size() ); // 4
for(var i=0 ; i < $("p").size() ; ++i )
{
var name = $("p").get(i); // DOM element
var innerText = $("p").get(i).innerText;
}
Duyệt danh sách các element trong document
$(“ul").find(“li.a").css("border","1px solid red");
var i = 1;
$("p").each(function () {
$(this).html("Custom paragraph " + i);
i++;
});
Tạo nội dung mới
 Phương thức $(“html content”), kết quả trả về
là 1 JQuery object.
Ví dụ:
var h1 = $(“heading 1”); // tạo thẻ h1 với
nội dung
var temp = “heading 1”;
var newH1 = $(temp); // tạo thẻ h1 từ biến temp
$(“p:eq(0)”).html(newH1);
Truy cập, thay đổi nội dung trong
element
Phương thức Ý nghĩa
html() Lấy nội dung html bên trong element đầu tiên
thỏa selector
html( newContent ) Thay đổi nội dung html bên trong mọi element
thỏa selector ( tương tự innerHTML trong DOM )
text() Lấy nội dung text bên trong element đầu tiên
text( newTextContent ) Thay đổi nội dung text bên trong mọi element
thỏa selector ( tương tự innerText )
Truy cập, thay đổi nội dung trong
element
Truy cập, thay đổi nội dung trong
element
Thay đổi giá trị thuộc tính
Phương thức Ý nghĩa
attr( name ) Lấy attribute value của element đầu tiên thỏa
selector
attr( properties ) Thiết lập tập attribute cho mọi element thỏa
selector. Properties có dạng object-notation
syntax.
attr( key, value ) Thiết lập attribute cho mọi element thỏa selector
attr( key, function ) Thiết lập giá trị attribute dựa trên 1 function với
mọi element thỏa selector.
removeAttr( name ) Xóa attribute với mọi element
Thay đổi giá trị thuộc tính – ví dụ
Trang 1
$("a").attr("href","trang2.html");
$("a").text("trang 2");
$("a").attr("target","_blank");
$("a img").attr("src","book2.jpg");
$("a").removeAttr("href");
$("img").attr( {src:"book2.jpg",alt:"hello world"} );
Chèn nội dung
Phương thức Ý nghĩa
append( content ) Chèn content vào sau nội dung có sẵn của các
element thỏa selector
appendTo( selector ) Chèn element thỏa selector vào sau nội dung có
sẵn của các element thỏa selector tham số
prepend( content ) Chèn content vào trước nội dung có sẵn của các
element thỏa selector
prependTo( selector ) Chèn element thỏa selector vào trước nội dung
có sẵn của các element thỏa selector tham số
after( content ) Chèn content vào sau các element thỏa selector
before ( content ) Chèn content vào trước các element thỏa
selector
Chèn nội dung
Chèn nội dung
Làm việc với CSS
Phương thức Ý nghĩa
css ( name ) Lấy giá trị thuộc tính name của element đầu tiên
thỏa selector
css ( properties ) Thiết lập tập thuộc tính css đối với mọi element
thỏa selector
css ( property, value ) Thiết lập giá trị 1 thuộc tính đối với mọi element
thỏa selector
Làm việc với CSS
Làm việc với CSS
Phương thức Ý nghĩa
addClass ( class ) Thêm class vào các element thỏa selector
hasClass ( class ) Kiểm tra class có tồn tại trong các element thỏa
selector
removeClass ( class ) Xóa class khỏi các element thỏa selector
toggleClass ( class ) Thêm class vào các element thỏa selector nếu
class chưa khai báo, ngược lại nếu đã tồn tại rồi,
class sẽ bị xóa
Thay đổi kích thước
Phương thức Ý nghĩa
height () Lấy chiều cao của element đầu tiên thỏa selector
width () Lấy chiều rộng của element đầu tiên thỏa selector
height ( val ) Thiết lập chiều cao của mọi element thỏa selector
width ( val ) Thiết lập chiều rộng của mọi element thỏa
selector
Nội dung trình bày
 Giới thiệu về JQuery
 JQuery Selector
 JQuery Filter
 Thay đổi nội dung document
 Xử lý sự kiện
 Hiệu ứng & hoạt ảnh
Xử lý sự kiện
$("selector").bind(event,[data],[handler]);
$("selector").unbind(event,data,handler);
Tham số Ý nghĩa
event Sự kiện selector xử lý, bao gồm: load, blur, click, dbclick,
mousedown, mouseup, mousemove, mouseover, mouseout,
submit, keydown, keypress, keyup, ..
data Tùy chọn, dữ liệu truyền vào handler khi event xảy ra
handler Tên hàm xử lý sự kiện
Xử lý sự kiện – ví dụ
$("div").bind("mouseover",highLight);
$("div").bind("mouseleave",highLight);
$("div").bind("click", function () {
$("div").unbind("mouseover",highLight);
$("div").unbind("mouseleave",highLight);
$("div").html("turn
off");
})
function highLight(evt)
{
$("div").toggleClass("highlight");
}
Xử lý sự kiện – Helper function
Xử lý nhanh một số sự kiện thường gặp
$("div").hover( highLight , highLight );
function highLight(evt)
{
$("div").toggleClass("highlight");
}
Phương thức Ý nghĩa
click( func ) Xử lý sự kiện click của 1 selector. Một số hàm khác: blur,
mousedown, mouseover, mouseout, submit, ..
hover ( func1,
func2)
Func1: hàm xử lý được gọi khi mouse di chuyển trên selector
Func2: hàm xử lý được gọi khi mouse di chuyển ra khỏi
selector
Đối tượng Event
 Cung cấp các thông tin về event để xử lý.
Thuộc tính /
Phương thức
Ý nghĩa
type Loại event xảy ra, ví dụ: “click”
target Element mà event xảy ra
data Dữ liệu được truyền vào handler bởi phương thức bind
$("div").click(function (evt)
{
$(this).html("pageX:" + evt.pageX + ", pageY:" + evt.pageY + ",
type:" + evt.type + ", target:" + evt.target);
});
pageX, pageY Tọa độ chuột khi event xảy ra
preventDefault ( ) Ngăn trình duyệt không thực thi xử lý mặc định, ví dụ khi
click vào liên kết
Nội dung trình bày
 Giới thiệu về JQuery
 JQuery Selector
 JQuery Filter
 Thay đổi nội dung document
 Xử lý sự kiện
 Hiệu ứng & hoạt ảnh
Hiệu ứng và hoạt ảnh
 Ẩn, hiện element
 Fade-in, fade-out
 Sliding
 Di chuyển element
 Custom animation effect
Ẩn/hiện element
 speed: tốc độ hiệu ứng quy định bởi các giá trị:
“slow”, “normal”, “fast” hoặc millisecond
Phương thức Ý nghĩa
show ( ) Hiển thị các element thỏa selector nếu trước đó bị ẩn
show( speed, callback ) Hiển thị các element thỏa selector nếu trước đó bị ẩn,
speed xác định tốc độ hiển thị. Sau khi hiển thị xong,
phương thức callback sẽ được thực thi.
hide ( ) Ẩn element nếu trước đó đang hiển thị.
hide ( speed, callback ) Ẩn element nếu trước đó đang hiển thị, tham số có ý
nghĩa tương tự phương thức show.
toggle ( ) Chuyển qua lại trạng thái ẩn/hiện các element.
toggle ( speed,
callback)
Chuyển qua lại trạng thái ẩn/hiện các element,
tham số có ý nghĩa tương tự phương thức show.
Ẩn/hiện element
$("#div1").show("normal");
$("#div1").hide("slow");
$("#div1").hide(4000); // ẩn trong 4 giây
// thay đổi luân phiên trạng thái ẩn/hiện
$("#div1").toggle("fast");
Fade in/fade out
Phương thức Ý nghĩa
fadeIn(speed, callback) Hiển thị element bằng cách tăng dần độ trong suốt.
fadeOut(speed
,callback)
Ẩn element bằng cách giảm dần độ trong suốt về 0,
sau đó thiết lập style display là none.
fadeTo(speed, opacity,
callback )
Thay đổi độ trong suốt của element.
Fade in/fade out
$("#button_fadein").bind("click",function () {
$("#div1").fadeIn("normal");
});
$("#button_fadeout").bind("click",function () {
$("#div1").fadeOut("slow");
});
$("#button_fadeto3").bind("click",function () {
$("#div1").fadeTo("slow",0.3,function () {
alert("finished");
});
});
$("#button_fadeup").bind("click",function () {
$("#div1").fadeTo("slow",1.0);
});
Sliding
Phương thức Ý nghĩa
slideDown(speed,
callback)
Hiển thị element bằng cách tăng chiều cao.
slideUp(speed, callback) Ẩn element bằng cách giảm chiều cao.
slideToggle( speed,
callback)
Chuyển đổi trạng thái ẩn/hiện element.
Sliding
$("#button_slideup").bind("click",function () {
$("#div1").slideUp("normal");
});
$("#button_slidedown").bind("click",function () {
$("#div1").slideDown("slow");
});
$("#button_toggleslide").bind("click",function ()
{
$("#div1").slideToggle(3000);
});
Custom Animation
$(“selector").animate(properties,[duration],
[easing],[callback]);
$(“selector").stop();
Tham số Ý nghĩa
properties Các thuộc tính xác trạng thái hiển thị sau khi
animate.
duration Animate kéo dài trong bao lâu ( “slow”, “normal”,
“fast”, milisecond )
easing Hiệu ứng xóa : swing, linear
Callback Hàm được gọi sau khi animate xong
Custom Animation
$("#button_growright").click(function () {
$("#div1").animate({width:"800"},"normal");
});
$("#button_growleft").click(function () {
$("#div1").animate({width: "100"},"fast");
});
$("#button_bigtext").click(function () {
$("#div1").animate({fontSize:"40"},2000);
});
$("#button_movediv").click(function () {
$("#div1").animate( { left : "500", fontSize: "50" } , 1000
,"linear" );
});