Tài liệu jQuery tiếng Việt

Tài liệu jQuery tiếng ViệtTài liệu jQuery tiếng Việt giới thiệu đến các bạn những nội dung về jQuery, tổng quan về jQuery, thuộc tính trong jQuery, thao tác DOM trong jQuery, xử lý sự kiện trong jQuery,... Với các bạn đang học và nghiên cứu về Hệ điều hành mày tính thì đây là tài liệu tham khảo hữu ích.

Trang 1

http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 1

Mục lục

Giới thiệu về jQuery 5

Đối với độc giả 5

Điều kiện tiền đề 5

Thực hành trực tuyến 5

Tổng quan về jQuery 5

jQuery là gì? 5

Cách sử dụng jQuery? 6

Cài đặt jQuery nội bộ 6

Ví dụ 7

Sử dụng CDN 7

Ví dụ 7

Cách để gọi một hàm thư viện jQuery? 8

Cách sử dụng Custom Script trong jQuery? 9

Sử dụng nhiều thư viện trong jQuery 10

Những gì có trong Trang sau? 10

Cơ bản về jQuery 11

Đối tượng String 11

Đối tượng Number trong jQuery 11

Đối tượng Boolean trong jQuery 11

Đối tượng Object trong jQuery 12

Đối tượng Array trong jQuery 12

Hàm (Function) trong jQuery 12

Các tham số trong jQuery 13

Context trong jQuery 14

Phạm vi (Scope) trong jQuery 14

Callback trong jQuery 15

Các Closure trong jQuery 15

Trang 2

Proxy Pattern trong jQuery 16

Các hàm có sẵn trong jQuery 17

Document Object Model (DOM) 18

Selector trong jQuery 19

Hàm cơ sở $() trong jQuery 20

Ví dụ 20

Cách sử dụng các Selector trong jQuery? 21

Ví dụ về Selector trong jQuery 22

Thu ộc tính trong jQuery 28

Nhận giá trị thuộc tính trong jQuery 28

Ví dụ 28

Thiết lập giá trị thuộc tính trong jQuery 29

Ví dụ 29

Áp dụng Style trong jQuery 30

Ví dụ 30

Các phương thức Atribute trong jQuery 31

Ví dụ 33

Truy cập DOM trong jQuery 35

Tìm kiếm các phần tử bởi chỉ mục (index) trong jQuery 35

Ví dụ 36

Lọc các phần tử trong jQuery 37

Ví dụ 38

Xác định vị trí các phần tử con trong jQuery 39

Ví dụ 39

Các phương thức DOM Filter trong jQuery 40

Các phương thức DOM Traversing trong jQuery 41

CSS Selector trong jQuery 43

Áp dụng các thuộc tính CSS trong jQuery 43

Ví dụ 43

Trang 3

Áp dụng nhiều thuộc tính CSS trong jQuery 45

Ví dụ 45

Thiết lập độ rộng và chiều cao phần tử trong jQuery 46

Ví dụ 46

Các phương thức CSS trong jQuery 47

Thao tác DOM trong jQuery 49

Thao tác nội dung trong jQuery 50

Ví dụ 50

Thay thế phần tử DOM trong jQuery 51

Ví dụ 51

Gỡ bỏ các phần tử DOM trong jQuery 52

Ví dụ 53

Chèn các phần tử DOM trong jQuery 54

Ví dụ 54

Các phương thức thao tác DOM trong jQuery 55

Xử lý sự kiện trong jQuery 58

Bind các Event Handler trong jQuery 59

Gỡ bỏ Event Handler trong jQuery 60

Các loại sự kiện trong jQuery 61

Đối tượng Event trong jQuery 63

Các thuộc tính của đối tượng Event trong jQuery 63

Ví dụ 65

Các phương thức của đối tượng Event trong jQuery 67

Các phương thức thao tác đối tượng Event trong jQuery 67

Các phương thức Event Helper trong jQuery 69

Các phương thức Trigger trong jQuery 69

Phương thức Binding trong jQuery 69

jQuery Ajax 73

Tải dữ liệu một cách đơn giản với jQuery 73

Trang 4

Cú pháp 73

Ví dụ 74

Nhận dữ liệu JSON trong jQuery 75

Cú pháp 75

Ví dụ 75

Truyền dữ liệu tới Server trong jQuery 77

Ví dụ 77

