JavaScript常用脚本汇总(一)


Posted in Javascript onMarch 04, 2015

jquery限制文本框只能输入数字

jquery限制文本框只能输入数字,兼容IE、chrome、FF(表现效果不一样),示例代码如下:

$("input").keyup(function(){ //keyup事件处理

   $(this).val($(this).val().replace(/\D|^0/g,''));

}).bind("paste",function(){ //CTR+V事件处理

   $(this).val($(this).val().replace(/\D|^0/g,''));

}).css("ime-mode", "disabled"); //CSS设置输入法不可用

上面的代码的作用是:只能输入大于0的正整数。

$("#rnumber").keyup(function(){  

        $(this).val($(this).val().replace(/[^0-9.]/g,''));  

    }).bind("paste",function(){  //CTR+V事件处理  

        $(this).val($(this).val().replace(/[^0-9.]/g,''));   

    }).css("ime-mode", "disabled"); //CSS设置输入法不可用

上面代码的作用是:只能输入0-9的数字和小数点。

封装DOMContentLoaded事件

//保存domReady的事件队列

    eventQueue = [];

    //判断DOM是否加载完毕

    isReady = false;

    //判断DOMReady是否绑定

    isBind = false;

    /*执行domReady()

     *

     *@param    {function}

     *@execute  将事件处理程序压入事件队列,并绑定DOMContentLoaded

     *          如果DOM加载已经完成,则立即执行

     *@caller

     */

    function domReady(fn){

        if (isReady) {

            fn.call(window);

        }

        else{

            eventQueue.push(fn);

        };

        bindReady();

    };

    /*domReady事件绑定

     *

     *@param    null

     *@execute  现代浏览器通过addEvListener绑定DOMContentLoaded,包括ie9+

     ie6-8通过判断doScroll判断DOM是否加载完毕

     *@caller   domReady()

     */

    function bindReady(){

        if (isReady) return;

        if (isBind) return;

        isBind = true;

        if (window.addEventListener) {

            document.addEventListener('DOMContentLoaded',execFn,false);

        }

        else if (window.attachEvent) {

            doScroll();

        };

    };

    /*doScroll判断ie6-8的DOM是否加载完成

     *

     *@param    null

     *@execute  doScroll判断DOM是否加载完成

     *@caller   bindReady()

     */

    function doScroll(){

        try{

            document.documentElement.doScroll('left');

        }

        catch(error){

            return setTimeout(doScroll,20);

        };

        execFn();

    };

    /*执行事件队列

     *

     *@param    null

     *@execute  循环执行队列中的事件处理程序

     *@caller   bindReady()

     */

    function execFn(){

        if (!isReady) {

            isReady = true;

            for (var i = 0; i < eventQueue.length; i++) {

                eventQueue[i].call(window);

            };

            eventQueue = [];

        };

    };

    //js文件1

    domReady(function(){

    });

    //js文件2

    domReady(function(){

    });

    //注意,如果是异步加载的js就不要绑定domReady方法,不然函数不会执行,

    //因为异步加载的js下载之前,DOMContentLoaded已经触发,addEventListener执行时已经监听不到了

用原生JS对AJAX做简单封装

首先,我们需要xhr对象。这对我们来说不难,封装成一个函数。

var createAjax = function() {

    var xhr = null;

    try {

        //IE系列浏览器

        xhr = new ActiveXObject("microsoft.xmlhttp");

    } catch (e1) {

        try {

            //非IE浏览器

            xhr = new XMLHttpRequest();

        } catch (e2) {

            window.alert("您的浏览器不支持ajax,请更换!");

        }

    }

    return xhr;

};   

然后,我们来写核心函数。

var ajax = function(conf) {

    // 初始化

    //type参数,可选

    var type = conf.type;

    //url参数,必填 

    var url = conf.url;

    //data参数可选,只有在post请求时需要

    var data = conf.data;

    //datatype参数可选    

    var dataType = conf.dataType;

    //回调函数可选

    var success = conf.success;

    if (type == null){

        //type参数可选,默认为get

        type = "get";

    }

    if (dataType == null){

        //dataType参数可选,默认为text

        dataType = "text";

    }

    // 创建ajax引擎对象

    var xhr = createAjax();

    // 打开

    xhr.open(type, url, true);

    // 发送

    if (type == "GET" || type == "get") {

        xhr.send(null);

    } else if (type == "POST" || type == "post") {

        xhr.setRequestHeader("content-type",

                    "application/x-www-form-urlencoded");

        xhr.send(data);

    }

    xhr.onreadystatechange = function() {

        if (xhr.readyState == 4 && xhr.status == 200) {

            if(dataType == "text"||dataType=="TEXT") {

                if (success != null){

                    //普通文本

                    success(xhr.responseText);

                }

            }else if(dataType=="xml"||dataType=="XML") {

                if (success != null){

                    //接收xml文档    

                    success(xhr.responseXML);

                }  

            }else if(dataType=="json"||dataType=="JSON") {

                if (success != null){

                    //将json字符串转换为js对象  

                    success(eval("("+xhr.responseText+")"));

                }

            }

        }

    };

};      

最后,说明一下此函数的用法。

    ajax({

        type:"post",

        url:"test.jsp",

        data:"name=dipoo&info=good",

        dataType:"json",

        success:function(data){

            alert(data.name);

        }

    }); 

跨域请求之JSONP

