JavaScript常用腳本總結（一）_javascript技巧
- PHP中文网原創
- 2016-05-16 16:11:101207瀏覽
這篇文章主要介紹了JavaScript常用腳本匯總系列的第一篇，給大家分享的是jquery限製文本框只能輸入數字、封裝DOMContentLoaded事件、用原生JS對AJAX做簡單封裝、跨域請求之JSONP、千分位格式化，有需要的夥伴們參考下。
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().replace( /[^0-9.]/g,''));
}).css("ime-mode", "disabled"); //CSS設定輸入法不可用
上面程式碼的作用是：只能輸入0-9的數字和小數點。
封裝DOMContentLoaded事件
//儲存domReady的事件佇列
eventQueue = [];
//判斷DOM是否載入完成
isReady = feadalse; false;
/*執行domReady()
*
*@param {function} *@caller
*/
function domReady(fn){
fn.call(window);
}
else{
eventQueue.push(fn);
/*domReady事件綁定
*
*@param null
*@execute 現代瀏覽器透過addEvListener綁定DOMContentLoaded,包括ie9
ie6-8透過判斷doScroll 🎜> function bindReady (){
if (isReady) return;
if (isBind) return;
{
document.addEventListener('DOMContentLoaded',execFn ,false);
}
else if (window.attachEvent) {
🎜> };
/*doScroll判斷ie6-8的DOM是否已載入完成
*
*@param null
*@execute doScroll 🎜> function doScroll(){
try {
document.documentElement.doScroll('left');
return setTimeout(doScroll,20);
};
execFn();
};
/*執行事件佇列
*
*@param null
*@param null
*@param null
*@param null
*@param bindReady()
*/
function execFn(){
if (!isReady) {
i = 0; i eventQueue[ }].call(window);
};
//js檔案1
domReady(function(){
});
//js檔案2
domReady(function(){
});
//，若是非同步載入的函數就不要注意會執行，
//因為非同步載入的js下載之前，DOMContentLoaded已經觸發，addEventListener執行時已經監聽不到了
用原生JS對AJAX做簡單封裝
用原生JS對AJAX做簡單封裝
首先，我們需要xhr物件。這對我們來說不難，封裝成一個函數
var createAjax = function() {
var xhr = null;
try {
//系統瀏覽器
> } catch (e1) {
try {
//非、瀏覽器
} catch (e2) {
window.alert("您的瀏覽器不支援ajax，請更換！
var ajax = function(conf) {
// 初始化
//type參數,可選
var type = conf.type;
var type = conf.type;
var url = conf.url;
//data參數可選，只有在post請求時需要
var data = conf.data;
//datatype參數可選 dataType;
//回呼函數可選
var success = conf.success;
if (type == null){
"get";
}
if (dataType == null){
//dataType參數可選，默認為text
dataType = "text";
}
//建立ajax引擎物件
var xhr = createAjax();
// 開啟
xhr.open(type, url, true);
xhr.open(type, url, true);
x 寄送" || type == "get") {
xhr.send(null);
} else if (type == "POST" || type == "post") {He ("content-type",
"application/x-www-form-urlencoded xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if (success != null){
//一般文字
}
}else if(dataType=="xml"||dataType=="XML") { //接收xml文件
🎜> }
＠) if(dataType=="json"datanType="JSON") {dataType=="JSON") {p||
if (success != null){
success(eval("(" xhr.responseText ")"));
}
}
};
};
url:"test.jsp",
data:"name=dipoo&info=good",
){
alert(data. name);
}
});
跨域請求之JSONP
跨域請求之JSONP
跨域請求
/**
* 增加對請求失敗的處理，雖然這個功能用處不太大，但研究了各個瀏覽器下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
* 6, 用IE9和IETester測試IE6/7/8 ，其readyState總為loading,loaded。沒出現過complete。
*
* 最後的實作想法：
* 1, IE9/Firefox/Safari/Chrome 成功回呼使用onload事件，錯誤回呼使用onerror事件
* 2, Opera 成功回呼事件（它壓根不支援onreadystatechange），由於其不支援onerror，這裡使用了延遲處理。
* 即等待與成功回呼success，success後標誌位元done置為true。 failure則不會執行，否則執行。
* 這裡延遲的時間取值很有技巧，之前取2秒，在公司測試沒問題。但回家用3G無線網路後發現即使引用的js檔案存在，但由於
* 網速過慢，failure還是先執行了，後執行了success。所以這裡取5秒是比較合理的。當然也不是絕對的。
* 3, IE6/7/8 成功回呼使用onreadystatechange事件，錯誤回呼幾乎是很難實現的。也是最有技術含量的。
* 參考了http://www.php.cn/
* 使用nextSibling，發現無法實現。
* 令人噁心的是，即使請求的資源文件不存在。它的readyState也會經歷「loaded」狀態。這樣你就沒辦法區分請求成功或失敗。
* 怕它了，最後使用前後台一起協調的機制來解決最後的這個難題。無論請求成功或失敗都讓其呼叫callback(true)。
* 此時已經將區別成功與失敗的邏輯放到了callback中，如果後台沒有返回jsonp則調用failure，否則調用success。
*
*
* 介面
* Sjax.load(url, {
* data 請求成功回呼函數
* failure // 請求失敗回呼函數
* scope // 回呼函數執行情境
> */
Sjax =
function(win){
var ie678 = !-[1,],
= win.document,
head = doc.getElementsByTagName('head')[0],
serialize(obj){
var a = [], key, val;
for(key in obj){
🎜> for(var i=0 ,len=val.length;i
a.push (key '='encodeURIComponent(val));
}
}
函數請求(url,opt){
function fn(){}
var opt = opt || {},
資料 = opt.data,
success = opt.success || fn,
失敗 = opt.failure || fn,
範圍 = opt.scope ||贏了，
timestamp = opt.timestamp;
if(data && typeof data == 'object'){
var script = doc.createElement('script') ;
function callback(isSucc){
if(isSucc){ }else{
//alert('warning: jsonp did not return.' );
}
🎜> }
// Handle memory leak in IE = null;
jsonp = undefined;
head.removeChild(script);
}
}
> setTimeout(function(){
} }
8){
script.onreadystatechange = function(){
var readyState = this.readyState;
yState == 'complete')){
callback(true );
}
}
//fixOnerror();
}else{
script.onload = function(){
callback(true);
}
script.onerror = function(){
} if(opera){
fixOnerror();
if(資料){
url = '?' 資料;
,
){
url = '&ts=';
} else{
url = '?ts='
🎜> }
script.src = url;
head.insertBefore( script, head.firstChild);
}
return {load:request};
}(this);
調用方式如下：
success : function(){alert(jsonp.name)},
🎜>
千分位格式化
var num = (num || 0).toString(),result = =toString = ''; while (num.length > 3) { result = ',' num.slice(-3) result 🎜> .
} if (num) { 結果= num 結果; }
return result;
}