Untitled Document
Bài 08: jQuery Selectors - Based On jQuery
0
Google +0
0
Đăng bởi: TheHalfHeart - Vào ngày: 26-08-2014 - Chuyên mục:
jQuery - View: 3115
Dưới đây là danh sách những selector thông dụng được sử dụng rất nhiều trong các ứng dụng viết bằng jquery. Vì tính thông dụng của nó nên tôi sẽ tổng hợp nó trong một bài duy nhất này nhằm giúp các bạn dễ tìm kiếm tài liệu hơn.
1. All Selector (“*”)
Cú pháp: jQuery( "*" )
Dùng để lấy tất cả các thẻ HTML
Ví dụ: Xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 |
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<style>
body{
margin: 20px;
}
a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
.selected {
border: solid 1px; color: white; background: blue
}
</style>
<script language="javascript">
$(document).ready(function()
{
$('#button').click(function()
{
// Tất cả các thẻ được thêm vào class selected
$('*').addClass('selected');
});
});
</script>
</head>
<body>
<a href="#" id="freetuts">id = freetuts</a>
<a href="#" class="freetuts">class=freetuts</a>
<a href="#">Không có id, không có class</a>
<a href="#" class="freetuts">Class=freetuts</a>
<button id="button">Kiểm tra</button>
</body>
</html> |
2. Class Selector (“.class”)
Cú pháp: jQuery( ".className" )
Dùng để lấy tất cả các thẻ có class tên là className
Ví dụ: Xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 |
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<style>
body{
margin: 20px;
}
a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
.selected {
border: solid 1px; color: white; background: blue
}
</style>
<script language="javascript">
$(document).ready(function()
{
$('#button').click(function()
{
// Tất cả các thẻ được thêm vào class selected
$('.freetuts').addClass('selected');
});
});
</script>
</head>
<body>
<a href="#" id="freetuts">id = freetuts</a>
<a href="#" class="freetuts">class=freetuts</a>
<a href="#">Không có id, không có class</a>
<a href="#" class="freetuts">Class=freetuts</a>
<button id="button">Kiểm tra</button>
</body>
</html> |
3. Element Selector (“element”)
Cú pháp: jQuery( "element" )
Dùng để lấy tất cả các thẻ HTML có tên là element, ví dụ thẻ div, a, table
Ví dụ: Xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 |
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<style>
body{
margin: 20px;
}
a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
.selected {
border: solid 1px; color: white; background: blue
}
</style>
<script language="javascript">
$(document).ready(function()
{
$('#button').click(function()
{
// Tất cả các thẻ được thêm vào class selected
$('a').addClass('selected');
});
});
</script>
</head>
<body>
<a href="#" id="freetuts">id = freetuts</a>
<a href="#" class="freetuts">class=freetuts</a>
<a href="#">Không có id, không có class</a>
<a href="#" class="freetuts">Class=freetuts</a>
<button id="button">Kiểm tra</button>
</body>
</html> |
4. ID Selector (“#id”)
Cú pháp: jQuery( "#id" )
Dùng để lấy theo id, thường mỗi trang web các ID HTML là duy nhất nên kết quả của nó trả về là phần tử đầu tiên nếu như web bạn bị trùng id
Ví dụ: Xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 |
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<style>
body{
margin: 20px;
}
a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
.selected {
border: solid 1px; color: white; background: blue
}
</style>
<script language="javascript">
$(document).ready(function()
{
$('#button').click(function()
{
// Tất cả các thẻ được thêm vào class selected
$('#freetuts').addClass('selected');
});
});
</script>
</head>
<body>
<a href="#" id="freetuts">id = freetuts</a>
<a href="#" class="freetuts">class=freetuts</a>
<a href="#">Không có id, không có class</a>
<a href="#" class="freetuts">Class=freetuts</a>
<button id="button">Kiểm tra</button>
</body>
</html> |
5. Multiple Selector (“selector1, selector2, selectorN”)
Cú pháp: jQuery( "selector1, selector2, selectorN" )
Ở đây nó sẽ lặp qua từng selector và lấy kết quả tương ứng với selector đó, sau đó kết quả được hợp lại với nhau và đưa ra danh sách cuối cùng
Ví dụ: Xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 |
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<style>
body{
margin: 20px;
}
a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
.selected {
border: solid 1px; color: white; background: blue
}
</style>
<script language="javascript">
$(document).ready(function()
{
$('#button').click(function()
{
// Tất cả các thẻ được thêm vào class selected
$('#freetuts, .freetuts').addClass('selected');
});
});
</script>
</head>
<body>
<a href="#" id="freetuts">id = freetuts</a>
<a href="#" class="freetuts">class=freetuts</a>
<a href="#">Không có id, không có class</a>
<a href="#" class="freetuts">Class=freetuts</a>
<button id="button">Kiểm tra</button>
</body>
</html> |
6. Selector tìm theo phủ định (không bằng)
Cú pháp: jQuery( "[attribute!='value']" )
Chọn tất cả những thẻ HTML có thuộc tính attribute và có giá trị bắt đầu bằng chữ value-{something} hoặc value
Ví dụ: Xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 |
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<style>
body{
margin: 20px;
}
a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
.selected {
border: solid 1px; color: white; background: blue
}
</style>
<script language="javascript">
$(document).ready(function()
{
$('#button').click(function()
{
$('a[title!="freetuts"]').addClass('selected');
});
});
</script>
</head>
<body>
<a href="#" title="trang freetuts">title = trang freetuts</a>
<a href="#" title="websitefreetuts">title = websitefreetuts</a>
<a href="#" title="freetuts">title = freetuts</a>
<a href="#" title="hoc-lap-trinh-online-tai-freetuts"> title = hoc-lap-trinh-online-tai-freetuts</a>
<button id="button">Kiểm tra</button>
</body>
</html> |
7. Selector chỉ cần có thuộc tính là được chấp nhận
Cú pháp: jQuery( "[attribute]" )
Chọn tất cả những thẻ HTML có thuộc tính attribute
Ví dụ: Xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 |
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<style>
body{
margin: 20px;
}
a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
.selected {
border: solid 1px; color: white; background: blue
}
</style>
<script language="javascript">
$(document).ready(function()
{
$('#button').click(function()
{
$('a[title').addClass('selected');
});
});
</script>
</head>
<body>
<a href="#" title="trang freetuts">title = trang freetuts</a>
<a href="#">Không có title</a>
<a href="#" title="freetuts">title = freetuts</a>
<a href="#" title="hoc-lap-trinh-online-tai-freetuts"> title = hoc-lap-trinh-online-tai-freetuts</a>
<button id="button">Kiểm tra</button>
</body>
</html> |
8. Selector chồng lên nhau
Cú pháp: jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" )
Chọn tất cả những thẻ HTML thỏa mãn điều kiện attributeFilter1, attributeFilter2, ... attributeFilterN
Ví dụ: Xem demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 |
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<style>
body{
margin: 20px;
}
a{display: block; border:solid 1px blue; padding: 5px; height: 30px; line-height: 30px; text-decoration: none; margin-bottom: 20px}
.selected {
border: solid 1px; color: white; background: blue
}
</style>
<script language="javascript">
$(document).ready(function()
{
$('#button').click(function()
{
$('a[name][title="freetuts"]').addClass('selected');
});
});
</script>
</head>
<body>
<a href="#" name="demo" title="freetuts">name = demo, title = freetuts</a>
<a href="#" name="demo">name = demo, không có title</a>
<a href="#" title="freetuts">Không có name, title = freetuts</a>
<a href="#" name="demo" title="hoc-lap-trinh-online-tai-freetuts">Name = demo, title = hoc-lap-trinh-online-tai-freetuts</a>
<button id="button">Kiểm tra</button>
</body>
</html> |
9. Lời kết
Đơn giản phải không nào :D. jQuery selector được vận dụng theo nguyên tắc viết CSS vàregular expressionnên nếu bạn nắm vững 2 nguyên tắc này thì sẽ dễ dàng hiểu rõ. Bài tiếp theo ta sẽ tìm hiểu các selector khác nhé.
Bài đăng
0 nhận xét:
Đăng nhận xét