Các phương thức jQuery AJAX 78

Các sự kiện jQuery AJAX 80

Hiệu ứng trong jQuery 80

Hiển thị và ẩn các phần tử trong jQuery 81

Cú pháp 81

Ví dụ 81

Toggle các phần tử trong jQuery 83

Cú pháp 83

Ví dụ 83

Các phương thức jQuery Effect 84

Các hiệu ứng trên cơ sở UI Library trong jQuery 87

Plugins trong jQuery 88

Cách sử dụng Plugins trong jQuery 89

Cách để phát triển một Plug-in trong jQuery 90

Ví dụ 90

Tài liệu tham khảo về jQuery 92

Các đường link hữu ích về jQuery 92

Các JavaScript Framework khác 92

Trang 5

Giới thiệu về jQuery jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động và tương tác Ajax Với jQuery, khái niệm Rapid Web Development đã không còn quá xa lạ

Loạt bài hướng dẫn của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint

Đối với độc giả Loạt bài hướng dẫn này được thiết kế cho những nhà lập trình muốn học những kiến thức cơ bản

về jQuery và các khái niệm về chương trình theo các bước đơn giản và dễ dàng Bài hướng dẫn sẽ cung cấp cho bạn sự hiểu biết đầy đủ về jQuery với những ví dụ phù hợp

Điều kiện tiền đề Trước khi tiến hành học tập với loạt bài này, bạn nên có kiến thức về HTML, CSS, JavaScript, Document Object Model (DOM) và bất kỳ bộ soạn thảo (Text Editor) nào khác Khi chúng ta phát triển các ứng dụng trên web sử dụng jQuery, nó sẽ tốt nếu bạn hiểu cách các ứng dụng trên web

và internet làm việc

Thực hành trực tuyến Với mỗi chủ đề trong bài học, chúng tôi sẽ cung cấp cho các bạn các ví dụ minh họa, từ đó giúp bạn hiểu sâu hơn cũng như cảm giác thích thú với bài hướng dẫn của chúng tôi Hãy chọn tùy

chọn Try it ở góc trên cùng bên phải mỗi ví dụ để thực hành ngay

Tổng quan về jQuery jQuery là gì?

jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với một

phương châm tuyệt vời: Write less, do more

jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động và tương tác Ajax Với jQuery, khái niệm Rapid Web Development đã không còn quá xa lạ

jQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa các tác vụ đa dạng với việc viết ít code hơn Dưới đây liệt kê một số tính năng tối quan trọng được hỗ trợ bởi jQuery:

Trang 6

 Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse một cách dễ

dàng như sử dụng CSS, và chỉnh sửa nội dung của chúng bởi sử dụng phương tiện

Selector mã nguồn mở, mà được gọi là Sizzle

 Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc xử lý các sự kiện

đa dạng mà không làm cho HTML code rối tung lên với các Event Handler

 Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính năng và phản hồi

tốt bởi sử dụng công nghệ AJAX

 Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt mà bạn có thể sử

dụng trong các Website của mình

 Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB (gzipped)

 Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợ hầu hết bởi các

trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+

 Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector và cú pháp

 Sử dụng từ CDN (CDN Based Version) − Bạn có thể include thư viện jQuery vào trong

HTML code một cách trực tiếp từ Content Delivery Network (CDN)

Cài đặt jQuery nội bộ

 Truy cập trang https://jquery.com/download/ để tải phiên bản jQuery mới nhất

 Bây giờ đặt file jquery-2.1.3.min.js vào trong một thư mục trong Website của bạn, ví dụ

/jquery

Trang 7

Ví dụ

Bây giờ bạn có thể include thư viện jquery vào trong HTML file của bạn như sau:

<html>

<head>

<title> The jQuery Example </title>

