jQuery Selector
jQuery tận dụng kiến thức và thế mạnh của CSS Selector cho phép bạn dễ dàng truy cập các phần tử hoặc nhóm các phần tử trong DOM ( Document Object Model – mô hình đối tượng tài liệu ). Code select bằng jQuery rất đơn giản và sáng tỏ.
Ví dụ : để truy cập đến phần tử có id = “test” thì code bằng jQuery chỉ đơn giản là $(“#header”), trong khi với javascript thông thường là document.getElementById(“header”)
1. Giới thiệu DOM
DOM là một cấu trúc cây đạng phả hệ, được sử dụng trong HTML và các ngôn ngữ đánh dấu khác để mô tả quan hệ giữa các thành phần trên một trang. Khi nói đến mối quan hệ này, ta dùng các thuật ngữ tương tự như khi nói về mối quan hệ gia đình : cha mẹ, con cái, anh chị em, …
Ví dụ: giả sử ta có một tài liệu HTML sau :
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
</body>
</html>
Ở đây, thẻ <html> là tổ tiên (ancestor) của tất cả phần tử khác hay tất cả các phần tử còn lại là con cháu (descendants) của <html>
Thẻ <head> và <body> là con của <html> hay <html> là cha của 2 thẻ này.
Thẻ <p> là con của <div>, là con cháu của <body> và <html>, đồng thời là an hem với các thẻ p khác.
2. Cú pháp jQuery selector
jQuery selector có cấu trúc như sau :
$(‘CSS selector’) hoặc jQuery(‘CSS selector’)
3. jQuery CSS Selector
Cũng giống như CSS selector, 3 thành phần được sử dụng nhiều nhất trong jQuery Selector là tên thẻ ( type selector ), ID và class
| Thành phần selector | CSS selector | jQuery selector | Mô tả |
| Tên thẻ HTML (type selector) | div | $(‘div’) | Chọn tất cả các thẻ div trong tài liệu HTML |
| ID | #header | $(‘#header’) | Chọn phần tử có id là header |
| Class | .content | $(‘.content’) | Chọn tất cả các phần tử có class là content |
| Universal selector | * | $(‘*’) | Chọn tất cả các phần tử trong tài liệu HTML |
| Descendant selector | form input | $(‘form input’) | Chọn tất cả các thành phần input của form |
| Child selector | ul > li | $(‘ul > li’) | Chọn tất cả các thành phần li( cấp 1) trong danh sách HTML |
| Adjacent selector | div + em | $(‘div + em’) | Chọn thành phần em liền kề phía sau của div trong tài liệu HTML |
| Sibling selector | div ~ em | $(‘div ~ em’) | Chọn thành phần em liền kề phía trước của div trong tài liệu HTML |
Thư viện jQuery hỗ trợ gần như toàn bộ các CSS Selector chuẩn từ CSS1 đến CSS3. Do đó bạn không phải lo lắng về việc liệu trình duyệt có hỗ trợ những selector mới hay không miễn là trình duyệt đó có bật javascript.
4. jQuery Attribute selector
Attribute selector là cách chọn các thành phần trong tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó như thuộc tính Title của link hoặc thuộc tính Alt của image.
Sử dụng Attribute selectors bạn có thể chọn được các đối tượng mà không cần phải khai báo thêm các Class hoặc Id vào trong thẻ HTML mà vẫn có thể hướng được đến các thành phần đó.
Tương tự, bạn cũng có thể sử dụng các CSS Attribute selectors trong jQuery selector.
Ví dụ :
$(‘input[type=”text”]’) // Chọn tất cả các thành phần input có type là text $(‘img[alt]’) // chọn tất cả các hình ảnh được gán thuộc tính alt
Attribute selector cũng có thể được kết hợp với nhau. Ví dụ bạn muốn chọn ra các phần tử img có cả thuộc tính alt và width : $(‘img[alt][width]’)
5. Selector riêng của jQuery
Ngoài các CSS Selector, jQuery còn có một hệ thống những selector của riêng nó. Cú pháp cho những selector này khá giống với cú pháp của CSS pseudo-class, các selector bắt đầu bằng dấu hai chấm (:) . Ví dụ :
$[‘:input’] // chọn tất cả các phần tử input $[‘input:text’] // chọn tất cả các thành phần input có type =”text”
5.1 Form selector
jQuery cung cấp những selector giúp cho làm việc với form trở nên đơn giản hơn.
| Selector | jQuery selector | Mô tả |
| :text, :checkbox, :radio, :image, :submit, :reset, :password, :file | $(‘:selector’) | Chọn tất cả các thành phần input có thuộc tính type có giá trị tương ứng với selector |
| :input | $(‘:input’) | Chọn tất cả các thành phần input của form |
| :button | $(‘:button’) | Chọn tất cả các thành phần button hoặc các thành phần <input type=”button” /> |
| :enable | $(‘:enable’) | Chọn tất cả các phần tử form được enable |
| :disable | $(‘:disable’) | Chọn tất cả các phần tử form được disable |
| :checked | $(‘:checked’) | Chọn các nút radio hoặc các thành phần checkbox đang được chọn |
| :selected | $(‘:selected’) | Chọn các phần tử option của <select> đang được chọn |
5.2 Các Selector theo index
Các selector theo index gồm có :eq(), :lt(), :gt(), :odd, :even, :nth-child()
Giả sử bạn có 1 tài liệu html sau :
<table border="1">
<tr>
<td>TD #0</td>
<td>TD #1</td>
<td>TD #2</td>
</tr>
<tr>
<td>TD #3</td>
<td>TD #4</td>
<td>TD #5</td>
</tr>
<tr>
<td>TD #6</td>
<td>TD #7</td>
<td>TD #8</td>
</tr>
</table>
:eq(index)
:eq(index) cho phép chúng ta chọn phần tử theo chỉ số (index) của nó trong cấu trúc HTML, tương tự như mảng trong javascript, các chỉ số được bắt đầu bằng vị trí 0.
Chẳng hạn bạn muốn tìm phần tử td thứ 3 trong table trên để thiết lập cho nó có chữ màu đỏ:
Khi đó code jQuery sẽ là :
$("td:eq(2)").css("color", "red");
Bạn lưu ý ở đây eq(2) chọn phần tử td thứ ba từ tập hợp trả về bởi vì javascript đánh số array bắt đầu từ 0. Ngược lại với CSS lại bắt đầu từ số 1. Cho nên khi bạn sử dụng nth-child CSS Selector như là $(‘td:nth-child(2)’) sẽ chọn ra phần tử td thứ hai trong tập kết quả trả về.
:lt(index)
:lt(index) cho phép chúng ta chọn ra các phần tử có vị trí nhỏ hơn giá trị index truyền vào. lt là viết tắt của less than ( nhỏ hơn ). Index được đánh dấu từ vị trí 0.
Chẳng hạn bạn muốn chọn ra các phần tử td có chỉ số nhỏ hơn 4 : $(“td:lt(4)”)
:gt(index)
:gt(index) cho phép chúng ta chọn ra các phần tử có vị trí lớn hơn giá trị index truyền vào. gt là viết tắt của greater than ( lớn hơn ).
Index được đánh dấu từ vị trí 0.
Chẳng hạn bạn muốn chọn ra các phần tử td có chỉ số lớn hơn 4 :
$(“td:gt(4)”)
:odd()
:odd() cho phép chúng ta chọn ra các phần tử có index lẻ. Lưu ý là Index được đánh dấu từ vị trí 0. Odd trong tiếng Anh có nghĩa là lẻ.
:even()
:even() cho phép chúng ta chọn ra các phần tử có index chẵn. Lưu ý là Index được đánh dấu từ vị trí 0. Even trong tiếng Anh có nghĩa là chẵn.
odd và even selector thường được sử dụng để định dạng bảng theo kiểu kẻ sọc ( giữa các dòng chẵn, lẻ)
Ví dụ bạn có tài liệu HTML sau :
<table border="1">
<tr><td>Row #1</td><td>index #0</td></tr>
<tr><td>Row #2</td><td>index #1</td></tr>
<tr><td>Row #3</td><td>index #2</td></tr>
<tr><td>Row #4</td><td>index #3</td></tr>
</table>
Chẳng hạn bạn muốn chọn các dòng lẻ Row #1, Row #3 để thiết lập cho nó có background là green :
$(“tr:even”).css({background:”green”});
Bạn hãy chú ý là ở đây chúng ta đang định dạng cho các dòng lẻ, nhưng lại sử dụng even(chẵn). Lý do là vì chỉ số (index) của odd và even được đánh từ 0, do đó dòng Row #1 có chỉ số là 0 ( chẵn ), Row #1 có chỉ số là 2 (chẵn), bởi vậy chúng ta sử dụng even để chọn các dòng có chỉ số chẵn này và trong thực tế đó là các dòng lẻ Row #1 và Row #3.
Tương tự, để chọn các dòng Row #2 và Row #4, ta dùng :
$(“tr:even”)
:nth-child()
:nth-child() cho phép chọn các phần tử theo vị trí của index, các giá trị của odd và even. Khác với eq,lt,gt,odd,even, chỉ số của :nth-child được bắt đầu từ số 1, đây là selector duy nhất của jQuery có chỉ số được bắt đầu từ 1.
Ví dụ chúng ta có thể sử dụng nth-child để chọn ra dòng Row #1, Row #3 bằng cách :
$(“tr:nth-child(odd)”)
5.3 First, last selector
:first selector
:first selector cho phép chọn phần tử đầu tiên theo thứ tự xuất hiện của nó trong tài liệu HTML.
:last selector
:last selector cho phép chọn phần tử cuối cùng theo thứ tự xuất hiện của nó trong tài liệu HTML.
Ví dụ bạn có tài liệu HTML sau :
<table>
<tr><td>First Row</td></tr>
<tr><td>Middle Row</td></tr>
<tr><td>Last Row</td></tr>
</table>
Bạn có thể chọn ra dòng thứ nhất bằng cách :
$(“tr:first”)
Để chọn ra dòng cuối, bạn sử dụng :
$(“tr:last”)
5.4 Các child selector
Bao gồm :first-child, :last-child, :only-child, :nth-child
:first-child
:first-child selector cho phép chọn thành phần con đầu tiên của một phần tử nào đó trong cấu trúc DOM của tài liệu HTML.
:last-child
:last-child selector cho phép chọn thành phần con cuối cùng của một phần tử trong cấu trúc DOM của tài liệu HTML.
Ví dụ bạn có tài liệu HTML sau :
<div> <span>CSS</span> <span>Javascript</span> <span>jQuery</span> </div> <div> <span>ASP.NET</span> <span>Winform</span> <span>WPF</span> </div>
Chẳng hạn bạn muốn chọn ra các thẻ span là con đầu tiên của mỗi thẻ div ( ở đây là <span>CSS</span> và <span>ASP.NET</span> để thiết lập chữ màu đỏ cho nó :
$(“div span:first-child”).css({“color”:”red”})
Nếu muốn chọn ra các thẻ span là con cuối cùng của mỗi thẻ div :
$(“div span:last-child”)
:only-child
:only-child cho phép chọn ra các phần tử là con duy nhất của thẻ 1 thẻ cha. Nếu thẻ cha có các phần tử con khác thì sẽ bị loại khỏi tập kết quả trả về.
Ví dụ bạn có tài liệu HTML sau :
<div>
<button>Sibling!</button>
<button>Sibling!</button>
</div>
<div>
<button>Sibling!</button>
</div>
<div>
None
</div>
<div>
<button>Sibling!</button>
<button>Sibling!</button>
<button>Sibling!</button>
</div>
<div>
<button>Sibling!</button>
</div>
Giả sử bạn muốn thay đổi text và thêm border cho mỗi button là con duy nhất của 1 thẻ cha:
$(“div button:only-child”).text(“Alone”).css(“border”,”2px blue solid”);
Khi đó chỉ có button ở thẻ div thứ 2 và thứ 5 bị ảnh hưởng.
:nth-child selector
( xem ở mục các selector theo index )
5.5 :contain(), :empty, :has(), :parent selector
:contain()
:contain selector cho phép chọn tất cả các phần tử mà nội dung của nó có chứa nội dung do chúng ta chỉ định.
Nội dung chỉ định có phân biệt chữ hoa và chữ thường, ví dụ Hello khác hello
:has()
:has() selector là cách chọn tất cả các phần tử mà nó có ít nhất một phần tử con được chỉ định.
Ví dụ bạn có tài liệu HTML sau :
<div>John Resig</div> <div><p>I have a ‘p’ tag</p></div> <div>Malcom John Sinclair</div> <div>J. Ohn</div>
Chẳng hạn bạn muốn chọn ra các thẻ div có chứa chữ “John” :
$(“div:contains(‘John’)”)
Khi đó thẻ div thứ nhất và thứ 3 được chọn.
Để chọn ra thẻ div có chứa ít nhất 1 thành phần p, bạn viết :
$(“div:has(p)”)
:empty
:empty selector cho phép chọn ra các thành phần không chứa phần tử con nào hoặc không có nội dung.
:parent()
:parent selector ngược lại với empty selector, nó cho phép chọn ra các thành phần tồn tại nội dung bên trong nó hoặc chứa các thành phần con.
Ví dụ bạn có tài liệu HTML sau :
<div>John Resig</div> <div></div> <div><p>English</p></div> <div></div>
Ở đây thẻ div thứ hai và thứ tư là empty; thẻ div thứ nhất có chứa nội dung text, còn thẻ div thứ ba có chứa thành phần con là 1 thẻ p.
Giả sử bạn muốn các thẻ div empty để thêm vào nội dung text là “Không có gì cả” và đặt chữ màu xanh :
$(“div:empty”).text(“Không có gì cả”).css({color:”green”});
Nếu bạn muốn chọn ra các thẻ div có nội dung hoặc có chứa thành phần con để thêm vào nội dung text là “Có dữ liệu” :
$(“div:parent”).text(“Có dữ liệu”);
5.6 :header selector
:header selector cho phép chọn ra các phần tử là Heading tags (các thẻ từ h1 –>h6)
Ví dụ bạn có tài liệu HTML sau :
<h1>Header 1</h1> <p>Contents 1</p> <h2>Header 2</h2> <p>Contents 2</p>
Để thiết lập chọn ra các phần tử là thẻ tiêu đề và đặt cho nó nền đỏ, chữ xanh, bạn viết :
$(“:header”).css({background:’red’,color:’blue’});
5.7 :hidden, :visible selector
:hidden
:hidden selector cho phép chọn ra các phần tử hidden của tài liệu HTML.
Các phần tử được coi là hidden vì 1 số nguyên nhân :
- Nó có giá trị display trong CSS là ‘none’
- Nó là các phần tử trong form với type=”hidden”
- Width và Height của nó được thiết lập là 0.
- Thành phần tổ tiên ( ancestor ) là hidden thì thành phần đó không được hiển thị trên trang.
Các phần tử với visibility : hidden hoặc opacity : 0 được coi là visible ( có thể nhìn thấy ), chúng vẫn chiếm không gian trên layout. Trong hình ảnh động để ẩn (hidden) 1 phần tử thì phần tử đó được coi là vẫn visible cho đến lúc kết thúc hoạt hình. Trong hình ảnh động để hiện một phần tử thì phần tử đó visible khi bắt đầu hoạt hình.
Ví dụ sau sẽ chọn tất cả các thẻ div hidden và đếm xem có bao nhiêu thẻ input bị hidden
<!DOCTYPE html>
<html>
<head>
<style>
div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
span { display:block; clear:left; color:red; }
.starthidden { display:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span>
</span>
<script>
// in some browsers :hidden includes head, title, script, etc...
var hiddenEls = $("body").find(":hidden").not("script");
$("span:first").text("Found " + hiddenEls.length + " hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
</script>
</body>
</html>
Kết quả là có tổng số 5 phần tử hidden, trong đó có 3 phần tử input hidden.
:visible
:visible selector cho phép chọn ra các phần tử visible của tài liệu HTML.
Một phần tử được coi là visible nếu nó chiếm dụng không gian trong tài liệu . Một phần tử visible có width và height lớn hơn 0.
Ví dụ sau sẽ khiến tất cả các thẻ divs visible thành màu vàng khi được click vào.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
.starthidden { display:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
<script>
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});
</script>
</body>
</html>
5.8 :animated selector
:animated selector cho phép chọn ra các phần tử mà chúng đang trong quá trình của một hoạt cảnh tại thời điểm selector chạy.
Ví dụ sau sẽ thay đổi màu của các thẻ div là animated.
<!DOCTYPE html>
<html>
<head>
<style>
div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
div.colored { background:green; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>
<script>
$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
</script>
</body>
</html>
Quyetdo289's Blog 