/**

 * JavaScript JSONP Library v0.3

 * Copyright (c) 2011 snandy

 * QQ群: 34580561

 * Date: 2011-04-26

 * 

 * 增加对请求失败的处理,虽然这个功能用处不太大,但研究了各个浏览器下script的差异性

 * 1, IE6/7/8 支持script的onreadystatechange事件

 * 2, IE9/10 支持script的onload和onreadystatechange事件

 * 3, Firefox/Safari/Chrome/Opera支持script的onload事件

 * 4, IE6/7/8/Opera 不支持script的onerror事件; IE9/10/Firefox/Safari/Chrome支持

 * 5, Opera虽然不支持onreadystatechange事件,但其具有readyState属性.这点甚是神奇

 * 6, 用IE9和IETester测试IE6/7/8,其readyState总为loading,loaded。没出现过complete。

 * 

 * 最后的实现思路:

 * 1, IE9/Firefox/Safari/Chrome 成功回调使用onload事件,错误回调使用onerror事件

 * 2, Opera 成功回调也使用onload事件(它压根不支持onreadystatechange),由于其不支持onerror,这里使用了延迟处理。

 *    即等待与成功回调success,success后标志位done置为true。failure则不会执行,否则执行。

 *    这里延迟的时间取值很有技巧,之前取2秒,在公司测试没问题。但回家用3G无线网络后发现即使所引用的js文件存在,但由于

 *    网速过慢,failure还是先执行了,后执行了success。所以这里取5秒是比较合理的。当然也不是绝对的。

 * 3, IE6/7/8 成功回调使用onreadystatechange事件,错误回调几乎是很难实现的。也是最有技术含量的。

 *    参考了http://stackoverflow.com/questions/3483919/script-onload-onerror-with-iefor-lazy-loading-problems

 *    使用nextSibling,发现不能实现。

 *    令人恶心的是,即使请求的资源文件不存在。它的readyState也会经历“loaded”状态。这样你就没法区分请求成功或失败。

 *    怕它了,最后使用前后台一起协调的机制解决最后的这个难题。无论请求成功或失败都让其调用callback(true)。

 *    此时已经将区别成功与失败的逻辑放到了callback中,如果后台没有返回jsonp则调用failure,否则调用success。

 *    

 * 

 * 接口

 * Sjax.load(url, {

 *    data      // 请求参数 (键值对字符串或js对象)

 *    success   // 请求成功回调函数

 *    failure   // 请求失败回调函数

 *    scope     // 回调函数执行上下文

 *    timestamp // 是否加时间戳

 * });

 * 

 */

Sjax =

function(win){

    var ie678 = !-[1,],

        opera = win.opera,

        doc = win.document,

        head = doc.getElementsByTagName('head')[0],

        timeout = 3000,

        done = false;

    function _serialize(obj){

        var a = [], key, val;

        for(key in obj){

            val = obj[key];

            if(val.constructor == Array){

                for(var i=0,len=val.length;i<len;i++){

                    a.push(key + '=' + encodeURIComponent(val[i]));

                }

            }else{

                a.push(key + '=' + encodeURIComponent(val));

            }

        }

        return a.join('&');

    }

    function request(url,opt){

        function fn(){}

        var opt = opt || {},

        data = opt.data,

        success = opt.success || fn,

        failure = opt.failure || fn,

        scope = opt.scope || win,

        timestamp = opt.timestamp;

        if(data && typeof data == 'object'){

            data = _serialize(data);

        }       

        var script = doc.createElement('script');

        function callback(isSucc){

            if(isSucc){

                if(typeof jsonp != 'undefined'){// 赋值右边的jsonp必须是后台返回的,此变量为全局变量

                    done = true;

                    success.call(scope, jsonp);

                }else{

                    failure.call(scope);

                    //alert('warning: jsonp did not return.');

                }

            }else{

                failure.call(scope);

            }

            // Handle memory leak in IE

            script.onload = script.onerror = script.onreadystatechange = null;

            jsonp = undefined;

            if( head && script.parentNode ){

                head.removeChild(script);

            }

        }

        function fixOnerror(){

            setTimeout(function(){

                if(!done){

                    callback();

                }

            }, timeout);

        }

        if(ie678){

            script.onreadystatechange = function(){

                var readyState = this.readyState;

                if(!done && (readyState == 'loaded' || readyState == 'complete')){

                    callback(true);

                }

            }

            //fixOnerror();

        }else{

            script.onload = function(){

                callback(true);

            }

            script.onerror = function(){

                callback();

            }

            if(opera){

                fixOnerror();

            }

        }

        if(data){

            url += '?' + data;

        }

        if(timestamp){

            if(data){

                url += '&ts=';

            }else{

                url += '?ts='

            }

            url += (new Date).getTime();

        }

        script.src = url;

        head.insertBefore(script, head.firstChild);

    }

    return {load:request};

}(this);

调用方式如下:

 Sjax.load('jsonp66.js', {

        success : function(){alert(jsonp.name)},

        failure : function(){alert('error');}

  }); 

千分位格式化

function toThousands(num) {

    var num = (num || 0).toString(), result = '';

    while (num.length > 3) {

        result = ',' + num.slice(-3) + result;

        num = num.slice(0, num.length - 3);

    }

    if (num) { result = num + result; }

    return result;

} 

以上就是本文给大家分享的javascript常用脚本了,希望大家能够喜欢。

Javascript 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 #Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 #Javascript
JavaScript中的关联数组问题
Mar 04 #Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 #Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 #Javascript
JavaScript设置获取和设置属性的方法
Mar 04 #Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 #Javascript
You might like
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JavaScript引用类型Function实例详解
2018/08/09 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python微信操控itchat的方法
2019/05/31 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Python 字符串池化的前提
2020/07/03 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
python实现扫雷游戏的示例
2020/10/20 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
物流专业大学生的自我鉴定
2013/11/13 职场文书
美术国培研修感言
2014/02/12 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
员工入职担保书范文
2014/04/01 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
2015年信访工作总结
2015/04/07 职场文书
土建技术员岗位职责
2015/04/11 职场文书
抢劫罪辩护词
2015/05/21 职场文书
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android