你的位置:首页 > Java教程

[Java教程]JQuery入门——进度条


越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起。

JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用

<script src="jquery.js"></script>

语句来引用。如果不想下载jquery,可以引用web上的jquery库,从google或微软的服务器上引用他们的jquery库。

引用google的jquery库:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

引用微软的jquery库:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

推荐引用google或者微软的jquery库。许多用户在访问其他站点时,已经从谷歌或微软加载过 jQuery。所以结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。

所有的JQuery函数都位于一个 document ready 函数中

$(document).ready(function(){
--- jQuery functions go here ----
});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。

Jquery选择器就不讲了。两个要注意的地方都说完了,下面演示一个实例,我把以前用常规javascript写的进度条用jquery有重新写了一遍,虽说用的知识点都很简单,但写出来也费了我一番心思的,因为有些东西和常规javascript还是不一样,这个放在代码后面说。下面是进度条完整代码。

<!doctype html><html><head><meta charset="utf-8"><title>JQuery之进度条</title><!--加载google的jquer库y--><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script>$(document).ready(function(e) {  var i = 0;//进度百分值    //为id="btn"的元素(Start按钮)添加click事件,点击后进度条开始增长  $("#btn").click(function(){    //为id="val"的元素(进度条div)添加动画,在3000毫秒内进度条宽度从0px增长到300px    $("#val").animate({width:'300px'},3000);    $(this).attr("disabled",true);//禁用Start按钮    $("#btnp").attr("disabled",false);//启用Pause按钮    setPercent();//调用setPercent()函数,后面的百分数开始计数  });  //百分数计数函数  function setPercent()  {    //进度条未满的时候    if(i <= 100)    {      $("#percent").html(i+"%");//设置进度百分数的值      i = i + 1;//将进度百分值+1      st = setTimeout(setPercent,3);//每3毫秒执行一次本函数,相当于进度条每3毫秒增加1%    }    //进度条满的时候    else    {      clearTimeout(st);//进度百分数停止增加      $("#btnc").attr("disabled",false);//启用Clear按钮      $("#btnp").attr("disabled",true);//禁用Pause按钮    }  }  //为id="btnc"的元素(Clear按钮)添加click事件,点击后回到初始状态  $("#btnc").click(function(){    i = 0;//进度百分值置零    $("#val").css("width","0px");//进度条置零    $("#percent").html("0%");//进度百分值置零    $("#btnp").val("Pause");//Pause按钮value设置成"Pause"    $("#btn").attr("disabled",false);//启用Start按钮    $("#btnp").attr("disabled",true);//禁用Pause按钮    $("#btnc").attr("disabled",true);//禁用Clear按钮  });  //为id="btnp"的元素(Pause按钮)添加click事件,点击后进度条被暂停或继续  $("#btnp").click(function(){    //如果按钮值为Pause,表示按下之后暂停进度    if("Pause" == $("#btnp").val())    {      $("#val").stop();//停止进度条动画      clearTimeout(st);//停止百分值增长      $("#btnp").val("Go on");//将按钮值设置为Go on      $("#btnc").attr("disabled",false);//启用Clear按钮    }    //如果按钮值为Go on,表示按下之后继续进度    else    {      i = parseInt(delEnd($("#percent").html()));//获取暂停时的百分值字符串,去掉分号,并转为整数      var temp = 30 * (100 - i);//计算动画剩余时间      $("#val").animate({width:'300px'}, temp);//继续动画      setPercent();//百分值继续增长      $("#btnp").val("Pause");//将按钮值设置成"Pause"      $("#btnc").attr("disabled",true);//禁用Clear按钮    }  });    //去除百分值字符串里面的分号的函数  function delEnd(str)  {    var temp="";    for(var i=0; i < str.length-1; i++)    {      temp=temp+str[i];    }    return temp;  }});</script></head><body><div id="bar" style="width:300px; height:30px; border:solid 1px; float:left;"> <div id="val" style="height:100%; background-color:#03F; width:0px;"></div></div><div id="percent" style="float:left; line-height:30px;">0%</div><div style="clear:both"></div><br /><input id="btn" type="button" value="Start" /><br /><input id="btnc" type="button" value="Clear" disabled /><br /><input id="btnp" type="button" value="Pause" disabled /></body></html>

这次主要花了些时间在实现百分值的增长上,因为要用到setTimeout()函数,在jquery中,setTimeout(code,delay)里面的code如果是函数的话只要填函数名就行了,不需要引号,不需要括号。比如,有一个function show(),设置500ms后调用show(),在jquery中应该这样写:

setTimeout(show, 500);

而在传统javascript里面却要这样写:

setTimeout("show()", 500);

这一点对于setInterval()也是一样的。