jQueryはテキストボックスを制限して、数字のみを入力します
jQueryは、IE、Chrome、およびFFと互換性のある番号のみを入力するようにテキストボックスを制限します(パフォーマンス効果は異なります)。サンプルコードは次のとおりです。
コードコピーは次のとおりです。
$( "input")。keyup(function(){// keyupイベント処理
$(this).val($(this).val()。置換(// d |^0/g、 ''));
})。bind( "paste"、function(){// ctr+vイベント処理
$(this).val($(this).val()。置換(// d |^0/g、 ''));
})。css( "ime-mode"、 "disabled"); // CSS設定入力メソッドは使用できません
上記のコードの目的は、0より大きい正の整数のみを入力できることです。
コードコピーは次のとおりです。
$( "#rnumber")。keyup(function(){
$(this).val($(this).val()。置換(/[^0-9。]/g、 ''));
})。bind( "paste"、function(){// ctr+vイベント処理
$(this).val($(this).val()。置換(/[^0-9。]/g、 ''));
})。css( "ime-mode"、 "disabled"); // CSS設定入力メソッドは使用できません
上記のコードの目的は、次のとおりです。10〜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);
}
それ以外{
eventqueue.push(fn);
};
bindready();
};
/*DOMREADYイベントバインディング
*
*@param null
*@IE9+を含むAddEvListenerを介してDomContentLoadedをバインドする最新のブラウザを実行します
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
*@doscrollを実行すると、DOMが読み込まれているかどうかが判断されます
*@caller bindready()
*/
function doscroll(){
試す{
document.documentelement.doscroll( 'left');
}
catch(error){
return setimeout(doscroll、20);
};
execfn();
};
/*実行イベントキュー
*
*@param null
*@キューでループ実行イベントハンドラーを実行します
*@caller bindready()
*/
関数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(){
});
//非同期にロードされている場合は、domreadyメソッドに結合しないでください。そうしないと、関数は実行されません。
//非同期ロードJSダウンロードの前に、DomContentLoadedが起動され、実行時にAddEventListenerを聞くことができないため
ネイティブJSを使用したAJAXの単純なカプセル化
まず、XHRオブジェクトが必要です。これは私たちにとって難しくありません。それを関数にカプセル化します。
コードコピーは次のとおりです。
var createajax = function(){
var xhr = null;
試す {
// IEシリーズブラウザ
xhr = new ActiveXObject( "microsoft.xmlhttp");
} catch(e1){
試す {
// IEブラウザではありません
xhr = new xmlhttprequest();
} catch(e2){
window.alert( "ブラウザはajaxをサポートしていません。交換してください!");
}
}
xhrを返します。
};
次に、コア関数を書きましょう。
コードコピーは次のとおりです。
var ajax = function(conf){
//初期化
//パラメーターを入力、オプション
var type = conf.type;
// URLパラメーター、必須
var url = conf.url;
//データパラメーターはオプションであり、投稿を要求するときにのみ必要です
var data = conf.data;
// DatAtypeパラメーターはオプションです
var datatype = conf.datatype;
//コールバック関数はオプションです
var success = conf.success;
if(type == null){
//タイプパラメーターはオプションで、デフォルトはgetです
type = "get";
}
if(dataType == null){
// datatypeパラメーターはオプションで、デフォルトはテキストになります
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"、
「アプリケーション/x-www-form-urlencoded」);
xhr.send(data);
}
xhr.onedeadystatechange = function(){
if(xhr.readystate == 4 && xhr.status == 200){
if(dataType == "text" || datAtype == "text"){
if(success!= null){
//通常のテキスト
成功(xhr.responsetext);
}
} else if(dataType == "xml" || datAtype == "xml"){
if(success!= null){
// XMLドキュメントを受信します
成功(xhr.responsexml);
}
} else if(dataType == "json" || datAtype == "json"){
if(success!= null){
// JSON文字列をJSオブジェクトに変換します
成功(eval( "("+xhr.responsetext+")"));
}
}
}
};
};
最後に、この関数の使用について説明しましょう。
コードコピーは次のとおりです。
ajax({
タイプ:「投稿」、
URL:「test.jsp」、
データ:「name = dipoo&info = good」、
データ型:「JSON」、
成功:function(data){
alert(data.name);
}
});
クロスドメインはJSONPを要求します
コードコピーは次のとおりです。
/**
* JavaScript JSONPライブラリv0.3
* Copyright(c)2011 Snandy
* QQグループ:34580561
*日付:2011-04-26
*
*要求の障害の処理を増やします。この関数はあまり役に立たないが、各ブラウザのスクリプトの違いが研究された。
* 1、IE6/7/8スクリプトをサポートするonreadystatechangeイベント
* 2、IE9/10は、スクリプトのオンロードとoneadedStateChangeイベントをサポートしています
* 3、Firefox/Safari/Chrome/Operaは、スクリプトのオンロードイベントをサポートしています
* 4、IE6/7/8/OperaはScript Onerrorイベントをサポートしていません。 IE9/10/Firefox/Safari/Chromeサポート
* 5。OperaはOnreadedStateChangeイベントをサポートしていませんが、ReadyStateプロパティがあります。これは非常に魔法です
* 6。IE9およびIETESTERでIE6/7/8をテストし、そのReadyStateは常にロードされてロードされています。完全なものはありません。
*
*最終的な実装アイデア:
* 1、IE9/Firefox/Safari/Chromeは、Onloadイベントを使用するために正常に呼び戻され、エラーコールバックはOnerrorイベントを使用します
* 2、Operaはコールバックに成功します。また、Onloadイベントも使用します(OnreadedStateChangeはまったくサポートしません)。 Onerrorをサポートしていないため、ここでは遅延処理が使用されます。
*つまり、成功を待ち、コールバックに成功し、成功後に行われたフラグビットが真実に設定されています。障害は実行されません。そうしないと、実行されます。
*ここで遅延した時間の値を取ることは非常に熟練しています。前に2秒かかり、会社のテストに問題はありません。しかし、3Gワイヤレスネットワークを使用するために家に帰った後、参照されたJSファイルが存在しているにもかかわらず、それは
*インターネットの速度が遅すぎると、最初に障害が実行され、次に成功します。したがって、ここで5秒かかる方が合理的です。もちろん、それは絶対的ではありません。
* 3、IE6/7/8成功したコールバックは、onreadystatechangeイベントを使用し、エラーコールバックを実装するのはほとんど困難です。また、最も技術的です。
*参照http://stackoverflow.com/questions/3483919/script-onload-onerror-with-lazy-loading-brems
* NextSiblingを使用して、実装できないことがわかりました。
*嫌なことは、要求されたリソースファイルが存在しない場合でも。そのReadyStateは、「ロードされた」状態も発生します。このようにして、リクエストが成功するか失敗するかを知ることはできません。
*私はそれを恐れているので、最終的な問題を解決するために、最終オフィスとバックオフィスの間の調整のメカニズムを最終的に使用します。成功や失敗に関係なく、リクエストコールバック(true)を作成します。
*現時点では、成功と失敗を区別するロジックがコールバックに入れられています。背景がJSONPを返さない場合は、失敗を呼び出し、そうでない場合は成功を呼び出します。
*
*
*インターフェイス
* sjax.load(url、{
*データ//パラメーターを要求する(キー値ペア文字列またはJSオブジェクト)
*成功//成功したコールバック関数を要求します
*失敗//コールバック関数が失敗しました
* scope //コールバック関数実行コンテキスト
*タイムスタンプ//タイムスタンプを追加するかどうか
*});
*
*/
sjax =
function(win){
var ie678 =! - [1、]、
Opera = win.opera、
doc = win.document、
head = doc.getElementsByTagname( 'head')[0]、
タイムアウト= 3000、
done = false;
function _serialize(obj){
var a = []、key、val;
for(objのキー){
val = obj [key];
if(val.constructor == array){
for(var i = 0、len = val.length; i <len; i ++){
a.push(key + '=' + encodeuricomponent(val [i]));
}
}それ以外{
a.push(key + '=' + encodeuricomponent(val));
}
}
a.join( '&');
}
関数要求(url、opt){
関数fn(){}
var opt = opt || {}、
data = opt.data、
成功= opt.success || fn、
故障= opt.failure || fn、
scope = opt.scope ||勝つ、
Timestamp = opt.timestamp;
if(data && typeof data == 'object'){
data = _serialize(data);
}
var script = doc.createelement( 'script');
関数コールバック(ISSUCC){
if(issucc){
if(typeof jsonp!= 'undefined'){//割り当ての右側のjsonpはバックグラウンドで返される必要があり、この変数はグローバル変数です
done = true;
success.call(scope、jsonp);
}それ以外{
faily.call(scope);
// alert( '警告:jsonpは返されませんでした。');
}
}それ以外{
faily.call(scope);
}
// IEでメモリリークを処理します
script.onload = script.onerror = script.onreadystatechange = null;
jsonp =未定義;
if(head && script.parentnode){
head.RemoveChild(スクリプト);
}
}
関数fixonerror(){
setimeout(function(){
if(!done){
折り返し電話();
}
}、 タイムアウト);
}
if(ie678){
script.onreadystatechange = function(){
var readystate = this.readystate;
if(!done &&(readystate == 'loaded' || readystate == 'complete')){
コールバック(true);
}
}
// fixonerror();
}それ以外{
script.onload = function(){
コールバック(true);
}
script.onerror = function(){
折り返し電話();
}
if(opera){
fixonerror();
}
}
if(data){
url += '?' +データ;
}
if(タイムスタンプ){
if(data){
url += '&ts =';
}それ以外{
url += '?ts ='
}
url +=(new Date).getTime();
}
script.src = url;
head.insertbefore(script、head.firstchild);
}
return {load:request};
}(これ);
通話方法は次のとおりです。
コードコピーは次のとおりです。
sjax.load( 'jsonp66.js'、{
成功:function(){alert(jsonp.name)}、
故障:function(){alert( 'error');}
});
数量計のフォーマット
コードコピーは次のとおりです。
function tothounthers(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; }
返品結果;
}
上記は、この記事で共有される一般的に使用されるJavaScriptスクリプトです。私はあなたがそれらを好きになることを願っています。