JavaScript常用腳本匯總(一)
jquery限制文本框只能輸入數(shù)字
jquery限制文本框只能輸入數(shù)字,兼容IE、chrome、FF(表現(xiàn)效果不一樣),示例代碼如下:
$("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設(shè)置輸入法不可用
上面的代碼的作用是:只能輸入大于0的正整數(shù)。
$("#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設(shè)置輸入法不可用
上面代碼的作用是:只能輸入0-9的數(shù)字和小數(shù)點(diǎn)。
封裝DOMContentLoaded事件
//保存domReady的事件隊(duì)列
eventQueue = [];
//判斷DOM是否加載完畢
isReady = false;
//判斷DOMReady是否綁定
isBind = false;
/*執(zhí)行domReady()
*
*@param {function}
*@execute 將事件處理程序壓入事件隊(duì)列,并綁定DOMContentLoaded
* 如果DOM加載已經(jīng)完成,則立即執(zhí)行
*@caller
*/
function domReady(fn){
if (isReady) {
fn.call(window);
}
else{
eventQueue.push(fn);
};
bindReady();
};
/*domReady事件綁定
*
*@param null
*@execute 現(xiàn)代瀏覽器通過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();
};
/*執(zhí)行事件隊(duì)列
*
*@param null
*@execute 循環(huán)執(zhí)行隊(duì)列中的事件處理程序
*@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方法,不然函數(shù)不會執(zhí)行,
//因?yàn)楫惒郊虞d的js下載之前,DOMContentLoaded已經(jīng)觸發(fā),addEventListener執(zhí)行時(shí)已經(jīng)監(jiān)聽不到了
用原生JS對AJAX做簡單封裝
首先,我們需要xhr對象。這對我們來說不難,封裝成一個(gè)函數(shù)。
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;
};
然后,我們來寫核心函數(shù)。
var ajax = function(conf) {
// 初始化
//type參數(shù),可選
var type = conf.type;
//url參數(shù),必填
var url = conf.url;
//data參數(shù)可選,只有在post請求時(shí)需要
var data = conf.data;
//datatype參數(shù)可選
var dataType = conf.dataType;
//回調(diào)函數(shù)可選
var success = conf.success;
if (type == null){
//type參數(shù)可選,默認(rèn)為get
type = "get";
}
if (dataType == null){
//dataType參數(shù)可選,默認(rèn)為text
dataType = "text";
}
// 創(chuàng)建ajax引擎對象
var xhr = createAjax();
// 打開
xhr.open(type, url, true);
// 發(fā)送
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字符串轉(zhuǎn)換為js對象
success(eval("("+xhr.responseText+")"));
}
}
}
};
};
最后,說明一下此函數(shù)的用法。
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
*
* 增加對請求失敗的處理,雖然這個(gè)功能用處不太大,但研究了各個(gè)瀏覽器下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屬性.這點(diǎn)甚是神奇
* 6, 用IE9和IETester測試IE6/7/8,其readyState總為loading,loaded。沒出現(xiàn)過complete。
*
* 最后的實(shí)現(xiàn)思路:
* 1, IE9/Firefox/Safari/Chrome 成功回調(diào)使用onload事件,錯(cuò)誤回調(diào)使用onerror事件
* 2, Opera 成功回調(diào)也使用onload事件(它壓根不支持onreadystatechange),由于其不支持onerror,這里使用了延遲處理。
* 即等待與成功回調(diào)success,success后標(biāo)志位done置為true。failure則不會執(zhí)行,否則執(zhí)行。
* 這里延遲的時(shí)間取值很有技巧,之前取2秒,在公司測試沒問題。但回家用3G無線網(wǎng)絡(luò)后發(fā)現(xiàn)即使所引用的js文件存在,但由于
* 網(wǎng)速過慢,failure還是先執(zhí)行了,后執(zhí)行了success。所以這里取5秒是比較合理的。當(dāng)然也不是絕對的。
* 3, IE6/7/8 成功回調(diào)使用onreadystatechange事件,錯(cuò)誤回調(diào)幾乎是很難實(shí)現(xiàn)的。也是最有技術(shù)含量的。
* 參考了http://stackoverflow.com/questions/3483919/script-onload-onerror-with-iefor-lazy-loading-problems
* 使用nextSibling,發(fā)現(xiàn)不能實(shí)現(xiàn)。
* 令人惡心的是,即使請求的資源文件不存在。它的readyState也會經(jīng)歷“l(fā)oaded”狀態(tài)。這樣你就沒法區(qū)分請求成功或失敗。
* 怕它了,最后使用前后臺一起協(xié)調(diào)的機(jī)制解決最后的這個(gè)難題。無論請求成功或失敗都讓其調(diào)用callback(true)。
* 此時(shí)已經(jīng)將區(qū)別成功與失敗的邏輯放到了callback中,如果后臺沒有返回jsonp則調(diào)用failure,否則調(diào)用success。
*
*
* 接口
* Sjax.load(url, {
* data // 請求參數(shù) (鍵值對字符串或js對象)
* success // 請求成功回調(diào)函數(shù)
* failure // 請求失敗回調(diào)函數(shù)
* scope // 回調(diào)函數(shù)執(zhí)行上下文
* timestamp // 是否加時(shí)間戳
* });
*
*/
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);
調(diào)用方式如下:
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常用腳本了,希望大家能夠喜歡。
相關(guān)文章
Cropper.js 實(shí)現(xiàn)裁剪圖片并上傳(PC端)
本案例是參考cropper站點(diǎn)實(shí)例,進(jìn)行修改簡化。接下來通過本文給大家分享Cropper.js 實(shí)現(xiàn)裁剪圖片并上傳(PC端) 功能,需要的朋友參考下吧2017-08-08SpringMVC+bootstrap table實(shí)例詳解
本文通過實(shí)例給大家介紹了SpringMVC+bootstrap-table,需要的朋友可以參考下2017-06-06javascript中apply和call方法的作用及區(qū)別說明
本篇文章主要是對javascript中apply和call方法的作用及區(qū)別進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02小程序websocket心跳庫(websocket-heartbeat-miniprogram)
這篇文章主要介紹了小程序websocket心跳庫(websocket-heartbeat-miniprogram),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02讓 JavaScript 輕松支持函數(shù)重載 (Part 2 - 實(shí)現(xiàn))
在上一篇文章里,我們設(shè)計(jì)了一套能在JavaScript中描述函數(shù)重載的方法,這套方法依賴于一個(gè)叫做Overload的靜態(tài)類,現(xiàn)在我們就來看看如何實(shí)現(xiàn)這個(gè)靜態(tài)類。2009-08-08