Người Viết : ViKiMi Editor
Phương Thức First, Last, Eq cho phép Duyệt / Tìm Kiếm Các Phần Tử trong một danh sách
Nếu bạn muốn tìm kiếm các phần tử khác nhau trên cây DOM dựa vào vị trí hoặc số chỉ mục cụ thể thì điều này cũng không khó khăn. Tất cả rất dễ dàng vì jQuery đã cung cấp cho chúng ta những Method hoàn toàn ổn, ngẵn gọn hữu ích. Công việc với một Lập trình Viên đơn giản là sử dụng chúng để tìm những phần tử mong muốn. Mọi thứ luôn sẵn có !
Để đáp ứng nhu cầu tối thiểu nhất, jQuery cũng đem lại những thứ tối thiểu nhất.
Bạn có thể dễ dàng làm những công việc sau đây :
+ Duyệt / Tìm kiếm phần tử đầu tiên của nhóm các phần tử chỉ định
+ Duyệt / Tìm kiếm phần tử cuối cùng của nhóm các phần tử chỉ định
+ Duyệt / Tìm kiếm phần tử dựa vào số chỉ mục của nó trong nhóm của các phần tử chỉ định
Các phương thức được sử dụng :
+ Phương thức first()
+ Phương thức last()
+ Phương thức eq()
A ] PHƯƠNG THỨC First()
Duyệt / Tìm kiếm phần tử đầu tiên của nhóm các phần tử chỉ định
CÚ PHÁP ::
$( SELECTOR ). first();
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").first().css( "background-color", "green" );
});
</script>
</head>
<body>
<h1>SỬ DỤNG FIRST METHOD</h1>
<p>Duyệt Phần tử DIV Thứ nhất trên cây DOM.</p>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ NHẤT</h1>
<p>Đoạn Văn Bản Thứ Nhất.</p>
</div>
<br>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ HAI</h1>
<p>Đoạn Văn Bản Thứ Hai.</p>
</div>
<br>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ BA</h1>
<p>Đoạn Văn Bản Thứ Ba.</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả :
B ] PHƯƠNG THỨC Last()
Duyệt / Tìm kiếm phần tử cuối cùng của nhóm các phần tử chỉ định
CÚ PHÁP ::
$( SELECTOR ). last();
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").last().css( "background-color", "yellow" );
});
</script>
</head>
<body>
<h1>SỬ DỤNG LAST METHOD</h1>
<p>Duyệt Phần tử DIV Cuối Cùng trên cây DOM.</p>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ NHẤT</h1>
<p>Đoạn Văn Bản Thứ Nhất.</p>
</div>
<br>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ HAI</h1>
<p>Đoạn Văn Bản Thứ Hai.</p>
</div>
<br>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ BA</h1>
<p>Đoạn Văn Bản Thứ Ba.</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả :
C ] PHƯƠNG THỨC eq()
Duyệt / Tìm kiếm phần tử dựa vào số chỉ mục của nó trong nhóm của các phần tử chỉ định
CÚ PHÁP ::
$( SELECTOR ). eq( Index );
Index : Số Chỉ Mục Của Phần Tử
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").eq(2).css("background-color", "Green");
});
</script>
</head>
<body>
<h1>SỬ DỤNG EQ METHOD</h1>
<p style="line-height: 180%;">Duyệt Phần tử DIV Có Chỉ Số Index = 2 (Tức Là Phần Tử Thứ 3, <BR> Vì Tất Cả Chỉ Số Index Được Bắt Đầu Tại Vị Trí 0) trên cây DOM.</p>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ NHẤT (Index = 0)</h1>
<p>Đoạn Văn Bản Thứ Nhất.</p>
</div>
<br>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ HAI (Index = 1)</h1>
<p>Đoạn Văn Bản Thứ Hai.</p>
</div>
<br>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ BA (Index = 2)</h1>
<p>Đoạn Văn Bản Thứ Ba.</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả :
Chúng ta thấy rằng thật đơn giản khi Duyệt / Tìm Kiếm các phần tử sử dụng các Phương Thức First, Last, Eq. Rất nhiều cách thức để Duyệt / Tìm kiếm các phần tử trên cây DOM. Tất cả luôn hữu ích, Có thể nói jQuery là một sự kết hợp rất hoàn hảo, sử dụng nhanh chóng khi thiết kế Website với các ngôn ngữ lập trình khác nhau.
+ jQuery luôn sử dụng Bộ chọn $( SELECTOR ) và các phương thức làm việc cùng với nó rất đơn giản
+ Công việc khi lập trình là kết hợp $( SELECTOR ) + Các Phương Thức
