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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.09 MB, 93 trang )

Copyright © 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
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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

Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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:
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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
XPath cơ bản.
Cách sử dụng jQuery?
Có hai cách để sử dụng jQuery:
 Cài đặt nội bộ − Bạn có thể tải jQuery Library trên thiết bị nội bộ của bạn và include nó

trong HTML code.
 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 để 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.
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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>
<script type="text/javascript" src=" /jquery/jquery-2.1.3.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>

</head>

<body>

<h1>Hello</h1>

</body>
</html>
Nó sẽ cho kết quả:
Sử dụng CDN
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). Google và Microsoft cung cấp phiên bản mới nhất.
Trong loạt bài này, chúng tôi sử dụng Google CDN.
Ví dụ
Bây giờ chúng ta viết lại ví dụ trên bởi sử dụng thư viện jQuery từ Google CDN.
<html>
<head>
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí Trang 8

<title>The jQuery Example</title>
<script type="text/javascript"
src="
</script>

<script type="text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</head>

<body>

<h1>Hello</h1>

</body>
</html>
Nó sẽ cho kết quả:
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
});
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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>
<title>The jQuery Example</title>
<script type="text/javascript"
src="
</script>

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, world!");});

});
</script>

</head>

<body>
<div id="mydiv">
Click on this to see a dialogue box.
</div>
</body>

</html>
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 */
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí Trang 10

});
});
Bây giờ chúng ta bao custom.js này vào trong HTML file như sau:
<html>
<head>
<title>The jQuery Example</title>

đượ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
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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 = [1, 2, 3, 4, 5];
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:
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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 (){
// do some stuff here
}
jQuery sử dụng rất nhiều hàm ẩn danh như sau:
$(document).ready(function(){
// do some stuff here
});
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ề
điều này:
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3
Đối tượng Argument cũng có một thuộc tính callee, mà tham chiếu đến hàm bạn đang ở trong đó.
Ví dụ:
function func() {
return arguments.callee;
}
func(); // ==> func

Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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.
$(document).ready(function() {
// 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", [1,2]); //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2
Phạm vi (Scope) trong jQuery
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.
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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);
});
Hầu hết callback cung cấp các tham số và một context. Trong ví dụ event-handler, callback được
gọi với một tham số, một Event.
Một số callback được yêu cầu để trả về cái gì đó, cái khác trả về giá trị tùy ý. Để ngăn cản sự đệ
trình form, một xử lý sự kiện Submit có thể trả về false như sau:
$("#myform").submit(function() {
return false;
});
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;
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí Trang 16

return {
increment: function() {
counter++;
},

print: function() {
console.log(counter);
}
}
}
var c = create();
c.increment();
c.print(); // ==> 1
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);
};
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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.
Các hàm có sẵn trong jQuery
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ả
1
charAt()
Trả về ký tự tại chỉ mục (index) đã cho.
2
concat()
Kết nối hai chuỗi văn bản và trả về một chuỗi mới.

3
forEach()
Gọi một hàm cho mỗi phần tử của một mảng.
4
indexOf()
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.
6
pop()
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí Trang 18

Gỡ bỏ phần tử cuối của một mảng và trả về phần tử đó.
7
push()
Thêm một hoặc nhiều phần tử tới phần cuối của một mảng và trả về độ dài mới của
mảng đó.
8
reverse()
Đảo ngược thứ tự các phần tử trong một mảng – phần tử đầu tiên thành cuối cùng và
cuối cùng thành đầu tiên.
9
sort()
Sắp xếp phân loại các phần tử của một mảng.
10
substr()

Trả về các ký tự trong một mảng bắt đầu từ vị trí đã cho từ số các ký tự đã xác định.
11
toLowerCase()
Trả về giá trị chuỗi đang gọi được biến đổi thành kiểu chữ thường.
12
toString()
Trả về sự biểu diễn chuỗi của giá trị số.
13
toUpperCase()
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>
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí Trang 19

<head>
<title>The jQuery Example</title>
</head>

<body>
<div>
<p>This is a paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>