$ ( document ) ready ( function (){

document write ( "Hello, World!" );

Trang 8

src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >

</script>

$ ( document ) ready ( function (){

document write ( "Hello, World!" );

Cách để gọi một hàm thư viện jQuery?

Cũng tương tự như JavaScript, trước khi chúng ta sử dụng các đoạn code của jQuery để đọc hay chỉnh sửa các đối tượng DOM, chúng ta cần đảm bảo rằng chúng ta bắt đầu thêm các sự kiện ngay sau khi DOM sẵn sàng

Nếu bạn muốn một sự kiện làm việc trên trang của bạn, bạn nên gọi nó bên trong hàm

$(document).ready() Mọi thứ bên trong sẽ tải ngay sau khi DOM được tải và trước khi nội dung trang được tải

Để làm điều này, chúng ta đăng ký một sự kiện đã sẵn sàng cho tài liệu như sau:

$ document ) ready ( function ()

// do stuff when DOM is ready

});

Trang 9

Để gọi bất kỳ hàm thư viện jQuery nào, sử dụng các thẻ HTML script như dưới đây:

<html>

<head>

</script>

$ ( document ) ready ( function ()

$ ( "div" ) click ( function () alert ( "Hello, world!" );});

Nó sẽ cho kết quả sau:

Cách sử dụng Custom Script trong jQuery?

Nó thực sự là tốt hơn khi viết riêng cho bạn Custom Code trong một Custom JavaScript

file:custom.js, như sau:

/* Filename: custom.js */

$ ( "div" ) click ( function ()

alert ( "Hello, world!" );

Trang 10

Bạn có thể sử dụng nhiều thư viện cùng nhau mà không xảy ra xung đột giữa chúng Ví dụ, bạn có thể sử dụng các thư viện jQuery và thư viện MooTool JavaScript cùng với nhau

Bạn có thể kiểm tra phương thức: jQuery - Phương thức noConflict để biết thêm chi tiết

Những gì có trong Trang sau?

Đừng bận tâm quá nhiều nếu bạn không hiểu các ví dụ trên Bạn sẽ sớm hiểu chúng trong các chương tiếp theo

Trong chương tới, chúng tôi sẽ đề cập một số khái niệm cơ bản mà đến từ qui ước của JavaScript

Trang 11

Cơ bản về jQuery jQuery là một Framework được xây dựng dựa trên các tính năng của JavaScript Vì thế trong khi phát triển các ứng dụng sử dụng jQuery, bạn có thể sử dụng tất cả các hàm và các tính năng khác được bổ trợ trong JavaScript

Chương này sẽ giải thích hầu hết khái niệm cơ bản thường được sử dụng trong các ứng dụng xây dựng trên jQuery

Đối tượng String

Một chuỗi trong JavaScript là một đối tượng không đổi chứa 0, 1 hoặc nhiều ký tự

Sau đây là một ví dụ hợp lệ về một String trong JavaScript

"This is JavaScript String"

'This is JavaScript String'

'This is "really" a JavaScript String'

"This is 'really' a JavaScript String"

Đối tượng Number trong jQuery

Đối tượng Number trong JavaScript là định dạng độ chính xác kép (64 bit) theo chuẩn IEEE 754 Chúng là không đổi, như đối tượng String

Sau đây là ví dụ hợp lệ về một số trong JavaScript

5350

120.27

0.26

Đối tượng Boolean trong jQuery

Một Boolean trong JavaScript có thể nhận hoặc true hoặc false Nếu một số là 0, thì mặc định của

nó là false Nếu một chuỗi là trống, thì mặc định là false

Sau đây là các ví dụ hợp lệ về đối tượng Boolean trong JavaScript

true // true

false // false

0 // false

Trang 12

1 // true

"" // false

"hello" // true

Đối tượng Object trong jQuery

JavaScript hỗ trợ tốt khái niệm Object Bạn có thể tạo một Object bởi sử dụng Object Literal như sau:

var emp = {

name: "Zara",

age: 10

};

Bạn có thể viết và đọc các thuộc tính của một Object bởi sử dụng ký hiệu dấu chấm (.) như sau:

// Getting object properties

emp.name // ==> Zara

emp.age // ==> 10

// Setting object properties

emp.name = "Daisy" // <== Daisy

emp.age = 20 // <== 20

Đối tượng Array trong jQuery

Bạn có thể định nghĩa các mảng bởi sử dụng Array Literal như sau:

var x = [];

var y = [1, 2, 3, 4, 5];

Một mảng có một thuộc tính length là hữu ích cho tính lặp:

var x = [ , 2 , 4 ];

for var i = 0 i < x length ; i ++)

// Do something with x[i]

}

Hàm (Function) trong jQuery

Một hàm trong JavaScript có thể được đặt tên hoặc ẩn danh Một hàm được đặt tên có thể được

định nghĩa bởi sử dụng từ khóa function như sau:

Trang 13

function named (){

// do some stuff here

}

Một hàm ẩn danh có thể được định nghĩa theo cách tương tự như một hàm thông thường nhưng

nó sẽ không có bất kỳ tên nào

Một hàm ẩn danh có thể được gán tới một biến hoặc được truyền tới một phương thức như sau:

var handler = function (){

}

jQuery sử dụng rất nhiều hàm ẩn danh như sau:

$ document ) ready ( function (){

});

