JQuery tiếng việt - Lê Hùng

change: sự kiện này được gọi khi giá trị của một radio hoặc một checkbox được thay đổicheck - uncheck.. jQuery - Mouse Event Bài viết này sẽ giới thiệu một số ví dụ đơn giản về các sự k

Trang 1

Mục lục

JQUERY 2

jQuery - Căn bản 3

jQuery - Event 4

jQuery - Mouse Event 5

jQuery - hàm xử lý style 8

jQuery - Selector 13

jQuery - mouse hover 14

jQuery - effect 16

jQuery - append và prepend 19

jQuery - appendTo và prependTo 20

jQuery và hàm each 21

jQuery - html và text 24

jQuery - contains selector 26

jQuery - XML 27

jQuery - empty và remove 29

jQuery - ajax 33

Trang 2

T ổng quan về các hàm trong jquery

Tài liệu tham khảo

http://w3schools.com/jquery/jquery_ref_selectors.asp http://www.visualjquery.net/

http://api.jquery.com/

Trang 3

2 Tải file jQuery.js về máy của mình và sử dụng như file js cá nhân

Sử dụng jQuery như thế nào?

Dùng từ khóa định nghĩa bởi jQuery Có hai từ khóa: jQuery và $

VD: jQuery("#test") hoặc $("#test")

Sử dụng jQuery để truy xuất tới một Element trong HTML như thế nào?

Trước tiên, một element(là một thẻ trong html như div, table, ) có hai thuộc tính là id và name Để truy

xuất tới một element có 2 cách sau:

1 Với ID: jQuery("#element_id") hoặc $("#element_id")

2 Với name: jQuery("[name='element_name']") hoặc $("[name='element_name']") Với element name bạn sẽ được trả ra một mảng các element có cùng name

3 Ví dụ element id: Click vào button sẽ hiển thị ra alert

Ví dụ element name: Check vào một radio sẽ hiển thị alert

<input name="cks" type="radio" value="radio1"/>radio 1

Trang 4

jQuery - Event

Như ta đã biết các thẻ trong HTML thường hỗ trợ các sự kiện như: onclick, onkeydown, onmousedown thường dưới dạng attribute và chúng ta phải định nghĩa hàm cho nó theo dạng sau:

Vậy câu hỏi đặt ra là: jQuery có hỗ trợ cho chúng ta gọi những sự kiện này hay không?

Câu trả lời là có jQuery hỗ trợ cho chúng ta hầu như là đầy đủ những sự kiện Một số sự kiện thường dùng được jQuery hỗ trợ như là:

Mouse event(sự kiện chuột)

1 click: sự kiện này được gọi khi có một click chuột có nghĩa là bao gồm nhấn trái chuột

xuống và nhả ra(mouse down and mouse up)

2 mousedown: sự kiện này được gọi khi vừa nhấn trái chuột

3 mouseup: sự kiện này được gọi khi nhả chuột trái

4 mouseenter: sự kiện này được gọi khi con trỏ chuột di chuyển vào vùng quy định

5 mouseleave: sự kiện này được gọi khi con trỏ chuột rời khỏi vùng quy định

6 mousemove: sự kiện này được gọi khi con trỏ chuột di chuyển bên trong vùng quy định Keyboard event(sự kiện bàn phím)

1 keypress: sự kiện này được gọi khi một phím trên bàn phím được nhấn và nhả ra

2 keydown: sự kiện này được gọi khi một phím trên bàn phím được nhấn xuống(chưa

nhả)

3 keyup: sự kiện này được gọi khi một phím trên bàn phím được nhả ra

Other event(sự kiện khác)

1 focus: sự kiện xảy ra khi ta đang focus vào 1 element(con nháy trong textbox, viền trên

button, radio, checkbox )

2 blur: ngược lại focus

3 change: sự kiện này được gọi khi giá trị của một radio hoặc một checkbox được thay

đổi(check - uncheck)

4 live và bind: dùng để gán hàm xử lý của một element

5 scroll: bắt sự kiện của thanh scrollbar

Cú pháp chung

$("#element_id").event_name(function(ObjectEventHandle){ code here });

$("[name='element_name']").event_name(function(ObjectEventHandle){ code here });

Có thể có hoặc không có ObjectEventHandle

Trang 5

