Trong phần 1 và phần 2 của chuỗi bài jQuery Selectors, các bạn đã tìm hiểu 5 cách sử dụng jQuery Selectors cơ bản.
Trong bài này, các bạn sẽ tìm hiểu một số ví dụ về kết hợp các jQuery selectors để tăng hiệu quả khi code.!
1. Lấy phần tử đầu tiên, cuối cùng, vị trí chẵn, lẻ trong danh sách
Cách dùng: $(“Tên_thẻ:Tùy_chọn”)
Với tùy_chọn là first, last, even, odd. Chi tiết cách sử dụng trong bảng dưới
| :first | $(“div:first”) | Chọn phần tử div đầu tiên |
| :last | $(“h2:last”) | Chọn phần tử h2 cuối cùng |
| :even | $(“tr:even”) | Chọn các phần tử tr chẵn |
| :odd | $(“tr:odd”) | Chọn các phần tử tr lẻ |
Ví dụ 1: sử dụng first, last, even, odd với tên thẻ để đổi màu nền.
|
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html> <head> <title>www.hienminh.com</title> <meta charset="utf-8" /> <script src="Scripts/jquery-3.3.1.min.js"></script> <script src="Scripts/bootstrap.min.js"></script> <link href="Content/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div> <h2>Khối 1</h2> <p>Welcome to www.hienminh.com</p> <p><a href="http://hienminh.com/category/lap-trinh-web/" target="_blank">Lập trình web</a></p> </div> <div> <h2>Khối 2</h2> <p>Học lập trình C#, ASP.NET MVC, Web API, jQuery miễn phí</p> <p><a href="http://hienminh.com/category/co-so-du-lieu/" target="_top">Lập trình cơ sở dữ liệu</a></p> </div> <div> <h2>Khối 3</h2> <p>Phần 2 - Lựa chọn phần tử HTML bởi tên thuộc tính</p> <p><a href="http://hienminh.com/category/lap-trinh-co-ban/" target="_blank">Lập trình cơ bản</a></p> </div> <div> <h2>Khối 4</h2> <table> <tr> <td>Dòng 1</td> </tr> <tr> <td>Dòng 2</td> </tr> <tr> <td>Dòng 3</td> </tr> <tr> <td>Dòng 4</td> </tr> </table> </div> <script> $(document).ready(function() { $("div:first").css("background-color", "yellow"); $("div:last").css("background-color", "orange"); $("tr:even").css("background-color", "blue"); $("tr:odd").css("background-color", "green"); }); </script> </body> </html> |
Kết quả:
- $(“div:first”).css(“background-color”, “yellow”); đổi màu nền vàng với thẻ div đầu tiên (khối 1)
- $(“div:last”).css(“background-color”, “orange”); đổi màu cam với thẻ div cuối cùng (khối 4)
- $(“tr:even”).css(“background-color”, “blue”); đổi màu nền xanh lá cây với thẻ tr chẵn (dòng 2, 4 của bảng)
- $(“tr:odd”).css(“background-color”, “green”); đổi màu nền xanh dương với thẻ tr lẻ(dòng 1, 3 của bảng)
2. Lấy phần tử đầu tiên, cuối cùng, có vị trí xác định trong danh sách
| :first-child | $(“h2:first-child”) | Chọn phần tử con là phần tử h2 đầu tiên |
| :last-child | $(“h2:last-child”) | Chọn phần tử con h2 cuối cùng |
| :nth-child(n) | $(“h2:nth-child(3)”) | Chọn phần tử con là phần tử h2 thứ 3 tính từ đầu danh sách |
| :nth-last-child(n) | $(“h2:nth-last-child(3)”) | Chọn phần tử con là phần tử h2 thứ 3 tính từ cuối danh sách |
| :first-of-type | $(“h2:first-of-type”) | Chọn phần tử con h2 đầu tiên trong số các phần tử con |
| :last-of-type | $(“h2:last-of-type”) | Chọn phần tử con h2 cuối cùng trong số các phần tử con |
| :nth-of-type(n) | $(“h2:nth-of-type(3)”) | Chọn phần tử con h2 thứ 3 trong số các phần tử con. |
Ví dụ 2: sử dụng jQuery với :first-child, :last-child, :first-of-type và :last-of-type
|
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 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <title>www.hienminh.com</title> <meta charset="utf-8" /> <script src="Scripts/jquery-3.3.1.min.js"></script> <script src="Scripts/bootstrap.min.js"></script> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <style> .borderDiv{ border: 1px solid red; } </style> </head> <body> <h3>Thẻ h3 thứ 1 của body</h3> <h3>Thẻ h3 thứ 2 của body</h3> <div class="borderDiv"> <h3>Thẻ h3 đầu tiên của Khối 1</h3> <h3>Welcome to www.hienminh.com</h3> <h3><a href="http://hienminh.com/category/lap-trinh-web/" target="_blank">Lập trình web</a></h3> <h3>Thẻ h3 cuối cùng của Khối 1</h3> </div> <div class="borderDiv"> <h4>Học lập trình C#, ASP.NET MVC, Web API, jQuery miễn phí</h4> <h3>Thẻ h3 đầu tiên của Khối 2</h3> <h3><a href="http://hienminh.com/category/co-so-du-lieu/" target="_top">Lập trình cơ sở dữ liệu</a></h3> <h3>Thẻ h3 cuối cùng của Khối 2</h3> </div> <div class="borderDiv"> <h3>Thẻ h3 đầu tiên của Khối 3</h3> <h3>Phần 2 - Lựa chọn phần tử HTML bởi tên thuộc tính</h3> <h3><a href="http://hienminh.com/category/lap-trinh-co-ban/" target="_blank">Lập trình cơ bản</a></h3> <h4>Thẻ h3 cuối cùng của Khối 3</h4> </div> <h3>Thẻ h3 cuối cùng của body</h3> <script> $(document).ready(function() { $("h3:first-child").css("background-color", "yellow"); $("h3:last-child").css("background-color", "orange"); }); </script> </body> </html> |
Kết quả:
- $(“h3:first-child”).css(“background-color”, “yellow”); đổi màu nền vàng với thẻ h3 đầu tiên của từng khối. Khối 2, thẻ h3 không phải đầu tiên trong danh sách 4 thẻ, do vậy không đổi màu nền.
- $(“h3:last-child”).css(“background-color”, “orange”); đổi màu nền cam với thẻ h3 cuối cùng của từng khối. Khối 3, thẻ h3 không phải cuối cùng trong danh sách 4 thẻ, do vậy không đổi màu nền.
Chú ý:
- Sử dụng :first-of-type thay cho :first-child để lấy tất cả phần tử đầu tiên trong danh sách
- Sử dụng :last-of-type thay cho :last-child để lấy tất cả phần tử cuối cùng trong danh sách
Ví dụ 3: sử dụng jQuery với :nth-child(n), :nth-of-type(n) với HTML giống ví dụ 2, chỉ thay đổi mã trong <script>
|
1 2 3 4 5 6 |
<script> $(document).ready(function() { $("h3:nth-child(2)").css("background-color", "yellow"); $("h3:nth-of-type(3)").css("background-color", "orange"); }); </script> |
Kết quả:
- $(“h3:nth-child(2)”).css(“background-color”, “yellow”); đổi màu nền vàng với các phần tử h3 thứ 2 của từng khối.
- $(“h3:nth-of-type(3)”).css(“background-color”, “orange”); đổi màu nền cam với các phần tử h3 thứ 3 của khối.
Bài viết hướng dẫn chi tiết quá !