Các tham số trong jQuery

Các tham số trong JavaScript là một loại của Array mà có thuộc tính length Ví dụ sau giải thích về

Trang 14

Context trong jQuery

Từ khóa nổi tiếng trong JavaScript là this tham chiếu tới Context hiện tại Trong một hàm,this có

thể thay đổi, phụ thuộc cách hàm đó được gọi

// this refers to window.document

});

$ "div" ) click ( function ()

// this refers to a div DOM element

});

Bạn có thể xác định Context cho một lần hàm bởi sử dụng các phương thức call() vàapply()

Sự khác nhau giữa chúng là cách chúng truyền các tham số call() truyền tất cả các tham số thông qua các tham số tới hàm, trong khi apply() chấp nhận một mảng như là các tham số

function scope ()

console log ( this , arguments length );

}

scope () // window, 0

scope call ( "foobar" , [ , ]); //==> "foobar", 1

scope apply ( "foobar" , [ , ]); //==> "foobar", 2

Phạm vi của một biến là khu vực trong chương trình của bạn mà biến đó được định nghĩa Biến trong JavaScript sẽ chỉ có hai phạm vi:

 Các biến Global − Một biến Global có phạm vi chung, nghĩa là nó được định nghĩa ở mọi

nơi trong JavaScript code của bạn

 Các biến Local − Một biến Local sẽ chỉ nhìn thấy bên trong một hàm nơi nó được định

nghĩa Các tham số hàm luôn luôn là Local cho hàm đó

Trong thân của một hàm, một biến Local có quyền ưu tiên cao hơn biến Global mà có cùng tên

Trang 15

var myVar = "global" ; // ==> Declare a global variable

function

var myVar = "local" ; // ==> Declare a local variable

document write ( myVar ); // ==> local

}

Callback trong jQuery

Một callback là một hàm thuần JavaScript được truyền một số phương thức như là một tham số hoặc tùy chọn Một số callback là các sự kiện, được gọi để cung cấp cho người sử dụng cơ hội để phản ứng lại khi một trạng thái nào đó được kích hoạt

Hệ thống sự kiện trong jQuery sử dụng các callback này ở khắp mọi nơi, ví dụ:

$ "body" ) click ( function ( event ) {

console log ( "clicked: " event target );

Các Closure trong jQuery

Các Closure được tạo bất cứ khi nào một biến được định nghĩa bên ngoài phạm vi hiện tại được truy cập từ bên trong phạm vi nội bộ

Ví dụ sau chỉ cách biến counter là nhìn thấy trong các hàm create, increment, và print, nhưng

không nhìn thấy bên ngoài chúng

function create ()

var counter = 0

Trang 16

Pattern này cho phép bạn tạo các đối tượng với các phương thức, mà hoạt động trên dữ liệu, mà

không thấy được ở bên ngoài Bạn ghi nhớ rằng, data hiding là khái niệm rất cơ bản của các

chương trình hướng đối tượng

Proxy Pattern trong jQuery

Một Proxy là một đối tượng mà có thể được sử dụng để điều khiển sự truy cập tới phần tử khác

Nó thi hành cùng giao diện cho đối tượng khác này và truyền trên bất kỳ phương thức nào tới nó Đối tượng khác này thường được gọi là Real Subject

Một Proxy có thể được thuyết minh tại vị trí của Real Subject này và cho phép nó để được truy cập

ở chế độ từ xa Chúng ta có thể lưu giữ phương thức setArray của jQuery trong một Closure và

viết đè lên (overwrite) nó như sau:

( function ()

// log all calls to setArray

var proxied = jQuery fn setArray ;

jQuery fn setArray = function ()

console log ( this , arguments );

return proxied apply ( this , arguments );

};

Trang 17

})();

Ví dụ trên bao code của nó trong một hàm để ẩn biến proxied Sau đó, Proxy này log tất cả các lời

