%20thường%20được%20sử%20dụng)
Người Viết : ViKiMi Editor
Sử dụng lệnh vòng lặp Do … While trong jQuery, tạo một Website có khả năng tương tác cao
Khi chúng ta đã quen làm việc với câu lệnh vòng lặp của jQuery, điều đó mang lại cho chúng ta thấy rằng sự thuận lợi hơn nhiều. Và có cảm giác như Website hoạt động tốt hơn, nhanh hơn, hiệu quả hơn. jQuery cung cấp rất nhiều khả năng làm việc linh hoạt cho lập trình Website. Có thể nói lập trình Website với jQuery là cách làm cho Website mạnh hơn.
jQuery tạo nên các xử lý tác vụ cực kỳ linh hoạt!
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 :
+ Tập lệnh sử dụng mạnh mẽ nhất có thể
+ Cung cấp các cách kết nối dữ liệu tối ưu hơn nữa
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 DO … WHILE
Vòng lặp do … while xác định một khối mã lệnh sẽ được thực thi ít nhất là một lần và được lặp lại nếu điều kiện kiểm tra là đúng. Khi điều kiện thực hiện không còn đúng nữa thì khối mã lệnh đó sẽ không được thực hiện tiếp.
Lệnh Do…while được sử dụng khi bạn muốn chạy một khối mã ít nhất một 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 Do … While :
do {
code block to be executed
}
while (condition);
Chúng ta sẽ xem một ví dụ cụ thể để dễ dàng làm việc với vòng lặp Do … While 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 Do … While trong jQuery, Tạo điểm nhấn mạnh cho các Sản Phẩm có mã giảm giá trên một Trang Web.
Nội dung Code của vòng lặp Do … While :
do {
if( j== 0 ){
$(“#welcome_to_Bee”).html(“Greeting Customers <b> In BEE SHOP </b>”);
}
element_2 = couponElements.eq(j);
var_2 = element_2.text();
if( var_2 == “Get Coupons”){
element_2.css(“background-color”, “red”);
element_2.css(“opacity”, “0.8”);
element_2.css(“font-size”, “20px”);
}
j++;
} while ( j < couponElements.length );
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 =0;
var element_2, var_2;
var couponElements = $(".product_coupon");
do {
if( j== 0 ){
$("#welcome_to_Bee").html("Greeting Customers <b> In BEE SHOP </b>");
}
element_2 = couponElements.eq(j);
var_2 = element_2.text();
if( var_2 == "Get Coupons"){
element_2.css("background-color", "red");
element_2.css("opacity", "0.8");
element_2.css("font-size", "20px");
}
j++;
} while ( j < couponElements.length );
});
});
</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 Do … While trong jQuery. Nó đem lại cho chúng ta hiệu quả thật tốt khi thao tác trên trang buôn bán. Một 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ị các sản phẩm Bán chạy nhất 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 !
