jQuery 是一款廣泛應用于前端開發的 JavaScript 庫，它提供了很多實用的功能和方法，能夠輔助開發者更加高效地完成各種前端工作。其中，進度條是常用的一種效果，可以用于展示頁面加載、文件上傳、任務進度等。
下面是一個使用 jQuery 實現的簡單進度條實例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 進度條實例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.progress {
width: 400px;
height: 20px;
border: 1px solid #ccc;
position: relative;
}
.progress-bar {
height: 100%;
background-color: #95B8E7;
position: absolute;
left: 0;
top: 0;
transition: width 0.3s linear;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar"></div>
</div>
<script>
$(function() {
var i = 0;
setInterval(function() {
i++;
$(".progress-bar").css("width", i + "%");
if (i === 100) {
clearInterval();
}
}, 30);
});
</script>
</body>
</html>在這個實例中，我們首先創建了一個名為 progress 的 div，作為進度條的外層容器。然后在其中嵌套一個名為 progress-bar 的 div，作為進度條的進度條。
通過 CSS 樣式對進度條的外觀進行定義，其中 progress 的寬度和高度、邊框等屬性設置，使得它成為一個矩形框。而 progress-bar 的高度和背景顏色設置，使得它能夠隨著進度條的變化而改變顏色和高度。
在 JavaScript 中，我們使用 jQuery 的 $() 函數來簡化 DOM 元素的獲取。首先用 setInterval() 函數實現了一個定時器，每 30 毫秒執行一次，并且每次讓進度條的寬度加 1%。當寬度達到 100% 時，使用 clearInterval() 函數終止定時器的執行。
通過這個實例，我們可以看到 jQuery 在實現前端效果方面的優勢，簡化了 DOM 操作和初始化過程，提高了開發效率。
上一篇css tr內容上邊距
下一篇iris解析json耗時