jquery traversing
TRANSCRIPT
jQueryNguyễn Duy An 10110001Phan Dương Hiền 10110035Nguyễn Trung Nguyên 10110073Lê Duy Trung 10110124Nguyễn Minh Giàu 10110032
Nội dung• I. Jquery.
• II. Jquery UI.• 1. Effect.
• 2. Interaction.
• 3. Widget.
• III. Jquery Mobile.
I. Gi i thi uớ ệ 1. jQuery là gì?
Là một thư viện javascript miễn phí.
jQuery làm đơn giản hóa việc lập trình Javascript bằng cách cung cấp các hàm API có sẵn để thao tác với: HTML/DOM
CSS
Hiệu ứng và hoạt ảnh.
AJAX
I. Gi i thi uớ ệ 2. Tại sao nên sử dụng jQuery?
jQuery được sử dụng rộng rãi và phổ biến nhất hiện nay.
Tương thích với tất cả trình duyệt (kể cả IE 6).
Các hãng lớn như Google, Microsoft, IBM… đều sử dụng jQuery trên website và công nghệ của họ.
I. Gi i thi uớ ệ 3. Cài đặt jQuery
Download jQuery tại trang chủ: http://jquery.com/
Có 2 loại phiên bản của jQuery: Product version: nén, dành cho các website đã phát hành.
Developmemt version: không nén, dành cho phát triển và kiểm lỗi.
Chèn đoạn mã sau vào tài liệu để tham chiếu đến thư viện jQuery:
<script src="jquery-1.10.2.min.js"></script>Lưu ý: thay đổi đường dẫn đến file jquery cho phù hợp.
II. S d ng jquery.ử ụ 1. Cú pháp của jquery:
Cú pháp cơ bản: $(selector).action(). $: ký hiệu đánh dấu sự truy xuất vào thư viện jquey.
Selector: nhằm để chọn/lấy được phần tử HTML sẽ thao tác.
Action(): hành động được gán với đối tượng.
Ví dụ:
• $(this).hide() - ẩn đối tượng hiện tại.• $("p").hide() - ẩn tất cả thẻ <p>.• $(".test").hide() - ẩn tất cả phần tử có class=“test”.• $("#test").hide() - ẩn tất cả phần tử có id=“test”.
II. S d ng jquery.ử ụ 2. jQuery selector:
Các selector cơ bản: $(document): chọn tài liệu hiện tại.
$(window): chọn cửa sổ hiện tại.
$(this): chọn phần tử hiện tại.
$(“HTML Tag”): chọn tất cả các phần tử HTML Tag.
$(“.ClassName”): chọn tất cả phần tử có class=“ClassName”.
$(“#IdValue”): chọn tất cả phần tử có id=“IdValue”.
Tham khảo thêm tại: http://api.jquery.com/category/selectors/
II. S d ng jquery.ử ụ 3. jQuery action: là các hàm api đã được viết sẵn.
Các nhóm hiệu ứng cơ bản gồm có: jQuery show/hide: hiệu ứng ẩn/hiện phần tử.
jQuery fade: hiệu ứng ẩn/hiện diễn ra từ từ.
jQuery slide: hiệu ứng kéo/trượt.
jQuery animate: hiệu ứng hoạt ảnh.
jQuery stop: dừng các hiệu ứng đang diễn ra.
…
II. S d ng jquery.ử ụ 3. jQuery action: là các hàm api đã được viết sẵn.
Nhóm Tên hàm Ý nghĩa
Show/Hide
.show() Hiện phần tử
.hide() Ẩn phần tử
.toggle() Hiện nếu đang ẩn và ẩn nếu đang hiện
Fade
.fadeIn() Hiện phần tử từ từ
.fadeOut() Ẩn phần tử từ từ
.fadeToggle() Hiện nếu đang ẩn và ẩn nếu đang hiện
.fadeTo() Thay đổi phần tử đến một opacity nhất định.
Slide.slideDown() Hiện theo kiểu kéo phần tử xuống..slideUp() Hiện theo kiểu kéo phần tử lên..slideToggle() Kéo phần tử lên nếu phần tử đang hiện và ngược lại
Animation .animate() Hoạt anh (thay đổi một phần tử từ trạng thái này sang
trạng thái khác theo hiệu ứng hoạt ảnh)
II. S d ng jquery.ử ụ 3. jQuery action:
Các nhóm thao tác cơ bản với html/css: Get/Set content: lấy/đặt nội dung cho phần tử html.
Add: cung cấp các phương thức chèn nội dung vào tài liệu.
Remove: cung cấp các phương thức xóa phần tử khỏi tài liệu
Css classes: cung cấp các phương thức thao tác với css.
Dimensions: cung cấp các phương thức thao tác với kích thước của phần tử.
II. S d ng jquery.ử ụ 3. jQuery action:
Các nhóm thao tác cơ bản với html/css:
Nhóm Tên hàm Ý nghĩa
Get/Set content
.text() Get/set nội dung text của phần tử được chọn.
.html() Get/set nội dung của phần tử được chọn bao gồm cả các thẻ HTML.
.val() Get/set giá trị của các phần tử của form.
.attr() Get/set giá trị cho thuộc tính của các phần tử html.
Add
.append() Thêm nội dung vào cuối phần tử
.prepend() Thêm nội dung vào đầu phần tử
.after() Thêm nội dung vào sau phần tử
.before() Thêm nội dung vào trước phần tử.
Remove .remove() Xóa tất cả các phần tử được chọn..empty() Xóa tất cả các phần tử con của phần tử được chọn.
II. S d ng jquery.ử ụ 3. jQuery action:
Các nhóm thao tác cơ bản với html/css:Nhóm Tên hàm Ý nghĩa
CSS
.addClass() Thêm một hoặc nhiều class vào phần tử được chọn.
.removeClass() Xóa một/nhiều class khỏi phần tử được chọn
.toggleClass() Thêm một class vào phần tử được chọn nêu chưa có class đó và ngược lại.
.css() Get/set một/nhiều thuộc tính css cho phần tử.
Dimensions
.width() Get/set độ rộng của phần tử (không tính padding, border và margin)
.height() Get/set chiều cao của phần tử (không tính padding, border và margin)
.innerWidth() Trả về độ rộng của phần tử (bao gồm padding)
.innerHeight() Trả về chiều cao của phần tử (bao gồm padding)
.outerWidth() Trả về độ rộng của phần tử (bao gồm padding và border)
.outerHeight() Trả về chiều cao của phần tử (bao gồm padding và border)
II. S d ng jquery.ử ụ 4. Anonymous function (hàm nặc danh):
Là hàm không có tên và được viết trực tiếp trong phần tham số của các action/event.
Ví dụ:
$("p").click(function () {$(this).hide();
});
II. S d ng jquery.ử ụ 4. Anonymous function (hàm nặc danh):
Thay vì viết theo kiểu anonymous function như trên, có thể viết theo kiểu bình thường như sau:.
$("p").click(hideElement);
function hideElement(){
$(“p”).hide();
}
II. S d ng jquery.ử ụ 5. Xử lý sự kiện trong jquery:
Gán sự kiện và xử lý sự kiện:
Cú pháp: $(doi_tuong).ten_su_kien(ham_dieu_khien).
Ten_su_kien: bảng một số sự kiện DOM.
Ham_dieu_kien: hàm điều khiển của sự kiện khi sự kiện phát sinh.
II. S d ng jquery.ử ụ 5. Xử lý sự kiện trong jquery:
Gán sự kiện và xử lý sự kiện: Ví dụ: để gán sự kiện clik vào tất cả các đoạn văn trên 1 trang:
$("p").click(); Khi clik vào thì đoạn văn sẽ ẩn đi:
$("p").click(function () {$(this).hide();
});
II. S d ng jquery.ử ụ 5. Xử lý sự kiện trong jquery:
Hủy sự kiện đã gán vào đối tượng: Hủy theo tên sự kiện:
$(doi_tuong).unbind(“ten_su_kien”); Hủy toàn bộ sự kiện:
$(doi_tuong).unbind();
II. S d ng jquery.ử ụ 5. jQuery AJAX.
AJAX (Asynchronous JavaScript and XML): được dùng để trao đổi dữ liệu với server, cập nhật lại một phần website mà không phải reload lại cả trang.
Một số hàm cơ bản để sử dụng:
Tham khảo thêm tại: http://api.jquery.com/category/ajax/
Nhóm Tên hàm Ý nghĩa
AJAX
.load() Lấy dữ liệu từ server và đặt chúng vào trong phần tử được chọn.
.get() Request dữ liệu từ server với giao thức HTTP GET REQUEST
.post() Request dữ liệu từ server với giao thức HTTP POST REQUEST.
II. S d ng jquery.ử ụ
6. jquery traversing: Jquery traversing được hiểu là di chuyển qua, được sử dụng để
tìm hoặc chọn các phần tử trong HTML dựa trên mối quan hệ với các phần từ khác.
Bắt đầu bằng một lựa chọn, di chuyển qua lựa chọn này cho đến khi đến được với các phần tử mong muốn.
II. S d ng jquery.ử ụ Cây gia đình:
II. S d ng jquery.ử ụ Tổ tiên:
Phương thức parent(): Cho phép đi lên cha trực tiếp của phần tử được chọn.
Phương thức parents(): Cho phép đi lên tất cả tổ tiên của phần tử được chọn.
Sử dụng tham số tùy chọn để lọc, tìm kiếm tổ tiên.
Phương thức parentsUntil(): Trả về tất cả các phần tử tổ tiên giữa 2 đối số được chọn
II. S d ng jquery.ử ụ Con cháu:
Phương thức children(): Trả về con trực tiếp của phần tử được chọn.
Sử dụng tham số tùy chọn để lọc, tìm kiếm phần tử cần tìm.
Phương thức find(): Trả về tất cả con của phần tử được chọn.
Sử dụng tham số tùy chọn để lọc phần tử cần tìm, đi đến hậu duệ cuối cùng.
II. S d ng jquery.ử ụ
Anh chị em: Phương thức siblings():
Trả về tất cả anh chị em ruột của phần tử được chọn.
Sử dụng tham số tùy chọn để lọc anh chị em cần tìm.
Phương thức next(): Trả về anh chị em tiếp theo của phần tử được chọn, chỉ trả lại 1 phần
tử.
Phương thức nextAll(): Trả về tất cả anh chị em của phần tử được chọn.
Phương thức nextUntil(): Trả về các phần tử anh chị em tiếp theo giữa 2 phần tử được chọn
II. S d ng jquery.ử ụ
Anh chị em: Các phươn thức Prev(), prevAll(), prevUntil cách làm việc cũng
giống như các phương thức trên, với chức năng ngược lại, trả về các yếu tố anh chị em trước.
II. S d ng jquery.ử ụ Lọc:
Phương thức first(): Trả về phần tử đầu tiên của yếu tố được chọn.
Phương thức last(): Trả về phần tử tiếp theo của yếu tố được chọn.
Phương thức eq(): Trả về một phần tử với một chỉ số cụ thể của yếu tố được chọn.
Các con số bắt đầu từ 0 do đó yếu tố đầu tiên là 0 chứ không phải 1.
Phương thức filter(): Trả về các phần tử phù hợp với tiêu chí.
Phương thức not(): Trả về các phần tử không phù hợp với tiêu chí.