jQuery - Mouse Event

Bài viết này sẽ giới thiệu một số ví dụ đơn giản về các sự kiện chuột(mouse event) trong jQuery:

Tình huống: Nhấn trái chuột vào ô vuông xám bên trái thì ô vuông trắng bên phải sẽ hiển thị

dòng chữ tương ứng với sự kiện(mouse down hoặc mouse up)

Trang 6

$("#rect_left_1").mouseup(function(){

$("#rect_right_1").html($("#rect_right_1").html()+" mouseup"); });

3 mouseenter, mouseleave và mousemove

Tình huống: Di chuyển chuột vào ô vuông xám bên trái thì ô vuông trắng bên phải sẽ hiển thị số

lần sự kiện xảy ra (mouse enter và mouse leave), riêng sự kiện mouse move thì sẽ hiển thị tọa

độ của con trỏ chuột trong ô xám

Trang 7

$(document).ready(function(){

$("#rect_left_2").mouseenter(function(){

var enter = $("#enter").html();

enter++;

Tình huống: Di chuyển chuột trong ô vuông xám bên trái thì ô vuông trắng bên phải sẽ hiển thị

các thông số pageX, pageY, screenX,

<span>pageX: <span id="page_x">0</span>,

pageY: <span id="page_y">0</span></span>

<span>clientX: <span id="client_x">0</span>,

clientY: <span id="client_y">0</span></span>

<span>screenX: <span id="screen_x">0</span>,

screenY: <span id="screen_y">0</span></span>

</div>

Trang 8

</div>

jQuery - hàm xử lý style

Bài viết này nói về một số hàm dùng để can thiệp vào style của một element

1 css: Dùng để lấy giá trị của một property của element trên website hoặc thiết lập giá trị

cho css cho property

o css (css property name): trả về giá trị của một property

o css (css property, value): thiết lập giá trị cho một css property của element

o css ( {list of properties} ): dùng để thiết lập một nhóm các thuộc tính css

Tình huống: Thay đổi CSS cho ô vuông màu xám:

 Nút Get: lấy ra giá trị của thuộc tính background-color

 Nút Set: thay đổi giá trị background-color

 Nút Group sẽ gán lại nhóm giá trị background-color, width, height

Trang 9

</div>

2 Các hàm thao tác với Attribute của một element

o attr: Dùng để lấy giá trị của một attribute của element hoặc gán giá trị cho một attribute

 attr (attribute name): trả về giá trị của một attribute của một element

 attr (attribute name, value): thiết lập giá trị cho một attribute của element

 attr ( {list of properties} ): dùng để thiết lập một nhóm các attribute cho element

o removeAttr: Dùng để gở bỏ một attribute của một element

 removeAttr (attribute name): gỡ bỏ một attribute ra khỏi một element

Tình huống: Thay đổi attribute cho ảnh (thẻ img)

o Nút Get: lấy ra giá trị trong attribute src của thẻ img bên trái

o Nút Set One Attribute: Gán lại giá trị cho attribute src của thẻ img(đổi hình hiển thị)

o Nút Set Group Attribute: Gán lại giá cho các attribute src, title, alt của ảnh Để kiểm tra bạn rê chuột vào ảnh sẽ thấy hiện lên dòng tooltip sesshomaru image

o Nút Remove Attribute: Gỡ bỏ thuộc tính title của ảnh( rê chuột vào ảnh để kiểm tra ảnh

Trang 10

jQuery("#myImage").attr("src","http://3.bp.blogspot.com/_wOkFJyJxw44/TDnoOg0ZO4I/AAAAAAAAABI/5AbUI47SOEU/s320/sesshomaru.jpeg");

});

jQuery("#butGroupAttr").click(function(){

jQuery("#myImage").attr({src:"http://1.bp.blogspot.com/_wOkFJyJxw44/TDnoO_M2u0I/AAAAAAAAABQ/nb9K3zfolxg/s320/thSesshomaruChibi.jpg",title:"Sesshomaru image",alt:"jquery attr image"});

</div>

3 Các hàm thao tác về class

o .addClass (class name): Dùng để gán một class cho một element

o .removeClass (class name): gỡ bỏ class ra khỏi attribute class của element

Tình huống: Thay đổi class cho table

o Nút Odd: dòng lẻ trong table sẽ xuất hiện màu nền vàng nhạt cho dòng đó

o Nút Even: dòng chẵn trong table sẽ xuất hiện màu nền xanh nhạt cho dòng đó

o Nút Reverse: đảo ngược hai class của dòng chẵn và lẻ

Trang 11

var odd = false;

var even = false;

Trang 13

Một số câu hỏi thường gặp

1 Sự khác nhau giữa hàm css và hàm addClass?

Điểm khác nhau cơ bản nhất là hàm addClass thao tác trên attribute class của một element trong khi đó hàm css thao tác trên attribute style

2 Tại sao addClass rồi mà element vẫn không thay đổi ?

Bạn nên kiểm tra lại style của element vì class có độ ưu tiên thấp hơn style Ở ví dụ phía trên dòng tr đầu tiên có attribute style cố định do đó khi addClass vào các dòng lẻ các properties của class không thể đè lên được các properties trong attribute style được vì độ ưu tiên thấp hơn

3 Dùng hàm css để add một property cho một element vậy có cách nào remove property đó ra hay không?

Câu trả lời là không Do hàm css thao tác trên attribute style do đó khi đã add một property vào rồi thì bạn không thể remove nó ra mà chỉ có thể thay đổi giá tri của nó Nếu muốn remove được thì tốt nhất là định nghĩa hai class khác nhau và sử dùng hàm addClass và removeClass

4 Tại sao dùng hàm addClass nhiều lần thì thuộc tính class không đổi?

Do hàm addClass thao tác trên attribute class của element Trên attribute class có thể tồn tại song song nhiều class khác nhau Do đó khi dùng liên tiếp thì nó sẽ tự động thêm class vào và các properties trong hai class sẽ được overwrite lẫn nhau VD: class="class1" dùng tiếp hàm addClass("class2") ta sẽ có class="class1 class2"

jQuery - Selector

jQuery selector là gì?

jQuery selector là một cách gọi đến một hoặc nhiều đối tượng có một số đặc tính nhất định

Ví dụ: gọi theo name, loại element, theo class,

Các selector căn bản:

1 #element_id: Trả về một đối tượng có thuộc tính id được truyền vào

2 [name='element_name']: Trả về một nhóm đối tượng có thuộc tính name được truyền

vào

3 element_type: Trả về một nhóm đối tượng cùng một loại VD:

- jQuery("div") sẽ trả về toàn bộ các đối tượng là thẻ div

- jQuery("form input") sẽ trả về toàn bộ các đối tượng là thẻ input nằm trong thẻ form

- jQuery("#form_id input) sẽ trả về toàn bộ các đối tượng là thẻ input nằm trong thẻ form

có id là id truyền vào

4 Kết hợp: cách gọi này gần giống như css sẽ tính từ trái sang phải theo thứ tự cha con

- jQuery("#test_table tr") trả ra toàn bộ các thẻ tr của table có id là test_table

- jQuery("div span") trả ra toàn bộ các thẻ span là con của thẻ div

- jQuery("div p span") trả ra toàn bộ các thẻ span thẻ con của p và p phải là thẻ con của div

Một số phần mở rộng của selector:

Trang 14

1 .class_name : Thường dùng với selector theo name và type Trả ra một nhóm các đối

tượng có class name tương ứng VD:

- jQuery("div.test") sẽ trả ra một nhóm các đối tượng là thẻ div có thuộc tính class là test

- jQuery("#my_ul li.select") trả ra một nhóm các đối tượng là thẻ li có class là select và thẻ

li là con của thẻ ul có id là my_ul

2 :selected : Dùng để lấy ra các đối tượng có thuộc tính selected là true VD:

- jQuery("option:selected") sẽ trả ra một nhóm các option có thuộc tính selected bằng true

3 :checked : Thường dùng với checkbox và radio để lấy ra những đối tượng được

checked VD:

- jQuery("[name='checkbox_list_name']:checked") sẽ trả ra một nhóm các checkbox theo tên truyền vào có thuộc tính checked bằng true

- jQuery("[name='radio_name']:checked") sẽ trả ra một nhóm các radio theo tên truyền vào

có thuộc tính checked bằng true

4 :disabled :Trả về các thẻ có thuộc tính disabled VD:

- jQuery(":disabled") trả về toàn bộ các thẻ có thuộc tính disabled

- jQuery("input:disabled") trả về toàn bộ các thẻ input có thuộc tính disabled

- jQuery("form input:disabled") trả về toàn bộ các thẻ input nằm trong thẻ form có thuộc tính disabled

5 :odd : Trả về các thẻ có số thứ tự lẻ của đối tượng được chọn VD:

- jQuery("li:odd") trả về toàn bộ các thẻ li trên toàn trang web có thứ tự lẻ(1, 3, 5 )

- jQuery("#ul_list li:odd") trả về toàn bộ các thẻ li con của đối tượng có id là ul_list có thứ

tự lẻ

- jQuery("tr:odd") trả về toàn bộ các thẻ tr trên toàn trang web có thứ tự lẻ(1, 3, 5 )

- jQuery("#mytable tr:odd") trả về toàn bộ các thẻ tr con của đối tượng có id là mytable có thứ tự lẻ

6 :even : Trả về các thẻ có số thứ tự chẵn của đối tượng được chọn VD:

- jQuery("li:even") trả về toàn bộ các thẻ li trên toàn trang web có thứ tự chẵn(2, 4, 6 )

- jQuery("#ul_list li:even") trả về toàn bộ các thẻ li con của đối tượng có id là ul_list có thứ

tự chẵn

- jQuery("tr:even") trả về toàn bộ các thẻ tr trên toàn trang web có thứ tự chẵn(2, 4, 6 )

- jQuery("#mytable tr:even") trả về toàn bộ các thẻ tr con của đối tượng có id là mytable có thứ tự chẵn

jQuery - mouse hover

Bài viết này đưa ra một ví dụ đơn giản về cách sử dụng event mouse hover trong jQuery Chúng ta thường sử dụng hover của css để thay đổi style của một element Nếu ta muốn những xử lý phức tạp được thực thi khi hover thì css không thể đáp ứng được => Vậy ta phải tự viết

Syntax: hover(MouseInFunction, MouseOutFunction)

 MouseInFunction: Hàm được gọi tới khi con trỏ di chuyển vào element

 MouseOutFunction: Hàm được gọi tới khi con trỏ di chuyển ra khỏi element

Ví dụ: Khi di chuyển con trỏ chuột vào ảnh thì ảnh sẽ được phóng to ra, khi con trỏ chuột rời khỏi ảnh

kích thước ảnh trở lại như cũ

Trang 15

Code

jQuery(document).ready(function(){

jQuery("[name='hover_image']").css("top",(jQuery("#hover_div").position().top + 20)+"px");

var left = 40;

jQuery("[name='hover_image']").each(function(i,val){

jQuery(this).css("left",(jQuery("#hover_div").position().left + left)+"px");

<div id="hover_div"

style="height:120px;background-color:#FBF9EA;border:1px solid black;">

<img name="hover_image"

src="http://1.bp.blogspot.com/_wOkFJyJxw44/TE1bCiez8WI/AAAAAAAAABk/7Yry

Trang 16

nOgOOLw/s400/puppy"/>

src="http://1.bp.blogspot.com/_wOkFJyJxw44/TE1bCiez8WI/AAAAAAAAABk/7YrynOgOOLw/s400/puppy"/>

</div>

jQuery - effect

Trong bài này sẽ giới thiệu một số phương thức tạo và quản lý hiệu ứng mà jQuery đã cung cấp

 slideUp( [thời gian], [hàm thực thi khi hiệu ứng thực hiện xong])

 slideDown( [thời gian], [hàm thực thi khi hiệu ứng thực hiện xong])

 fadeIn( [thời gian], [hàm thực thi khi hiệu ứng thực hiện xong])

 fadeOut( [thời gian], [hàm thực thi khi hiệu ứng thực hiện xong])

Các phương thức này có thể có hoặc không có tham số Ngoài ra, ta có thể dùng chuỗi "slow" and "fast"

để qui định thời gian cho hiệu ứng

var fade = false;

var slide = false;

Trang 17

<img

src="http://1.bp.blogspot.com/_wOkFJyJxw44/TDnoO_M2u0I/AAAAAAAAABQ/nb9K3zfolxg/s320/thSesshomaruChibi.jpg"/>

Định dạng
Số trang	34
Dung lượng	908,93 KB