Nội dung 1
Tiêu đề 2Nội dung 2
5.1.4 Content Filters (Chọn lọc nội dung) :contains(text) Kiểu trả về: Array Tương ứng với phần tử chứa nội dung văn Ví dụ: Gạch chân tất thẻ “div” có chứa từ “John” $("div:contains('John')").css("text-decoration", "underline"); :empty Kiểu trả về: Array Tương ứng với tất phần tử khơng có phần tử Ví dụ: Chèn xâu “Khơng có nội dung” màu đỏ vào thẻ “td” khơng có phần tử $("td:empty").text("Khơng có nội dung!").css('color','red'); :has(selector) Kiểu trả về: Array Tương ứng với phần tử bao gồm phần tử phù hợp với định danh selector Ví dụ: Đặt cỡ chữ 30px cho đoạn văn có nằm thẻ “div” có chứa thẻ “p” $("div:has(p)").css("font-size", "30px"); :parent Kiểu trả về: Array Tương ứng với tất phần tử cha (chứa phần tử con, gồm phần tử văn bản) Microsoft Vietnam – DPE Team | Bài số 9: jQuery Ví dụ: Đặt cỡ chữ 30px cho thẻ “td” cha có phần tử $("td:parent)").css("font-size", "30px"); Ví dụ: Vi_du_9_4.aspx Vi_du_9_4 $(document).ready(function() { $("div:contains('Thị')").css("text-decoration", "underline"); $("td:empty").css("background-color", "#EEEEEE"); $("div:has(p)").css("font-size", "30px"); $("td:parent").css("color", "yellow"); }); td {width:200px;background:green; } Danh sách lớp 12A3 Đỗ Thị Thu Hằng Lê Văn Bình Trần Thị Hương Nguyễn Hải Nam Hồng Thu Bình TD #0 TD #2Chào bạn đến với jQuery
Chào bạn đến với jQuery 5.1.5 Visibility Filters :hidden Kiểu trả về: Array Tương ứng với tất phần tử ẩn phần tử vào có dạng ẩn “hidden” Ví dụ: Ẩn thẻ “div” $("div:hidden").show(3000); :visble Kiểu trả về: Array Tương ứng với phần tử nhìn thấy Ví dụ: Click chuột vào thẻ div nhìn thấy $("div:visible").click(function() {$(this).css("background", "yellow");}); Ví dụ: Vi_du_9_5.aspx Vi_du_9_5 Microsoft Vietnam – DPE Team | Bài số 9: jQuery $(document).ready(function() { $("span:first").text("Tìm thấy " + $(":hidden", document.body).length + " phần tử ẩn."); $("div:hidden").show(3000); $("span:last").text("Tìm thấy " + $("input:hidden").length + " inputs ẩn."); $("div:visible").click(function() { $(this).css("background", "yellow"); }); }); div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; } span { display:block; clear:left; color:red; } starthidden { display:none; } Ẩn Ẩn 5.2 Attributes 5.2.1 Class addClass( class ) Kiểu trả về: jQuery Thêm class xác định vào tập phần tử phù hợp Nếu có thêm nhiều class class khoảng trắng Ví dụ: Thêm class “Maudo” vào thẻ p $("p").addClass("Maudo"); removeClass( class ) Kiểu trả về: jQuery Loại bỏ tất class xác định khỏi tập phần tử phù hợp Ví dụ: Loại bỏ lass “Maudo” khỏi thẻ p $("p").removeClass("Maudo"); toggleClass( class ) Kiểu trả về: jQuery Thêm class class chưa tồn loại bỏ class tồn Ví dụ: Thêm class “Maudo” vào thẻ p class “Maudo” chưa tồn thẻ p loại bỏ class “Maudo” khỏi thẻ p tồn $("p").toggleClass("Maudo"); Ví dụ: Vi_du_9_6.aspx Microsoft Vietnam – DPE Team | Bài số 9: jQuery Vi_du_9_6 $(document).ready(function() { $("p").addClass("under"); $("p:last").removeClass("highlight"); $("p").click(function() { $("p").removeClass("highlight"); $(this).toggleClass("highlight"); }); }); p { margin: 4px; font-size:16px; font-weight:bolder; } blue { color:blue; } under { text-decoration:underline; } highlight { background:yellow; }Visual Studio 2000
ASP.NET 3.5
Chào mừng bạn đến với jQuery
5.2.2 html() HTML, Text Kiểu trả về: String Lấy nội dung html (innerHTML) phần tử Ví dụ: Mỗi click vào thẻ p lấy nội dung html thẻ p thơng báo nội dung lấy $("p").click(function() {alert($(this).html())}); html( val ) Kiểu trả về: jQuery Thiết lậ nội dung html (innerHTML) cho phần tử Ví dụ: Thiết lập nội dung html cho thẻ div $("div").html("Chào bạn! Chúc buổi học hôm thú vị."); text() Kiểu trả về: String Lấy nội dung text (innerText) phần tử Ví dụ: Mỗi click vào thẻ p lấy nội dung text thẻ p thơng báo nội dung lấy $("p").click(function() {alert($(this).html())}); text( val ) Kiểu trả về: jQuery Thiết lập nội dung text (innerText) cho phần tử Ví dụ: Thiết lập nội dung text cho thẻ div $("div").text("Chào bạn! Chúc buổi học hôm thú vị"); 5.3 Events Bind( type, [data], fn ) Bind hander vào kiện cho phần tử phù hợp, “type” kiện, “[data]” (tùy chọn) thêm liệu thông qua kiện, “fn” hàm xử lý kiện xảy Microsoft Vietnam – DPE Team | Bài số 9: jQuery 10 one( type, [data], fn ) Bind hander vào kiện thực thi lần cho phần tử phù hợp trigger( type, [data] ) Kích kiện phần tử phù hợp unbind( [type], [data] ) Loại bỏ kiện khỏi phần tử hover( over, out ) over, out hàm xử lý kiện Hàm over xử lý chuột di chuyển phần tử hàm out xử lý chuột rời khỏi phần tử toogle( fn, fn ) Chuyển đổi gọi hàm lần click Ví dụ: Vi_du_9_7.aspx Vi_du_9_7 $(document).ready(function() { $("p:first").bind("click", function(e) { var str = "( " + e.pageX + ", " + e.pageY + " )"; $("span:first").text("Sự kiện click vừa xảy vị trí " + str); }); $("p:first").bind("dblclick", function() { $("span:first").text("Sự kiện click đúp vừa xảy thẻ " + this.tagName); }); var n = 0; $("div:lt(2)").one("click", function() { var index = $("div").index(this) + 1; $(this).css({ borderStyle: "inset", cursor: "auto" }); $("p:last").text("Hình chữ nhật thứ " + index + " vừa click." + " Tổng cộng có " + ++n + " click."); }); $("button:eq(0)").click(function() { update($("span:eq(1)")); }); $("button:eq(1)").click(function() { $("button:first").trigger('click'); update($("span:eq(2)")); }); function update(j) { var n = parseInt(j.text(), 0); j.text(n + 1); } function aClick() { $("div:last").show().fadeOut("slow"); } Microsoft Vietnam – DPE Team | Bài số 9: jQuery 11 $("#bind").click(function() { // could use bind('click', aClick) instead but for variety $("#theone").click(aClick).text("Có thể click"); }); $("#unbind").click(function() { $("#theone").unbind('click', aClick) text("Khơng làm "); }); $("li").hover( function() { $(this).css("color", "red"); }, function() { $(this).css("color", "black"); } ); }); p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; } span { color:red; } div1 { width:60px; height:60px; margin:5px; float:left; background:green; border:5px outset; cursor:pointer; }Click click đúp vào đây.
Hãy click vào hình chữ nhật màu xanh
Button thứ 1 Button thứ 2 0 lần button thứ click. 0 lần button thứ clicks. Khơng làm Bind Click Unbind Click Click!Hãy di chuyển chuột lên Máy bay, Ơtơ, Xe máy, Xe đạp
- Máy bay
- Ơtơ
- Xe máy
- Xe đạp