Người Viết : ViKiMi Editor

Sử dụng vòng lặp For trong jQuery tạo thiết kế giao diện Website hiệu quả tương tác cao
jQuery làm việc với các vòng lặp rất tốt, nhờ vậy khi chúng ta muốn tạo ra các xử lý nhanh nhất thì lựa chọn jQuery là hoàn toàn hợp lý. jQuery cho phép lập trình Website thật hiệu quả, Các xử lý với jQuery sẽ thực hiện phía Client nhờ đó tối ưu Website sẽ đạt được. Những hiển thị dành cho Client sẽ tốt hơn so với việc bạn chỉ quan tâm tới xử lý phía Server.
jQuery cho phép chúng ta tạo xử lý tốt hơn tại Client !!!
Một ngôn ngữ lập trình bình thường có những gì thì bạn cũng có thể tìm thấy những thứ như vậy với jQuery.
jQuery đem lại cho chúng ta nhiều thứ khi lập trình :
+ Truy vấn và tìm những phần tử HTML (Giao diện)
+ Các khai báo biến thông thường
+ Các định nghĩa chức năng hàm để có những xử lý khác nhau
+ Các biểu thức tính toán cần thiết
+ Các tập hợp lệnh có điều kiện, tập hợp lệnh vòng lặp có điều kiện etc…
+ Các tác vụ xử lý kết nối dữ liệu, xử lý File cần thiết etc…
Chúng ta có thể làm được rất nhiều thứ khi lập trình với jQuery.
Nếu bạn quen với những câu lệnh vòng lặp thì bạn cũng thấy rằng jQuery cũng cung cấp cho chúng ta đầy đủ những câu lệnh vòng lăp như bất kỳ ngôn ngữ nào, cách sử dụng cũng vậy. Và chúng ta có thể xem qua những câu lệnh vòng lặp có thể có :
+ Câu lệnh vòng lặp While
+ Câu lệnh vòng lặp Do … While
+ Câu lệnh vòng lặp For
+ Câu lệnh vòng lặp For-each
Thực hiện xử lý dữ liệu nhờ những lệnh vòng lặp giúp ích cho các lệnh có điều kiện và dễ dàng tạo một chương trình xử lý các dữ liệu phức tạp. Do đó, nếu bạn sử dụng jQuery thì tập những câu lệnh vòng lặp là điều bạn cần biết và quen thuộc.
Chúng ta sẽ xem cách làm việc của từng câu lệnh vòng lặp trong jQuery.
LỆNH VÒNG LẶP FOR
Vòng lặp For cho phép thực thi một khối mã lệnh một số lần; bằng cách chỉ định số lần thực thi cho vòng lặp For.
Vòng lặp For dựa vào các biểu thức / expression để hoạt động thực thi khối mã lệnh theo các yêu cầu lặp khác nhau.
Các vòng lặp có thể thực thi một khối mã nhiều lần.
[ Các vòng lặp có thể thực thi một khối mã miễn là một điều kiện cụ thể là đúng ]
Cú pháp của lệnh vòng lặp For :
for (expression 1; expression 2; expression 3) {
// code block to be executed
}
Expression 1 /Biểu thức 1 được thực thi (một lần) trước khi thực thi khối mã.
Expression 2 /Biểu thức 2 xác định điều kiện để thực thi khối mã.
Expression 3 /Biểu thức 3 được thực thi (mỗi lần) sau khi khối mã đã được thực thi.
Chúng ta sẽ xem một ví dụ cụ thể để dễ dàng làm việc với vòng lặp For trong jQuery. Điều này, giúp tạo một Giao diện người dùng tốt hơn.
EXAMPLE ::
Sử dụng vòng lặp for trong jQuery, Tạo hiển thị tốt hơn cho Table Sản Phẩm trên một Trang Web buôn bán. Table sẽ hiển thị nổi bật các sản phẩm tốt nhất với mã giảm giá của sản phẩm.
Nội dung Code của vòng lặp for :
for (j =0 ;j < rowElements.length; j++) {
if( j== 0 ){
$(“#welcome_to_Bee”).html(“Greeting Customers <b style=’color:green;’> In BEE SHOP </b>”);
}
element_2 = rowElements.eq(j); /* Select table row based on row index */
if(element_2.find(“.product_coupon”).length){
var_2 = element_2.find(“.product_coupon”).text();
if( var_2 == “Get Coupons”){
element_2.css(“background-color”, “red”);
element_2.css(“opacity”, “0.8”);
element_2.css(“font-size”, “20px”);
}
}
}
Nội dung Code đầy đủ trên trang sanpham.html
Hình Ảnh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var j, element_2, var_2;
var couponElements = $(".product_coupon");
var rowElements = $("tr");
for (j =0 ;j < rowElements.length; j++) {
if( j== 0 ){
$("#welcome_to_Bee").html("Greeting Customers <b style='color:green;'> In BEE SHOP </b>");
}
element_2 = rowElements.eq(j); /* Select table row based on row index */
if(element_2.find(".product_coupon").length){
var_2 = element_2.find(".product_coupon").text();
if( var_2 == "Get Coupons"){
element_2.css("background-color", "red");
element_2.css("opacity", "0.8");
element_2.css("font-size", "20px");
}
}
}
});
});
</script>
</head>
<body>
<p id="welcome_to_Bee"> Loading ... </p>
<p id="test">These are products <b>in Bee Shop</b> .</p>
<table class="tbl_company" border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Coupons</th>
</tr>
<tr>
<td>Quần Áo</td>
<td><p class="price_product">SALE 200000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
<tr>
<td>Giày Dép</td>
<td><p class="price_product">SALE 300000</p></td>
<td class="product_coupon">No Coupons</td>
</tr>
<tr>
<td>Mũ Nón</td>
<td><p class="price_product">SALE 150000</p></td>
<td class="product_coupon">No Coupons</td>
</tr>
<tr>
<td>Trang Sức</td>
<td><p class="price_product">SALE 150000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
<tr>
<td>Mỹ Phẩm</td>
<td><p class="price_product">SALE 500000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
</table>
<br/>
<button id="btn1">Best Sale</button>
</body>
</html>
Như vậy, thật đơn giản khi sử dụng câu lệnh For trong jQuery. Vòng lặp For trong jQuery cho phép tạo ra xử lý nhiều lần để thực thi khối mã lệnh, khối mã lệnh sẽ chứa các yêu cầu thiết kế cần thiết. Nhờ vòng lặp For chúng ra sẽ xử lý phần giao diện hiển thị tốt hơn, đồng thời cũng tăng tốc tốt cho Website. Nguyên nhân đó là tất cả xử lý hiển thị sẽ thực hiện trên phía Client, nhờ vậy tốc độ tốt hơn, linh hoạt hơn.
Thật tốt khi sử dụng jQuery!