يقيد jQuery مربع النص لإدخال أرقام فقط
يقيد jQuery مربع النص لإدخال أرقام فقط ، والتي تتوافق مع IE و Chrome و FF (تأثير الأداء مختلف). رمز العينة كما يلي:
نسخة الكود كما يلي:
$ ("إدخال"). keyup (function () {// keyup معالجة الأحداث
$ (هذا) .val ($ (this) .val (). استبدال (// d |^0/g ، '')) ؛
})
$ (هذا) .val ($ (this) .val (). استبدال (// d |^0/g ، '')) ؛
}). css ("ime-mode" ، "معطل") ؛ // طريقة إدخال إعداد CSS غير متوفرة
الغرض من الكود أعلاه هو: يمكن إدخال أعداد صحيحة إيجابية أكبر من 0.
نسخة الكود كما يلي:
$ ("#rnumber"). keyup (function () {
$ (هذا) .val ($ (this) .val (). استبدال (/[^0-9.]/g ، '')) ؛
})
$ (هذا) .val ($ (this) .val (). استبدال (/[^0-9.]/g ، '')) ؛
}). css ("ime-mode" ، "معطل") ؛ // طريقة إدخال إعداد CSS غير متوفرة
الغرض من الرمز أعلاه هو: فقط 0-9 أرقام ونقاط عشرية يمكن إدخالها.
تغليف حدث DomContentLoaded
نسخة الكود كما يلي:
// احفظ قائمة انتظار الحدث لـ DomReady
eventQueue = [] ؛
// احكم ما إذا كان قد تم تحميل DOM
isReady = false ؛
// احكم ما إذا كان DomReady ملزم
isBind = false ؛
/*تنفيذ DomReady ()
*
*@param {function}
*@تنفيذ يدفع معالج الحدث إلى قائمة انتظار الحدث وربط DomContentLoaded
* إذا تم الانتهاء من تحميل DOM ، فننفذ على الفور
*@المتصل
*/
وظيفة domready (fn) {
إذا (isReady) {
fn.call (نافذة) ؛
}
آخر{
eventQueue.push (fn) ؛
} ؛
bindReady () ؛
} ؛
/*domready الحدث الربط
*
*@param null
*@تنفيذ المتصفحات الحديثة ربط domcontentenced من خلال addevlistener ، بما في ذلك IE9+
يحدد IE6-8 ما إذا كان قد تم تحميل DOM عن طريق الحكم على Doscroll
*@Caller DomReady ()
*/
وظيفة bindReady () {
إذا (isReady) العودة ؛
إذا (Isbind) العودة ؛
Isbind = صحيح ؛
if (window.adDeventListener) {
document.adDeventListener ('domcontentloaded' ، execfn ، false) ؛
}
آخر إذا (window.attachevent) {
doscroll () ؛
} ؛
} ؛
/*يحدد Doscroll ما إذا كان قد تم تحميل DOM من IE6-8.
*
*@param null
*@تنفيذ Doscroll يحدد ما إذا كان DOM يتم تحميله
*@Caller BindReady ()
*/
وظيفة doscroll () {
يحاول{
document.documentElement.doscroll ('Left') ؛
}
catch (خطأ) {
Return SetTimeout (Doscroll ، 20) ؛
} ؛
execfn () ؛
} ؛
/*قائمة انتظار حدث التنفيذ
*
*@param null
*@تنفيذ معالج حدث تنفيذ الحلقة في قائمة الانتظار
*@Caller BindReady ()
*/
وظيفة execfn () {
إذا (! isReady) {
isReady = صحيح ؛
لـ (var i = 0 ؛ i <eventqueue.length ؛ i ++) {
EventQueue [i] .Call (window) ؛
} ؛
eventQueue = [] ؛
} ؛
} ؛
// ملف JS 1
DomReady (function () {
}) ؛
// ملف JS 2
DomReady (function () {
}) ؛
// لاحظ أنه إذا تم تحميله بشكل غير متزامن ، فلا تربط طريقة DomReady ، وإلا فلن يتم تنفيذ الوظيفة.
// لأنه قبل تحميل JS غير المتزامن ، تم إطلاق DomContentLoaded ، ولا يمكن الاستماع إلى AddeventListener عند التنفيذ
تغليف بسيط من AJAX باستخدام JS الأصلي
أولاً ، نحتاج إلى كائن XHR. هذا ليس بالأمر الصعب بالنسبة لنا ، ويغلفها في وظيفة.
نسخة الكود كما يلي:
var createajax = function () {
var xhr = null ؛
يحاول {
// IE Series Browser
XHR = جديد ActiveXObject ("Microsoft.xmlHttp") ؛
} catch (e1) {
يحاول {
// لا IE متصفح
XHR = جديد 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" ؛
}
if (datatype == null) {
// معلمة نوع البيانات اختياريًا ، افتراضيًا للنص
datatype = "text" ؛
}
// إنشاء كائن محرك Ajax
var xhr = createajax () ؛
// يفتح
XHR.Open (النوع ، url ، true) ؛
// يرسل
if (type == "get" || type == "get") {
XHR.SEND (NULL) ؛
} آخر إذا (type == "post" || type == "post") {
XHR.SetRequestHeader ("نوع المحتوى" ،
"التطبيق/X-WWW-Form-urlencoded") ؛
XHR.SEND (البيانات) ؛
}
XHR.OnReadyStateChange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (datatype == "text" || datatype == "text") {
إذا (النجاح! = فارغ) {
// النص العادي
النجاح (XHR.Responsetext) ؛
}
} آخر إذا (datatype == "xml" || datatype == "xml") {
إذا (النجاح! = فارغ) {
// استلام مستندات XML
النجاح (XHR.Responsexml) ؛
}
} آخر إذا (datatype == "json" || datatype == "json") {
إذا (النجاح! = فارغ) {
// تحويل سلسلة JSON إلى كائن JS
النجاح (eval ("("+xhr.responsetext+")")) ؛
}
}
}
} ؛
} ؛
أخيرًا ، دعنا نوضح استخدام هذه الوظيفة.
نسخة الكود كما يلي:
ajax ({
النوع: "بعد" ،
عنوان URL: "Test.jsp" ،
البيانات: "name = dipoo & info = جيد" ،
نوع البيانات: "JSON" ،
النجاح: الوظيفة (البيانات) {
تنبيه (data.name) ؛
}
}) ؛
يطلب المجال المتقاطع JSONP
نسخة الكود كما يلي:
/**
* JavaScript JSONP Library v0.3
* حقوق الطبع والنشر (C) 2011 Snandy
* QQ Group: 34580561
* التاريخ: 2011-04-26
*
* زيادة معالجة فشل الطلب. على الرغم من أن هذه الوظيفة ليست مفيدة للغاية ، فقد تمت دراسة الاختلافات في البرامج النصية في كل متصفح.
* 1 ، IE6/7/8 onReadyStateChange حدث يدعم البرنامج النصي
* 2 ، IE9/10 يدعم Script Onload و onReadyStateChange أحداث
* 3 ، يدعم Firefox/Safari/Chrome/Opera أحداث البرنامج النصي Onload
* 4 ، IE6/7/8/Opera لا يدعم حدث Script Onerror ؛ IE9/10/Firefox/Safari/Chrome يدعم
* 5. على الرغم من أن الأوبرا لا تدعم حدث onReadyStateChange ، إلا أنه يحتوي على خاصية ReadyState. هذا سحري جدا
* 6. اختبار IE6/7/8 مع IE9 و IETESTER ، ويتم تحميلها دائمًا تحميلها وتحميلها. لم يظهر أي كاملة.
*
* فكرة التنفيذ النهائية:
* 1 ، IE9/Firefox/Safari/Chrome تم استدعاؤه بنجاح لاستخدام حدث Onload ، ويستخدم رد الاتصال على خطأ Onerror حدث
* 2 ، يستخدم رد الاتصال بنجاح Opera أيضًا حدث OnLoad (لا يدعم onReadyStateChange على الإطلاق). نظرًا لأنه لا يدعم Onerror ، يتم استخدام معالجة التأخير هنا.
* أي ، انتظر النجاح والاستدعاء بنجاح ، ويتم تعيين العلم بعد النجاح على True. لن يتم تنفيذ الفشل ، وإلا فإنه سيتم تنفيذه.
* من الماهاة للغاية أن تأخذ قيمة الوقت المتأخرة هنا. يستغرق الأمر ثانيتين من قبل ، وليس هناك مشكلة في اختبار الشركة. ولكن بعد العودة إلى المنزل لاستخدام الشبكة اللاسلكية 3G ، وجدت أنه على الرغم من وجود ملف JS المشار إليه ، فهو موجود
* سرعة الإنترنت بطيئة للغاية ، يتم تنفيذ الفشل أولاً ثم النجاح. لذلك من المعقول أن يستغرق الأمر 5 ثوان هنا. بالطبع ، هذا ليس مطلقًا.
* 3 ، IE6/7/8 ، استخدم عمليات الاتصال الناجحة لحدث OnReadyStateChange ، ويصعب تنفيذ عمليات الاسترجاعات على الأخطاء. إنه أيضا الأكثر تقنية.
* المرجع http://stackoverflow.com/questions/3483919/script-onload-onerror-with-iefor-laylaload-prombles
* باستخدام Nextsibling ، وجد أنه لا يمكن تنفيذه.
* ما هو مثير للاشمئزاز هو أنه حتى إذا لم يكن ملف المورد المطلوب موجودًا. سيختبر ReadyState أيضًا حالة "محملة". بهذه الطريقة لا يمكنك معرفة ما إذا كان الطلب ينجح أو يفشل.
* أخشى ذلك ، لذلك أستخدم أخيرًا آلية التنسيق بين المكتب الأمامي والخلفي لحل المشكلة النهائية. اجعل طلب رد الاتصال (صحيح) بغض النظر عن النجاح أو الفشل.
* في هذا الوقت ، تم وضع المنطق الذي يميز النجاح والفشل في رد الاتصال. إذا لم ترد الخلفية JSONP ، فاستدعاء الفشل ، وإلا اتصل بالنجاح.
*
*
* واجهة
* sjax.load (url ، {
* بيانات // معلمات الطلب (سلسلة زوج المفتاح أو كائن JS)
* النجاح // طلب وظيفة رد الاتصال الناجح
* فشل // فشل وظيفة رد الاتصال
* SCOPE // سياق تنفيذ وظيفة رد الاتصال
* الطابع الزمني // ما إذا كنت تريد إضافة طابع زمني
*}) ؛
*
*/
Sjax =
وظيفة (فوز) {
var ie678 =!-[1 ،]
أوبرا = win.opera ،
doc = win.document ،
Head = doc.getElementsByTagname ('head') [0] ،
مهلة = 3000 ،
تم = خطأ ؛
دالة _Serialize (OBJ) {
var a = [] ، المفتاح ، val ؛
لـ (المفتاح في OBJ) {
val = obj [key] ؛
if (val.constructor == array) {
لـ (var i = 0 ، len = val.length ؛ i <len ؛ i ++) {
A.Push (Key + '=' + EncodeUricOpmonent (Val [i])) ؛
}
}آخر{
A.Push (Key + '=' + EncodeUricomponent (Val)) ؛
}
}
إرجاع A.Join ('&') ؛
}
طلب الوظيفة (url ، opt) {
دالة fn () {}
var opt = opt || {} ،
البيانات = opt.data ،
النجاح = opt.success || fn ،
الفشل = OPT.Failure || fn ،
النطاق = opt.scope || يفوز،
الطابع الزمني = opt.timestamp ؛
if (data && typeof data == 'Object') {
البيانات = _serialize (البيانات) ؛
}
var script = doc.createElement ('script') ؛
استدعاء وظيفة (ISSUCC) {
إذا (issucc) {
إذا (typeof jsonp! = 'undefined') {// يجب إرجاع jsonp على يمين المهمة في الخلفية ، وهذا المتغير هو متغير عالمي
تم = صحيح ؛
Success.Call (Scope ، JSONP) ؛
}آخر{
فشل. كول (النطاق) ؛
// ALERT ('تحذير: JSONP لم يعود.') ؛
}
}آخر{
فشل. كول (النطاق) ؛
}
// التعامل مع تسرب الذاكرة في IE
script.onload = script.onerror = script.onReadyStateChange = null ؛
JSONP = غير محدد ؛
if (Head && script.parentNode) {
head.removechild (script) ؛
}
}
وظيفة FixOnerror () {
setTimeout (function () {
إذا (! تم) {
أتصل مرة أخرى()؛
}
}، نفذ الوقت)؛
}
إذا (ie678) {
script.OnReadyStateChange = function () {
var ReadyState = this.readyState ؛
if (! ded && (readyState == 'loaded' || readyState == 'Complete')) {
رد الاتصال (صحيح) ؛
}
}
// FixOnerror () ؛
}آخر{
script.onload = function () {
رد الاتصال (صحيح) ؛
}
script.onerror = function () {
أتصل مرة أخرى()؛
}
إذا (أوبرا) {
FixOnerror () ؛
}
}
إذا (البيانات) {
url += '؟' + البيانات ؛
}
if (timestamp) {
إذا (البيانات) {
url += '& ts =' ؛
}آخر{
url += '؟ ts ='
}
url += (تاريخ جديد) .getTime () ؛
}
script.src = url ؛
head.insertbefore (script ، head.firstchild) ؛
}
إرجاع {load: request} ؛
}(هذا)؛
طريقة الاتصال على النحو التالي:
نسخة الكود كما يلي:
sjax.load ('jsonp66.js' ، {
النجاح: function () {Alert (jsonp.name)} ،
الفشل: function () {Alert ('error') ؛}
}) ؛
تنسيق الطاحونة
نسخة الكود كما يلي:
وظيفة tothologs (num) {
var num = (num || 0) .ToString () ، result = '' ؛
بينما (num.length> 3) {
النتيجة = '،' + num.slice (-3) + النتيجة ؛
num = num.slice (0 ، num.length - 3) ؛
}
if (num) {result = num + result ؛ }
نتيجة العودة
}
ما ورد أعلاه هي البرامج النصية JavaScript شائعة الاستخدام المشاركة في هذه المقالة. أتمنى أن يعجبكهم.