越来越觉得常规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入门——进度条的更多相关文章

  1. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. JQuery UI进度条——Progressbar

    1.先引入jquery和jquery-ui的js,例子如下: <link href="JqueryUI/jquery-ui.css" rel="stylesheet ...

  3. jquery自定义进度条与h5原生进度条

      介绍一款自定义的进度条 <div class="box-nine"> <div class="progress"> <!--一 ...

  4. jquery 圆形进度条

    最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己 ...

  5. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  6. html + css + jquery实现简单的进度条实例

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  7. bootstrap与jQuery结合的动态进度条

    此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...

  8. struts2：上传多个文件时实现带进度条、进度详细信息的示范

    上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...

  9. jq进度条

    <!doctype html><html><head><meta charset="utf-8"><title>JQue ...

随机推荐

  1. PHP 批量生成静态文件目录代码

    <?php /** * @author:jiangzaixing 20160314 * 获取静态文件方法 */ class StaticFile { const MAP_FILE_NAME = ...

  2. Ext.Net MVC 配置（1）

    1.在VS2012中创建MVC3项目 2.在项目总启动NuGet,在里面安装Ext.net 3.安装Ext.net 4.安装完成后项目中相关的配置文件就会有所改变了. 5.测试:运行mvc项目:htt ...

  3. Web Uploader - 功能齐全，完美兼容 IE 的上传组件

    文件上传是网站和 Web 应用程序的常用功能,一直没有一款完美的文件上传组件,因此让很多开发人员碰到头疼的浏览器兼容问题. WebUploader 是由 Baidu FEX 团队开发的一款以 HTML ...

  4. Hexo - 快速，轻量，强大的 Node.js 博客框架

    Hexo 是一个快速,轻量,强大的 Node.js 博客框架.带给你难以置信的编译速度,瞬间生成静态文件:支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件:只需要一个命令 ...

  5. 一款实用的viewer.js 图片相册

    Viewer.js 是一款强大的图片相册插件,像SNS交友网站一般都会用到点击缩略图,弹出层大图片,而且弹出层有多个控制按钮,比如放大缩小.旋转.撤回等,底部有缩略图列表可切换. 支持移动设备触摸事件 ...

  6. 通过组策略实现Firefox自动以当前域账号登录MOSS站点---（原创）

    忘忧草原创,转发请保留本人的大名,谢谢,如果需要文档的请找我索取 前言 通过组策略实现基于AD的windows验证的sharepoint站点在火狐下自动以当前域账号登录. 操作步骤-在服务器添加策略工 ...

  7. ARP投毒及其防御方法

    1.攻击原理 ARP欺骗就是中间人欺骗pc机,告诉pc机它是服务器.再欺骗服务器,告诉服务器它就是pc机.以致获取服务器与pc机的会话信息. 中间人欺骗服务器时,会给服务器发一个报文,发之前把报文中的 ...

  8. 部署基于国际版Azure的SharePoint三层架构服务器场

    前言 微软Azure国际版已经很普及了,这里没有用国内版(世纪互联),用的是国际版,当然是由于公司性质的缘故.这里一步步图文的方式,分享给大家创建Azure国际版的SharePoint三层架构的过程, ...

  9. 使用powershell部署WSP包

    代码如下,先卸载,然后删除,然后添加,然后安装. 卸载之后会重启IIS,所以等待几秒钟,直到卸载完成. 添加snapin $snapin = Get-PSSnapin | Where-Object { ...

  10. oracle中Window和Window Group

    参考文献: http://www.5ienet.com/note/html/scheduler/oracle-scheduler-using-window.shtml window概念 此Window ...