</html>
Nó sẽ cho kết quả sau:
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
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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ả
1
Tag Name
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>
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí Trang 21

<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="
</script>

<script type="text/javascript" language="javascript">
$(document).ready(function() {

$("p").css("background-color", "yellow");
});
</script>
</head>

<body>
<div>
<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>
Nó sẽ cho kết quả sau:
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:
STT
Selector & Miêu tả
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí Trang 22

1
Name
Chọn tất cả phần tử mà kết nối với phần tử có Name đã cho.
2

#ID
Chọn một phần tử đơn mà kết nối với ID đã cho.
3
.Class
Chọn tất cả phần tử mà kết nối với Class đã cho.
4
Universal (*)
Chọn tất cả phần tử có sẵn trong một DOM.
5
Multiple Elements E, F, G
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
Ví dụ về Selector trong jQuery
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.
STT
Selector & Miêu tả
1
$('*')
Selector này chọn tất cả phần tử trong tài liệu
2
$("p > *")
Selector này chọn tất cả phần tử mà là con của một phần tử đoạn văn
3
$("#specialID")
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí Trang 23

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

$(".specialClass")
Selector này nhận tất cả các phần tử mà có class là specialClass.
5
$("li:not(.myclass)")
Chọn tất cả phần tử được kết nối bởi thẻ <li> mà không có class="myclass".
6
$("a#specialID.specialClass")
Selector này kết nối liên kết với một id là specialID và một class là specialClass.
7
$("p a.specialClass")
Selector này kết nối liên kết với một class là specialClass được khai báo trong phần tử
<p>.
8
$("ul li:first")
Selector này chỉ nhận phần tử <li> đầu tiên của phần tử <ul>.
9
$("#container p")
Chọn tất cả phần tử được kết nối bởi <p> mà là con của một phần tử có một id
làcontainer.
10
$("li > ul")
Chọn tất cả phần tử được kết nối bởi <ul> mà là con của một phần tử <li> được kết
nối.
11
$("strong + em")
Chọn tất cả phần tử được kết nối bởi <em> mà theo ngay sau một phần tử anh được
kết nối bởi <strong>.
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí 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.
15
$(":empty")
Chọn tất cả các phần tử mà không có phần tử con.
16
$("p:empty")
Chọn tất cả phần tử được kết nối bởi <p> mà không có phần tử con
17
$("div[p]")
Chọn tất cả phần tử được kết nối bởi <div> mà chứa một phần tử được kết nối bởi
<p>.
18
$("p[.myclass]")
Chọn tất cả phần tử được kết nối bởi <p> mà chứa một phần tử với một class
làmyclass.
19
$("a[@rel]")
Chọn tất cả phần tử được kết nối bởi <a> mà có một thuộc tính rel.
20

$("input[@name=myname]")
Chọn tất cả phần tử được kết nối bởi <input> mà có một giá trị name chính xác tương
Copyright © vietjack.com

Trang chia sẻ các bài học online miễn phí Trang 25

đương với myname.
21
$("input[@name^=myname]")
Chọn tất cả phần tử được kết nối bởi <input> mà có một giá trị tên bắt đầu
vớimyname.
22
$("a[@rel$=self]")
Chọn tất cả phần tử được kết nối bởi <a> mà có giá trị thuộc tính rel kết thúc làself.
23
$("a[@href*=domain.com]")
Chọn tất cả phần tử được kết nối bởi <a> mà có một giá trị href chứa domain.com.
24
$("li:even")
Chọn tất cả phần tử được kết nối bởi <li> mà có một giá trị chỉ mục even.
25
$("tr:odd")
Chọn tất cả phần tử được kết nối bởi <tr> mà có một giá trị chỉ mục odd
26
$("li:first")
Chọn phần tử <li> đầu tiên.
27
$("li:last")
Chọn phần tử <li> cuối cùng.
28

$("li:visible")
Chọn tất cả phần tử được kết nối bởi <li> mà là visible (nhìn thấy).
29
$("li:hidden")
Chọn tất cả phần tử được kết nối bởi <li> mà là hidden (ẩn).

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

Trích đoạn

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về