gọi phương thức và ủy thác lời gọi đó cho phương thức ban đầu Sử dụng apply(this, arguments) bảo đảm cho việc người gọi không thể chú ý về sự khác nhau giữa phương thức ban đầu và phương thức được ủy nhiệm

JavaScript đi kèm một tập hợp các hàm hữu ích gắn liền với nó Những phương thức này có thể được sử dụng để thao tác String, Number, và Date

Bảng dưới liệt kê các hàm JavaScript quan trọng:

STT Phương thức & Miêu tả

Trả về chỉ mục về sự xuất hiện đầu tiên bên trong việc gọi đối tượng String với giá trị

đã cho, hoặc -1 nếu không tìm thấy

5 length()

Trả về độ dài của chuỗi

Trang 18

Trả về giá trị chuỗi đang gọi được biến đổi thành chữ hoa

Bạn truy cập trang sau để có danh sách đầy đủ − Các hàm có sẵn trong JavaScript

Document Object Model (DOM)

DOM là một cấu trúc cây của các phần tử HTML đa dạng, như sau:

<html>

Trang 19

<p> This is second paragraph </p>

<p> This is third paragraph </p>

</div>

</body>

</html>

Sau đây là một số điểm quan trọng về cấu trúc cây trên:

 Thẻ <html> là ancestor (gốc hay là tổ tiên) của tất cả các phần tử khác; nói cách khác, tất

cả phần tử khác là con cháu của phần tử <html>

 Thẻ <head> và <body> không là hậu duệ (descendant), nhưng cũng là con của <html>

 Phần tử <p> là con của phần tử <div>, con của phần tử <body> và <html>, và là anh em của các phần tử <p> khác

Trong khi học các khái niệm jQuery, nó thực sự hữu ích khi bạn hiểu về DOM, nếu bạn chưa có khái niệm gì về DOM, tôi đề nghị bạn truy cập trang sau: DOM Tutorial

Selector trong jQuery

Thư viện jQuery khai thác sức mạnh của các CSS (Cascading Style Sheets) Selector để giúp

chúng ta truy cập nhanh và dễ dàng hơn tới các phần tử hoặc nhóm các phần tử trong DOM Một jQuery Selector là một hàm mà sử dụng các Expression để tìm ra sự kết nối của các phần tử

từ một DOM trên cơ sở tiêu chuẩn đã cho Theo cách đơn giản, bạn có thể nói rằng, Selector được

Trang 20

sử dụng để chọn một hoặc nhiều phần tử HTML bởi sử dụng jQuery Khi một phần tử được chọn, thì chúng ta có thể thực hiện các hoạt động đa dạng trên phần tử đã chọn đó

Hàm cơ sở $() trong jQuery

Factory Function có thể dịch là hàm cơ sở bởi vì đối với tôi, nó là nơi mọi thứ được tạo ra jQuery

Selector bắt đầu với ký hiệu đô la và cặp dấu ngoặc đơn $() Hàm cơ sở $() sử dụng ba khối trong

khi chọn các phần tử trong một tài liệu đã cho

STT Selector & Miêu tả

Biểu diễn một tên thẻ có sẵn trong DOM Ví dụ: $(‘p’) chọn tất cả đoạn văn trong phần

tử

2 Tag ID

Biểu diễn một tên thẻ có sẵn với ID đã cho trong DOM Ví dụ $('#some-id') chọn tất cả

phần tử đơn trong tài liệu mà có một ID là some-id

3 Tag Class

Biểu diễn một thẻ có sẵn với lớp đã cho trong DOM Ví dụ $('.some-class') chọn tất

cả các phần tử trong tài liệu mà có một lớp là some-class

Tất cả các mục trên có thể được sử dụng hoặc trên chính nó hoặc trong sự kết hợp với Selector khác Tất cả jQuery Selector xây dựng trên cùng qui tắc ngoại trừ một số “mẹo” (Tweaking)

Ghi chú − Hàm cơ sở $() là đồng nghĩa với một hàm jQuery() Vì thế trong trường hợp bạn đang

sử dụng bất kỳ thư viện JavaScirpt nào khác thì có thể xuất hiện xung đột ở đây, khi đó bạn có thể

đổi ký hiệu $ thành jQuery và bạn có thể sử dụng hàm jQuery() thay cho hàm$()

Ví dụ

Sau đây là ví dụ đơn giản sử dụng Tag Selecor Nó sẽ chọn tất cả phần tử vởi tên thẻ p và sẽ thiết

