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 = ;//进度百分值 //为id="btn"的元素（Start按钮）添加click事件，点击后进度条开始增长
$("#btn").click(function(){ //为id="val"的元素（进度条div）添加动画，在3000毫秒内进度条宽度从0px增长到300px
$("#val").animate({width:'300px'},);
$(this).attr("disabled",true);//禁用Start按钮
$("#btnp").attr("disabled",false);//启用Pause按钮
setPercent();//调用setPercent()函数，后面的百分数开始计数
}); //百分数计数函数
function setPercent()
{
//进度条未满的时候
if(i <= )
{
$("#percent").html(i+"%");//设置进度百分数的值
i = i + ;//将进度百分值+1
st = setTimeout(setPercent,);//每3毫秒执行一次本函数，相当于进度条每3毫秒增加1%
} //进度条满的时候
else
{
clearTimeout(st);//进度百分数停止增加
$("#btnc").attr("disabled",false);//启用Clear按钮
$("#btnp").attr("disabled",true);//禁用Pause按钮
}
} //为id="btnc"的元素（Clear按钮）添加click事件，点击后回到初始状态
$("#btnc").click(function(){
i = ;//进度百分值置零
$("#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 = * ( - i);//计算动画剩余时间
$("#val").animate({width:'300px'}, temp);//继续动画
setPercent();//百分值继续增长
$("#btnp").val("Pause");//将按钮值设置成"Pause"
$("#btnc").attr("disabled",true);//禁用Clear按钮
}
}); //去除百分值字符串里面的分号的函数
function delEnd(str)
{
var temp="";
for(var i=; i < str.length-; 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;">%</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()也是一样的。
JQuery入门——进度条的更多相关文章
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- JQuery UI进度条——Progressbar
1.先引入jquery和jquery-ui的js,例子如下: <link href="JqueryUI/jquery-ui.css" rel="stylesheet ...
- jquery自定义进度条与h5原生进度条
介绍一款自定义的进度条 <div class="box-nine"> <div class="progress"> <!--一 ...
- jquery 圆形进度条
最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己 ...
- 基于Jquery的进度条插件(实用)
Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQuery 进 ...
- html + css + jquery实现简单的进度条实例
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- bootstrap与jQuery结合的动态进度条
此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...
- struts2：上传多个文件时实现带进度条、进度详细信息的示范
上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...
- jq进度条
<!doctype html><html><head><meta charset="utf-8"><title>JQue ...
随机推荐
- Maven+SSM框架实现简单的增删改查
Spring介绍: spring 使用基本的 JavaBean 来完成以前只可能由 EJB 完成的事情.然而, Spring的用途不仅限于服务器端的开发.从简单性.可测试性和松耦合的角度而言,任何Ja ...
- Webform（Linq高级查、分页、组合查询）
一.linq高级查 1.模糊查(包含) 1 public List<User> Select(string name) 2 { 3 return con.User.Where(r => ...
- 如何让C#像JavaScript一样编程
JavaScript是一门动态语言,可以动态的给对象添加属性和方法,非常方便.那么有没有一种方式可以让C#也具备动态添加属性和方法的能力,像Javascript一样进行编程? 下面就介绍一个很不错的框 ...
- 13个风格独特的关于页面（About Pages）设计
如何向其他人呈现你自己和你的作品呢?关于页面的设计是非常重要的,以让你的观众更多地了解你,你的工作和你的想法.这是一个很好的方式来获得更加个性化的展示效果. 设计一个漂亮的关于页面是具有挑战性的.出于 ...
- [deviceone开发]-纳豆项目源码开源
一.简介 已上线的纳豆项目开源.这个App做的非常好,细节处理的很流畅,使用了很多小的动画效果,极力推荐,很多功能可以从这个应用中获取代码和灵感. 二.效果图 三.相关下载 androi ...
- jQuery的document ready与 onload事件——你真的思考过吗？
在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...
- 总结CSS3新特性(Transition篇)
CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率. 可以让属性的变化过程持续一段时间,而不是立即生效.比如,将元素的颜色从白色改为黑色,通常这个改 ...
- sharepoint2010如何本地化WebPart的Category、WebDisplayName 和 WebDescription 属性
在项目中经常需要实现多语言其中包括webpart的属性也需要.那么如何实现呢? 首先需要资源文件,利用资源文件实现语言的翻译,如下图: 创建好资源后,下面我们来实现webpart属性的多语言.方法代码 ...
- ArcGis设置到 Oracle 的连接
设置到 Oracle 的连接 地理数据 » 管理地理数据库 » Oracle 中的地理数据库 要建立从客户端计算机到 Oracle 数据库的连接,必须在客户端计算机上安装 Oracle 客户端应用程序 ...
- 微信小程序需要https后台的创业机会思考
最近比较关注微信小程序,而且微信小程序的后台必须强制要求https, https相对http成本要高很多了. 这里我感觉有2个商机 (1)提供https 中转服务器 ,按流量来收费 (2) 微信小程序 ...