Top Banner
jQuery Nguyễn Duy An 10110001 Phan Dương Hiền 10110035 Nguyễn Trung Nguyên 10110073 Lê Duy Trung 10110124 Nguyễn Minh Giàu 10110032
25

Jquery traversing

Jan 19, 2017

Download

Technology

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Jquery traversing

jQueryNguyễn Duy An 10110001Phan Dương Hiền 10110035Nguyễn Trung Nguyên 10110073Lê Duy Trung 10110124Nguyễn Minh Giàu 10110032

Page 2: Jquery traversing

Nội dung• I. Jquery.

• II. Jquery UI.• 1. Effect.

• 2. Interaction.

• 3. Widget.

• III. Jquery Mobile.

Page 3: Jquery traversing

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

Page 4: Jquery traversing

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ọ.

Page 5: Jquery traversing

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.

Page 6: Jquery traversing

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”.

Page 7: Jquery traversing

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/

Page 8: Jquery traversing

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.

Page 9: Jquery traversing

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)

Page 10: Jquery traversing

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ử.

Page 11: Jquery traversing

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.

Page 12: Jquery traversing

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)

Page 13: Jquery traversing

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();

});

Page 14: Jquery traversing

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();

}

Page 15: Jquery traversing

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.

Page 16: Jquery traversing

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();

});

Page 17: Jquery traversing

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();

Page 18: Jquery traversing

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.

Page 19: Jquery traversing

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.

Page 20: Jquery traversing

II. S d ng jquery.ử ụ Cây gia đình:

Page 21: Jquery traversing

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

Page 22: Jquery traversing

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.

Page 23: Jquery traversing

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

Page 24: Jquery traversing

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.

Page 25: Jquery traversing

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í.