-------
Phần 27.
Bộ chọn (selector) trong jQuery
Hiểu về hoạt động của trình duyệt sẽ giúp việc lập trình
được tốt hơn. Vì đang tìm hiểu, nên sẽ ghi vài suy nghĩ ra đây, sẽ kiểm tra tính
chính xác của nó sau.
Hình sau là các thành phần của trình duyệt.
Theo đó,
- Mục đích của trình duyệt là càng nhanh càng tốt hiển thị
trang web cho người dùng.
- Vì vậy, thành phần Networking sẽ cố gắng để chuyển nhanh
nhất tài nguyên web cho thành phần Rendering engine.
- Rendering engine sẽ thực hiện phân tích mã HTML, CSS,
JavaScript nhanh nhất có thể.
- Trình duyệt tiếp tục tải về các tài nguyên khác: hình ảnh,
video.
- Vì các xử lý của JavaScript rất đa dạng, có liên quan đến nhiều
đối tượng khác nhau, ví dụ: cửa sổ trình duyệt, lưu trữ cục bộ, các phần tử của
HTML, CSS, hình ảnh, video, tương tác với người dùng; nên việc kiểm soát được
các xử lý của JavaScript là rất quan trọng.
- jQuery là thư viện tiện ích, được viết bằng JavaScript,
jQuery giúp lập trình một số việc nhanh hơn.
- Khi lập trình sẽ kết hợp cả JavaScript và jQuery, nên cần
phân biệt dòng lệnh nào là của jQuery, dòng lệnh nào là của JavaScript, hay nói
cách khác, cần biết “lệnh này ông nào xử lý”, tất nhiên ông biên dịch sau cùng
vẫn là JavaScript Interpreter.
- Trình biên dịch JavaScript nằm trong các web browser
engine, có nhiều web browser engine đang được dùng hiện nay, ví dụ: IE sử dụng
Trident, Firefox sử dụng Gecko, Safari sử dụng WebKit, Chrome và Opera sử dụng
Blink. (https://en.wikipedia.org/wiki/Web_browser_engine)
Tiếp tục xem và làm theo các clip về jQuery, do TEDU chia
sẻ.
Đây là clip số 4: selector (bộ chọn)
Dùng bộ chọn để lấy và thao tác với các phần tử HTML.
Các loại bộ chọn phổ biến: ID, tag name, class name,
attribute, attribute value. Ví dụ:
$('#clickme').click(function() {
$(this).css('background-color',
'red');
});
Có thể gán đối tượng trả về của jQuery vào một biến, sau đó thực
hiện xử lý trên biến. Ví dụ:
var button = $('#btn1');
button.click(function()
{
$('#btn1').css('background-color','green');
});
Dùng lệnh console.log(button), rồi vào cửa sổ console của Developer
Tools để xem rất nhiều thông tin về đối tượng button do jQuery trả về.
Trong trường hợp có nhiều id trùng tên (trường hợp không
bình thường) thì jQuery sẽ trả về ID đầu tiên tìm thấy.
Để kiểm tra jQuery có tìm thấy phần tử theo yêu cầu hay
không? Sử dụng thuộc tính length, ví
dụ nếu có tìm thấy phần tử button thì:
button.length > 0.
<script>
$(document).ready(function()
{
var
button = $('#clickme');
if
(button.length > 0) {
alert('found');
}
else {
alert
('not found');
}
});
</script>
Trước khi làm thực hành tiếp, xem hai clip sau để hiểu hơn
về jQuery.
Cú pháp cơ bản trong jQuery là,
$(selector).action()
Trong đó:
- $ kí hiệu để truy cập thư viện jQuery
- Selector: phần tử HTML
- Action(): hành động thực hiện trên phần tử
$(this): là phần tử hiện hành.
Ví dụ:
Làm một ví dụ đơn giản: xuất ra 3 hàng, người dùng bấm vào
hàng nào thì ẩn hàng đó đi.
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<script
src="jquery.js"></script>
<script>
$(document).ready(function()
{
var
p = $('p');
//
console.log(p);
p.click(function()
{
$(this).hide();
});
});
</script>
</head>
<body>
<p>FA
là Forever Alone</p>
<p>Hình
như không phải</p>
<p>Là
Forever Awesome mà</p>
</body>
</html>
$(this).hide(); // ẩn đi phần tử hiện hành
$(‘p’).hide(); // ẩn đi tất cả các phần tử p của HTML
Cú pháp cơ bản để chọn phần tử HTML là,
$(‘element’) hoặc $(“element”)
Ví dụ:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<script
src="jquery.js"></script>
<script>
$(document).ready(function()
{
$('#btn-all').click(function(){
$('p').hide();
});
$('#btn-2').click(function(){
$('#p2').hide()
});
$('#btn-3').click(function(){
$('#p3').hide()
});
});
</script>
</head>
<body>
<p>1.
FA là Forever Alone</p>
<p
id="p2">2. Hình như không phải</p>
<p
id="p3">3. Là Forever Awesome mà</p>
<button
id="btn-all">Ẩn tất cả</button>
<button
id="btn-2">Ẩn hàng thứ 2</button>
<button
id="btn-3">Ẩn hàng thứ 3</button>
</body>
</html>
Đây là clip số 5: thao tác với element qua tên thẻ.
Có thể chọn một lần nhiều phần tử. Ví dụ, $('table, div, a').css('background-color', 'red');
Để ý sự
khác nhau của:
- $(‘div
a’): chọn tất cả các phần tử a nằm trong phần từ div
- $(‘div,
a): chọn tất cả các phần tử div và tất cả các phần tử a
Sau khi
chọn được các phần tử rồi, dùng vòng lặp để duyệt các phần tử. Ví dụ,
$('table tr').each(function() {
$(this).css('background-color',
'red');
});
Bước đầu coi và làm theo các clip, sau này sẽ phải đọc tài
liệu gốc của jQuery để lấy những kiến thức mới: http://learn.jquery.com/about-jquery/
Ví dụ, để tìm hiểu về các selector, vào mục API Documentation,
nhập từ khóa selectors vào ô tìm kiếm, trang web sẽ trả về các mục nói về các
loại selector cùng với ví dụ.
Đây là
clip số 6: thao tác với element qua class.
Để ý sự
khác nhau giữa $(‘.class-name1.class-name2’) và $(‘.class-name1 .class-name2’): cái đầu là phần tử gồm hai
class, cái sau là phần tử có class cha là class-name1 và class con là
class-name2.
Sử dụng
phương thức filter và find của jQuery. Filter là lọc phần tử từ một tập các
phần tử theo điều kiện. Find là tìm các phần tử con theo điều kiện.
Đây là
clip số 7: thao tác với element qua thuộc tính
Để chọn
phần tử theo thuộc tính, sử dụng dấu [], ví dụ:
$('[title]').addClass('my-border');
hoặc $('div[title]').addClass('my-border');
hoặc $('[title
= “h1”]').addClass('my-border');
Cách sử dụng thuộc tính data- của HTML5, ví dụ:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<script
src="jquery.js"></script>
<script>
$(document).ready(function()
{
alert($('[title
= "p1"]').data('id'));
});
</script>
</head>
<body>
<p
title="p1" data-id="1">1. FA là Forever Alone</p>
<p
id="p2">2. Hình như không phải</p>
<p
id="p3">3. Là Forever Awesome mà</p>
<button
id="btn-all">Ẩn tất cả</button>
<button
id="btn-2">Ẩn hàng thứ 2</button>
<button
id="btn-3">Ẩn hàng thứ 3</button>
</body>
</html>
Đây là
clip số 8: các toán tử so sánh khi truy cập giá trị thuộc tính
- $('[title = “h1”]').addClass('my-border'): so sánh bằng
- $('[title != “h1”]').addClass('my-border'): so sánh khác
- $("[title $=
'1']").addClass('my-border'): giá trị title có kí tự kết thúc là 1
- $("[title ^=
'd']").addClass('my-border'): giá trị title có kí tự bắt đầu là d
- $("[title *=
'iv']").addClass('my-border'): giá trị title có chứa chuỗi iv
Tuy
nhiên, áp dụng các toán tử so sánh theo cách liệt ở trên sẽ có một số vấn đề,
ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<script
src="jquery.js"></script>
<script>
$(document).ready(function()
{
$('[title
!= "p1"]').css('color','red');
console.log($('[title
!= "p1"]'));
});
</script>
</head>
<body>
<p
title="p1" data-id="1">1. FA là Forever Alone</p>
<p
id="p2">2. Hình như không phải</p>
<p
id="p3">3. Là Forever Awesome mà</p>
<button
id="btn-all">Ẩn tất cả</button>
<button
id="btn-2">Ẩn hàng thứ 2</button>
<button
id="btn-3">Ẩn hàng thứ 3</button>
</body>
</html>
Mục
đích của đoạn mã trên là cho dòng chữ “1. FA là Forever Alone” có màu đỏ, nhưng kết quả lại
là tất cả đều màu đỏ, quan sát cửa sổ console của trình duyệt để xem kết quả,
sẽ rút ra được cái lỗi gặp phải. Có thể viết lại một chút để xem kết quả khác:
Thay
dòng mã:
$('[title !=
"p1"]').css('color','red');
Bằng:
$('p[title !=
"p1"]').css('color','red');
Để ý
là, dù đánh dấu nháy đơn, hay nháy kép thì jQuery và JavaScript nó vẫn chạy.
jQuery và JavaScript có vẻ dễ tính!!??...làm người lập trình khó xử, không biết
chọn cái nào!
[2/10/2017]
tôi đã chọn dấu nháy đơn khi lập trình với JavaScript và jQuery.
-----------
Cập nhật [2/10/2017][2/10/2016]
-----------