09/9
2015
现在可以直接设置进度条的长度、或手动指定，以及读取特定属性来设置。
先看看基础结构：
<div id="box">
<div id="lbar" data-l="70"></div>
</div>
<br><br>
<input type="button" id="setLBtn" value="设置一个进度">
<style>
#box{width: 500px;height: 16px;border-radius: 8px;background: #ccc;}
#lbar{width: 0px;height: 16px;border-radius: 8px;background: #0c0;transition:all .4s;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
js代码：
function setL (element,length) {
element.width(element.parent().eq(0).width()*length);
}
//读取特定属性来设置进度，适用于多个进度条的场景
var allL=$("[data-l]");
for (var i = 0; i < allL.length; i++) {
setL ($(allL[i]),parseInt($(allL[i]).attr("data-l"),10)/100);
};
//直接设置进度条的百分比
setL($("#lbar"),0.4);
//手动指定进度条的百分比
$("#setLBtn").click(function (argument) {
setL($("#lbar"),parseInt(window.prompt("请输入一个表示百分比的整数", ""),10)/100);
});[/code]
这次学到了把JQuery对象和DOM对象互相转换的方法。 JQuery对象和DOM对象的方法不通用，例如上面代码中读取特定属性的代码中，本来取到的属性的集合是jquery对象，可是在for循环里用了索引之后就成了DOM对象了，然后使用函数里的parent()方法就报错。这时候需要把索引之后的DOM对象重新转换为Jquery对象。
[code lang="js"]//把Jquery对象转换为dom对象，方法1：使用索引
$("p")[0];
//把Jquery对象转换为dom对象，方法2：使用get()方法，参数和索引一样
$("p").get(0);
//把DOM对象转换为Jquery对象，使用$()包含DOM对象
var box=document.getElementById("box");
box=$(box);[/code]
查看demo
