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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
js 数组 fill() 填充方法
Nov 02 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
基于jQuery选择器的整理集合
2013/04/26 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
SQL Server笔试题
2012/01/10 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
毕业设计计划书
2014/01/09 职场文书
诚信承诺书模板
2014/05/26 职场文书
律师授权委托书范本
2014/10/07 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
golang 语言中错误处理机制
2021/08/30 Golang