lập màu nền thành “yellow”

<html>

Trang 21

<head>

</script>

<p class = "myclass" > This is a paragraph </p>

<p id = "myid" > This is second paragraph </p>

<p> This is third paragraph </p>

</div>

</body>

</html>

Cách sử dụng các Selector trong jQuery?

Selector là rất hữu ích và sẽ cần yêu cầu ở mọi bước trong khi sử dụng jQuery Chúng nhận phần

tử chính xác khi bạn muốn từ tài liệu HTML của bạn

Bảng sau liệt kê các Selector cơ bản và giải thích về chúng bởi các ví dụ khi bạn click và link tương ứng:

Trang 22

Chọn các kết quả được tổ hợp từ tất cả các bộ chọn E, F hoặc G đã cho

Tương tự với các cú pháp và ví dụ trên, các ví dụ sau sẽ giúp bạn hiểu thêm về các loại khác nhau của các Selector hữu ích khác

Trang 23

Hàm Selector này nhận phần tử với id= "specialID"

Trang 24

12 $("p ~ ul")

Chọn tất cả phần tử được kết nối bởi <ul> mà theo sau một phần tử anh được kết nối bởi <p>

13 $("code, em, strong")

Chọn tất cả phần tử được kết nối bởi <code> or <em> hoặc <strong>

14 $("p strong, myclass")

Chọn tất cả phần tử được kết nối bởi <strong> mà là con của một phần tử được kết

nối bởi <p> cũng như tất cả các phần tử mà có một class là myclass

Trang 25

đương với myname

Trang 26

Trang 27

Chọn tất cả phần tử được kết nối bởi <li> mà chứa văn bản là second

Bạn có thể sử dụng tất cả các Selector trên với bất kỳ phần tử HTML/XML nào theo cách chung Ví

dụ, nếu Selector $("li:first") làm việc cho phần tử <li> thì khi đó, $("p:first") sẽ cũng làm việc cho

phần tử <p>

Trang 28

Thuộc tính trong jQuery Một số thành phần cơ bản nhất, chúng ta có thể thao tác với các phần tử DOM, là các đặc tính và các thuộc tính được gán cho các phần tử đó

Hầu hết những thuộc tính này là có sẵn thông qua JavaScript như là các thuộc tính DOM node Một số thuộc tính phổ biến hơn là:

Xem xét đoạn HTML code sau đánh dấu cho một phần tử image:

Trong việc đánh dấu phần tử này, tag name là img, và việc đánh dấu cho id, src, alt, class, và title biểu diễn các thuộc tính của phần tử, mỗi thuộc tính gồm một tên và một giá trị

jQuery cung cấp cho chúng ta các phương thức để thao tác các thuộc tính của phần tử một cách

dễ dàng và giúp chúng ta truy cập tới các phần tử này để mà chúng ta có thể thay đổi các tính chất của chúng

Nhận giá trị thuộc tính trong jQuery

Phương thức attr() có thể được sử dụng để nhận giá trị của một thuộc tính từ phần tử đầu tiên

trong tập hợp đã kết nối hoặc thiết lập các giá trị thuộc tính trên các phần tử được kết nối

Trang 29

</script>

var title = $ ( "em" ) attr ( "title" );

$ ( "#divid" ) text ( title );

<em title = "Bold and Brave" > This is first paragraph </em>

</div>

</body>

</html>

Thiết lập giá trị thuộc tính trong jQuery

Phương thức attr(name, value) có thể được sử dụng để thiết lập thuộc tính đã đặt tên trên tất cả

phần tử trong tập hợp được bao bởi sử dụng value đã truyền

Trang 30

</script>

$ ( "#myimg" ) attr ( "src" , " /images/jquery.jpg" );

Áp dụng Style trong jQuery

Phương thức addClass( classes ) có thể được sử dụng để áp dụng các Style Sheet đã được định

nghĩa trên tất cả phần tử được kết nối Bạn có thể định rõ nhiều class phân biệt nhau bởi khoảng trống

Ví dụ

Ví dụ đơn giản sau thiết lập thuộc tính class của một thẻ <p>:

<html>

<head>

</script>

Trang 31

$ ( "em" ) addClass ( "selected" );

$ ( "#myid" ) addClass ( "highlight" );

});

</script>

<style>

selected { color : red ; }

highlight { background : yellow ; }

