JQuery beschränkt das Textfeld, um nur Zahlen einzugeben
JQuery beschränkt das Textfeld, um nur Zahlen einzugeben, die mit IE, Chrome und FF kompatibel sind (der Leistungseffekt ist unterschiedlich). Der Beispielcode lautet wie folgt:
Die Codekopie lautet wie folgt:
$ ("input"). keyUp (function () {// KeyUp -Ereignisverarbeitung
$ (this) .val ($ (this) .val (). Ersetzen (// d |^0/g, ''));
}). Bind ("paste", function () {// ctr+v Ereignisverarbeitung
$ (this) .val ($ (this) .val (). Ersetzen (// d |^0/g, ''));
}). CSS ("IME-Mode", "deaktiviert"); // CSS -Einstellungsmethode ist nicht verfügbar
Der Zweck des obigen Code ist: Nur positive Ganzzahlen größer als 0 können eingegeben werden.
Die Codekopie lautet wie folgt:
$ ("#rNumber"). KeyUp (function () {
$ (this) .val ($ (this) .val (). Ersetzen (/[^0-9.]/g, ''));
}). Bind ("paste", function () {// ctr+v Ereignisverarbeitung
$ (this) .val ($ (this) .val (). Ersetzen (/[^0-9.]/g, ''));
}). CSS ("IME-Mode", "deaktiviert"); // CSS -Einstellungsmethode ist nicht verfügbar
Der Zweck des obigen Codes ist: Es können nur 0-9 Zahlen und Dezimalpunkte eingegeben werden.
Domcontent -Ereignis einkapseln
Die Codekopie lautet wie folgt:
// Speichern Sie die Ereigniswarteschlange von Domready
eventQueue = [];
// Beurteile, ob das DOM geladen wurde
isReady = false;
// beurteilen, ob domready gebunden ist
isBind = false;
/*Domready () ausführen
*
*@param {function}
*@Execute drückt den Ereignishandler in die Ereigniswarteschlange und bindet Domcontentled
* Wenn die DOM -Belastung abgeschlossen ist, führen Sie sofort aus
*@Anrufer
*/
Funktion domready (fn) {
if (isReady) {
fn.call (Fenster);
}
anders{
eventQueue.push (fn);
};
Bindready ();
};
/*Domready Ereignisbindung
*
*@param null
*@Execute moderne Browser binden Domcontent, der über AddevListener geladen wurde, einschließlich IE9+
IE6-8 bestimmt, ob das DOM durch die Beurteilung von DOSCROLL geladen wurde
*@Caller domready ()
*/
Funktion Bindready () {
Wenn (isReady) zurückkehren;
wenn (isbind) zurückkehren;
isBind = true;
if (window.addeventListener) {
document.adDeVentListener ('domcontentled', execfn, false);
}
sonst if (window.attachEvent) {
doscroll ();
};
};
/*doscroll bestimmt, ob das DOM von IE6-8 geladen wurde.
*
*@param null
*@Execute doscroll bestimmt, ob das DOM geladen wird
*@Caller BindReady ()
*/
Funktion doscroll () {
versuchen{
document.documentElement.doscroll ('links');
}
fangen (Fehler) {
return setTimeout (doscroll, 20);
};
execfn ();
};
/*Ausführung Ereigniswarteschlange
*
*@param null
*@Execute Loop Execution Event -Handler in der Warteschlange ausführen
*@Caller BindReady ()
*/
Funktion execfn () {
if (! isReady) {
isReady = wahr;
für (var i = 0; i <eventQueue.length; i ++) {
EventQueue [i] .Call (Fenster);
};
eventQueue = [];
};
};
// JS -Datei 1
domready (function () {
});
// JS -Datei 2
domready (function () {
});
// Beachten Sie, dass die Funktion nicht ausgeführt wird, wenn es asynchron geladen wird, die domreadische Methode nicht binden.
// Weil vor dem Download des asynchronen Ladens JS, DomcontentLode, abgefeuert wurde und der AddEventListener bei der Ausführung nicht angehört werden kann
Einfache Verkapselung von AJAX mit nativem JS
Erstens brauchen wir das XHR -Objekt. Dies ist für uns nicht schwierig und verkörpert es in eine Funktion.
Die Codekopie lautet wie folgt:
var createajax = function () {
var xhr = null;
versuchen {
// IE -Serie Browser
xhr = new ActiveXObject ("microsoft.xmlhttp");
} catch (e1) {
versuchen {
// nicht dh Browser
xhr = neu xmlhttprequest ();
} catch (e2) {
window.alert ("Ihr Browser unterstützt Ajax nicht, ersetzen Sie es bitte!");
}
}
Rückgabe xhr;
};
Schreiben wir dann die Kernfunktion.
Die Codekopie lautet wie folgt:
var ajax = function (conf) {
// Initialisierung
// Parameter eingeben, optional
var type = conf.type;
// URL -Parameter erforderlich
var url = conf.url;
// Datenparameter ist optional, nur bei der Anforderung des Beitrags erforderlich
var data = conf.data;
// DataType -Parameter ist optional
var dataType = conf.Datatype;
// Rückruffunktion ist optional
var Success = Conf.Success;
if (type == null) {
// Der Typ -Parameter ist optional, die Standardeinstellung ist erhalten
type = "get";
}
if (DataType == null) {
// Der Datentypparameter ist optional, Standard für Text
DataType = "Text";
}
// AJAX -Motorobjekt erstellen
var xhr = createajax ();
// Offen
xhr.open (Typ, URL, Richtig);
// schicken
if (type == "get" || type == "get") {
xhr.send (null);
} else if (type == "post" || type == "post") {
xhr.setRequestheader ("Content-Typ",
"Anwendung/x-www-form-rencoded");
Xhr.Send (Daten);
}
xhr.onreadyStatechange = function () {
if (xhr.readystate == 4 && xhr.status == 200) {
if (DataType == "Text" || DataType == "Text") {
if (Erfolg! = null) {
// Normaler Text
Erfolg (xhr.responsetext);
}
} else if (DataType == "xml" || DataType == "XML") {
if (Erfolg! = null) {
// XML -Dokumente erhalten
Erfolg (xhr.responsexml);
}
} else if (DataType == "JSON" || DataType == "JSON") {
if (Erfolg! = null) {
// JSON String in JS -Objekt konvertieren
Erfolg (eval ("("+xhr.responsetext+")"));
}
}
}
};
};
Lassen Sie uns schließlich die Verwendung dieser Funktion erklären.
Die Codekopie lautet wie folgt:
ajax ({{
Typ: "Post",
URL: "test.jsp",
Daten: "name = dipoo & info = gut",
Datentyp: "JSON",
Erfolg: Funktion (Daten) {
Alert (Data.Name);
}
});
Cross-Domain fordert JSONP an
Die Codekopie lautet wie folgt:
/**
* JavaScript JSONP -Bibliothek v0.3
* Copyright (c) 2011 Snandy
* QQ -Gruppe: 34580561
* Datum: 2011-04-26
*
* Erhöhen Sie den Umgang mit Anforderungsfehlern. Obwohl diese Funktion nicht sehr nützlich ist, wurden die Unterschiede in den Skripten in jedem Browser untersucht.
* 1, IE6/7/8 OnReadyStatechange -Ereignis, das das Skript unterstützt
* 2, IE9/1
* 3, Firefox/Safari/Chrome/Opera unterstützt Skript -Onload -Ereignisse
* 4, IE6/7/8/Opera unterstützt das Skript -Onerror -Ereignis nicht. IE9/10/Firefox/Safari/Chrom -Unterstützung
* 5. Obwohl Opera das Event von OnReadyStatechange nicht unterstützt, verfügt es über die ReadyState -Immobilie. Das ist sehr magisch
* 6. Testen Sie IE6/7/8 mit IE9 und Ietester, und sein ReadyState wird immer geladen und geladen. Kein komplett ist erschienen.
*
* Die endgültige Implementierungsidee:
* 1, IE9/Firefox/Safari/Chrome erfolgreich zurückgerufen, um das Onload -Ereignis zu verwenden
* 2, Opera erfolgreich Callback verwendet auch das Onload -Ereignis (es unterstützt OnreadyStatechange überhaupt nicht). Da es OnError nicht unterstützt, wird hier die Verzögerungsverarbeitung verwendet.
* Das heißt, warten Sie auf Erfolg und erfolgreich Rückrufe, und das Flaggenbit, das nach dem Erfolg erfolgt, ist auf wahr gesetzt. Der Fehler wird nicht ausgeführt, andernfalls wird er ausgeführt.
* Es ist sehr geschickt, hier den verzögerten Zeitwert zu nehmen. Es dauert 2 Sekunden zuvor und es gibt kein Problem bei den Unternehmenstests. Aber nachdem ich nach Hause gegangen war, um das 3G -drahtlose Netzwerk zu nutzen
* Die Internetgeschwindigkeit ist zu langsam, der Fehler wird zuerst ausgeführt und dann Erfolg. Es ist also vernünftiger, hier 5 Sekunden zu dauern. Natürlich ist es nicht absolut.
* 3, IE6/7/8 erfolgreiche Rückrufe verwenden das Ereignis von OnreadyStatechange, und Fehlerrückrufe sind fast schwierig zu implementieren. Es ist auch das technischste.
* Referenz http://stackoverflow.com/questions/3483919/script-onload-onerror-with-fitor-lazy-loading-problems
* Mit Nextsibling wurde festgestellt, dass es nicht implementiert werden konnte.
* Was ekelhaft ist, ist, dass auch wenn die angeforderte Ressourcendatei nicht vorhanden ist. Der ReadyState wird auch einen "geladenen" Zustand erleben. Auf diese Weise können Sie nicht sagen, ob die Anfrage erfolgreich ist oder fehlschlägt.
* Ich habe Angst davor, also verwende ich endlich den Koordinationsmechanismus zwischen Vorder- und Backoffice, um das endgültige Problem zu lösen. Machen Sie den Anforderungsrückruf (True) unabhängig von Erfolg oder Misserfolg.
* Zu diesem Zeitpunkt wurde die Logik, die Erfolg und Misserfolg unterscheidet, in den Rückruf gestellt. Wenn der Hintergrund JSONP nicht zurückgibt, rufen Sie den Fehler an, andernfalls rufen Sie den Erfolg an.
*
*
* Schnittstelle
* Sjax.load (url, {
* Daten // Parameter anfordern (Schlüsselwertpaar String oder JS -Objekt)
* Erfolg // eine erfolgreiche Rückruffunktion anfordern
* Fehler // Die Rückruffunktion ist fehlgeschlagen
* Geltungsbereich // Rückruffunktion Ausführung Kontext
* Zeitstempel // Ob eine Zeitstempel hinzugefügt werden soll
*});
*
*/
Sjax =
Funktion (Win) {
var ie678 =!-[1,],
Opera = Win.Opera,
doc = win.dokument,
head = doc.getElementsByTagName ('Kopf') [0],
Timeout = 3000,
fertig = falsch;
Funktion _serialize (obj) {
var a = [], key, val;
für (Schlüssel in obj) {
val = obj [Schlüssel];
if (Val.Constructor == Array) {
für (var i = 0, len = val.Length; i <len; i ++) {
a.push (Schlüssel + '=' + codoRicomponent (val [i]));
}
}anders{
a.push (Schlüssel + '=' + codoRicomponent (val));
}
}
Return A.Join ('&');
}
Funktionsanforderung (URL, opt) {
Funktion fn () {}
var opt = opt || {},
Data = opt.data,
success = opt.success || fn,
Fehler = opt.Failure || fn,
Scope = opt.Scope || gewinnen,
timestamp = opt.timestamp;
if (Data && typeof data == 'Objekt') {
Data = _serialize (Daten);
}
var script = doc.createelement ('script');
Funktionsrückruf (ISSUCC) {
if (issucc) {
if (typeof JSONP!
fertig = wahr;
Success.call (Scope, JSONP);
}anders{
Failure.Call (Scope);
// alarm ('Warnung: JSONP kehrte nicht zurück.');
}
}anders{
Failure.Call (Scope);
}
// Speicherleck im IE behandeln
script.onload = script.onError = script.onReadyStatechange = null;
JSONP = undefiniert;
if (head && script.parentnode) {
head.removechild (script);
}
}
Funktion fixonError () {
setTimeout (function () {
if (! Done) {
callback ();
}
}, Timeout);
}
if (ie678) {
script.onReadyStatechange = function () {
var ReadyState = this.ReadyState;
if (! Done && (ReadyState == 'Loaded' || ReadyState == 'Complete')) {
Rückruf (wahr);
}
}
// fixonError ();
}anders{
script.onload = function () {
Rückruf (wahr);
}
script.onError = function () {
callback ();
}
if (Opera) {
fixonError ();
}
}
if (Daten) {
URL += '?' + Daten;
}
if (timestamp) {
if (Daten) {
url += '& ts =';
}anders{
URL += '? TS ='
}
URL += (neues Datum) .getTime ();
}
script.src = url;
head.insertbefore (script, head.Firstchild);
}
return {last: request};
}(Das);
Die Anrufmethode lautet wie folgt:
Die Codekopie lautet wie folgt:
Sjax.load ('jsonp66.js', {{
Erfolg: function () {alert (jsonp.name)},
Fehler: function () {alert ('error');}
});
Millometer -Formatierung
Die Codekopie lautet wie folgt:
Funktion Tothausend (num) {
var num = (num || 0) .ToString (), result = '';
while (num.length> 3) {
result = ',' + num.slice (-3) + Ergebnis;
num = num.lice (0, num.length - 3);
}
if (num) {result = num + result; }
Rückgabeergebnis;
}
Die oben genannten sind die häufig verwendeten JavaScript -Skripte, die in diesem Artikel geteilt werden. Ich hoffe du magst sie.