</style>

</head>

<body>

<em title = "Bold and Brave" > This is first paragraph </em>

</body>

</html>

Các phương thức Atribute trong jQuery

Bảng sau liệt kê một số phương thức hữu ích mà bạn có thể sử dụng để thao tác các thuộc tính

STT Phương thức & Miêu tả

1 attr( properties )

Thiết lập một cặp đối tượng key/value như là các thuộc tính trên tất cả phần tử được kết nối

Trang 32

Trang 33

2 $("img").attr("alt", "Sample Image")

Phương thức này thiết lập thuộc tính alt của tất cả các Image tới một giá trị "Sample

Image" mới

3 $("input").attr({ value: "", title: "Please enter a value" });

Thiết lập giá trị của tất cả phần tử <input> thành chuỗi trống, cũng như thiết lập The

jQuery Example thành Please enter a value

4 $("a[href^=http://]").attr("target","_blank")

Chọn tất cả link với một thuộc tính href bắt đầu với http:// và thiết lập thuộc tính target của nó là _blank

Trang 34

5 $("a").removeAttr("target")

Phương thức này gỡ bỏ thuộc tính target của tất cả các link

6 $("form").submit(function() {$(":submit",this).attr("disabled", "disabled");});

Phương thức này sửa đổi thuộc tính "disabled" tới giá trị "disabled" trong khi click vào nút Submit

Trang 35

Hầu hết DOM Traversal Method không sửa đổi đối tượng jQuery và chúng được sử dụng để lọc các phần tử của chúng từ một tài liệu trên cơ sở các điều kiện đã cho

Tìm kiếm các phần tử bởi chỉ mục (index) trong jQuery Bạn xem xét ví dụ sau về một tài liệu đơn giản với nội dung HTML sau:

Trang 36

<div>

<ul>

</ul>

</div>

</body>

</html>

Nó sẽ tạo kết quả sau:

 Ở trên, mỗi list có một index riêng của nó, và có thể được xác định vị trí bởi sử dụng

phương thức eq(index) như ví dụ dưới

 Mỗi phần tử con bắt đầu index của nó từ 0, vì thế, list item 2 sẽ được truy cập bởi sử

dụng $("li").eq(1) và tiếp tục như thế

Ví dụ

Ví dụ đơn giản sau thêm màu cho list item thứ ba

<html>

<head>

<title> The JQuery Example </title>

</script>

Trang 37

$ ( "li" ) eq ( ) addClass ( "selected" );

Phương thức filter( selector ) có thể được sử dụng để lọc ra tất cả các phần tử từ tập hợp các

phần tử được kết nối mà không kết nối với Selector đã cho selector có thể được viết bởi sử dụng

bất kỳ cú pháp Selector nào

Trang 38

Ví dụ

Ví dụ đơn giản sau áp dụng màu tới các list mà liên kết với class là middle:

<html>

<head>

</script>

$ ( "li" ) filter ( ".middle" ) addClass ( "selected" );

</ul>

</div>

Trang 39

</body>

</html>

Xác định vị trí các phần tử con trong jQuery

Phương thức find( selector ) có thể được sử dụng để xác định vị trí tất cả phần tử con của một

loại phần tử cụ thể selector có thể được viết bởi sử dụng bất kỳ cú pháp selector nào

Ví dụ

Ví dụ đơn giản sau chọn tất cả phần tử <span> có sẵn bên trong các phần tử <p> khác nhau

<html>

<head>

</script>

$ ( "p" ) find ( "span" ) addClass ( "selected" );

<p> This is 1st paragraph and <span> THIS IS RED </span></p>

<p> This is 2nd paragraph and <span> THIS IS ALSO RED </span></p>

Trang 40

</body>

</html>

Các phương thức DOM Filter trong jQuery

Bảng dưới liệt kê các phương thức hữu ích giúp bạn có thể sử dụng để lọc ra các phần tử đa dạng

Kiểm tra sự chọn lọc hiện tại với một Expression và trả về true, nếu ít nhất một phần

tử của sự chọn lọc đó phù hợp với selector đã cho

5 map( callback )

Tịnh tiến một tập hợp các phần tử trong đối tượng jQuery vào trong tập hợp các giá trị khác trong một mảng jQuery (nếu có thể hoặc không chứa các phần tử)

Định dạng
Số trang	93
Dung lượng	1,09 MB