jQuery restreint la zone de texte pour entrer uniquement les numéros
JQuery restreint la zone de texte pour entrer uniquement les nombres, qui sont compatibles avec IE, Chrome et FF (l'effet de performance est différent). L'exemple de code est le suivant:
La copie de code est la suivante:
$ ("entrée"). KeyUp (function () {// Traitement des événements de KETYUP
$ (this) .val ($ (this) .val (). remplacer (// d | ^ 0 / g, ''));
}). bind ("coller", function () {// ctr + v traitement des événements
$ (this) .val ($ (this) .val (). remplacer (// d | ^ 0 / g, ''));
}). CSS ("ime-mode", "désactivé"); // La méthode d'entrée de réglage CSS n'est pas disponible
Le but du code ci-dessus est: seuls les entiers positifs supérieurs à 0 peuvent être entrés.
La copie de code est la suivante:
$ ("# rNumber"). keyUp (function () {
$ (this) .val ($ (this) .val (). remplacer (/ [^ 0-9.] / g, ''));
}). bind ("coller", function () {// ctr + v traitement des événements
$ (this) .val ($ (this) .val (). remplacer (/ [^ 0-9.] / g, ''));
}). CSS ("ime-mode", "désactivé"); // La méthode d'entrée de réglage CSS n'est pas disponible
Le but du code ci-dessus est: seuls 0 à 9 numéros et décimaux peuvent être entrés.
ENCAPuler l'événement téléchargé DomContent
La copie de code est la suivante:
// Enregistrez la file d'attente de l'événement de DomReady
EventQueue = [];
// juger si le DOM a été chargé
isReady = false;
// juger si Domready est lié
isbind = false;
/ * Exécuter domready ()
*
* @ param {fonction}
* @ Execute pousse le gestionnaire d'événements dans la file d'attente d'événements et lie DomContent.
* Si le chargement DOM est terminé, exécutez immédiatement
*@demandeur
* /
fonction DomReady (fn) {
if (isReady) {
fn.call (fenêtre);
}
autre{
EventQueue.push (fn);
};
bindReady ();
};
/ * liaison de l'événement Domready
*
* @ param null
* @ EXECUTE Les navigateurs modernes lient DomContentloaded via AddEvListener, y compris IE9 +
IE6-8 détermine si le DOM a été chargé en jugeant le doscroll
* @ appelant DomReady ()
* /
fonction bindReady () {
si (isReady) revient;
if (isbind) return;
isBind = true;
if (window.addeventListener) {
document.addeventListener ('DomContentloaded', execfn, false);
}
else if (window.attachevent) {
doscroll ();
};
};
/ * Doscroll détermine si le DOM de IE6-8 a été chargé.
*
* @ param null
* @ Exécuter Doscroll détermine si le DOM charge
* @ appelant binDready ()
* /
fonction doscroll () {
essayer{
document.DocumentElement.doscroll («Left»);
}
catch (error) {
return setTimeout (Doscroll, 20);
};
execfn ();
};
/ * File d'attente d'événements d'exécution
*
* @ param null
* @ Exécuter le gestionnaire d'événements d'exécution de la boucle dans la file d'attente
* @ appelant binDready ()
* /
fonction execfn () {
si (! Isready) {
IsReady = true;
for (var i = 0; i <EventQueue.length; i ++) {
EventQueue [i] .Call (fenêtre);
};
EventQueue = [];
};
};
// Fichier JS 1
domready (function () {
});
// Fichier JS 2
domready (function () {
});
// Notez que s'il est chargé de manière asynchrone, ne liez pas la méthode Domready, sinon la fonction ne sera pas exécutée.
// Parce qu'avant le téléchargement de JS de chargement asynchrone, DomContent Télélé a été licencié et l'AddEventListener ne peut pas être écouté lors de l'exécution
Encapsulation simple de l'Ajax en utilisant JS natif
Tout d'abord, nous avons besoin de l'objet XHR. Ce n'est pas difficile pour nous, en le résumant dans une fonction.
La copie de code est la suivante:
var createajax = function () {
var xhr = null;
essayer {
// Navigateur de la série
xhr = new activeXObject ("Microsoft.xmlhttp");
} catch (e1) {
essayer {
// pas le navigateur IE
xhr = new xmlHttpRequest ();
} catch (e2) {
Window.Alert ("Votre navigateur ne prend pas en charge Ajax, veuillez le remplacer!");
}
}
retour xhr;
};
Ensuite, écrivons la fonction centrale.
La copie de code est la suivante:
var ajax = fonction (conf) {
// initialisation
// Type Paramètre, facultatif
var type = conf.Type;
// Paramètres d'URL, requis
var url = conf.url;
// Le paramètre de données est facultatif, uniquement requis lors de la demande de poste
var data = conf.data;
// Le paramètre DataType est facultatif
var dataType = conf.datatype;
// La fonction de rappel est facultative
Success Var = conf.success;
if (type == null) {
// Le paramètre de type est facultatif, la valeur par défaut est GET
type = "get";
}
if (dataType == null) {
// Le paramètre DataType est facultatif, par défaut au texte
dataType = "texte";
}
// Créer un objet moteur ajax
var xhr = createajax ();
// Ouvrir
xhr.open (type, url, true);
// envoyer
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 (données);
}
xhr.onreadystateChange = function () {
if (xhr.readystate == 4 && xhr.status == 200) {
if (dataType == "text" || dataType == "text") {
if (succès! = null) {
// Texte normal
Success (xhr.ResponSeText);
}
} else if (dataType == "xml" || dataType == "xml") {
if (succès! = null) {
// reçoit des documents XML
Success (XHR.ResponseXML);
}
} else if (dataType == "JSON" || dataType == "JSON") {
if (succès! = null) {
// Convertir la chaîne JSON en objet JS
Success (eval ("(" + xhr.ResponSeText + ")"));
}
}
}
};
};
Enfin, expliquons l'utilisation de cette fonction.
La copie de code est la suivante:
ajax ({
Type: "Post",
URL: "test.jsp",
Données: "name = dipoo & info = bon",
Type de données: "JSON",
Succès: fonction (données) {
alert (data.name);
}
});
Domain inter-domaine demande JSONP
La copie de code est la suivante:
/ **
* Bibliothèque JavaScript JSONP v0.3
* Copyright (c) 2011 Snandy
* Groupe QQ: 34580561
* Date: 2011-04-26
*
* Augmentez le traitement des défaillances de la demande. Bien que cette fonction ne soit pas très utile, les différences de scripts dans chaque navigateur ont été étudiées.
* 1, IE6 / 7/8 OnreadyStateChange Event qui prend en charge le script
* 2, IE9 / 10 prend en charge le script onload et les événements OnReadyStateChange
* 3, Firefox / Safari / Chrome / Opera prend en charge le script onload Events
* 4, IE6 / 7/8 / Opera ne prend pas en charge l'événement Script ONERROR; IE9 / 10 / Firefox / Safari / Chrome Supports
* 5. Bien que Opera ne prenne pas en charge l'événement OnReadyStateChange, il dispose de la propriété ReadyState. C'est très magique
* 6. Testez IE6 / 7/8 avec IE9 et IETESTER, et son prêt est toujours chargé et chargé. Aucun complet n'est apparu.
*
* L'idée de mise en œuvre finale:
* 1, IE9 / Firefox / Safari / Chrome avec succès appelé pour utiliser l'événement Onload, et le rappel d'erreur utilise l'événement ONERROR
* 2, l'opéra rappel avec succès utilise également l'événement Onload (il ne prend pas du tout un support sur onreystateChange). Puisqu'il ne prend pas en charge ONERROR, le traitement des retards est utilisé ici.
* Autrement dit, attendez le succès et le rappel avec succès, et le bit du drapeau fait après le succès est défini sur true. L'échec ne sera pas exécuté, sinon il sera exécuté.
* Il est très habile de prendre la valeur de temps retardée ici. Cela prend 2 secondes auparavant, et il n'y a aucun problème dans les tests de l'entreprise. Mais après être rentré chez moi pour utiliser le réseau sans fil 3G, j'ai constaté que même si le fichier JS référencé existe, c'est
* La vitesse Internet est trop lente, l'échec est d'abord exécuté puis le succès. Il est donc plus raisonnable de prendre 5 secondes ici. Bien sûr, ce n'est pas absolu.
* 3, IE6 / 7/8 Les rappels réussis utilisent l'événement OnreadyStateChange, et les rappels d'erreur sont presque difficiles à implémenter. C'est aussi le plus technique.
* Référence http://stackoverflow.com/questions/3483919/script-onload-onerror-with-iefhelaz-lazing-loading-problems
* En utilisant NextSibling, il a été constaté qu'il ne pouvait pas être mis en œuvre.
* Ce qui est dégoûtant, c'est que même si le fichier de ressources demandé n'existe pas. Son readystate connaîtra également un état "chargé". De cette façon, vous ne pouvez pas dire si la demande réussit ou échoue.
* J'en ai peur, donc j'utilise enfin le mécanisme de coordination entre l'avant et le back office pour résoudre le problème final. Faites le rappel de la demande (vrai) quel que soit le succès ou l'échec.
* À l'heure actuelle, la logique qui distingue le succès et l'échec a été mise dans le rappel. Si l'arrière-plan ne renvoie pas JSONP, appelez l'échec, sinon appelez le succès.
*
*
* Interface
* Sjax.load (url, {
* Données // Paramètres de demande (String de la paire de valeurs de clé ou objet JS)
* Succès // Demande la fonction de rappel réussie
* Échec // La fonction de rappel a échoué
* SPOPE // CONTENU DE FONCTION DE CAPPORT
* horodat // s'il faut ajouter un horodatage
*});
*
* /
Sjax =
fonction (win) {
var ie678 =! - [1,],
opéra = win.opera,
doc = win.Document,
head = doc.getElementsByTagName ('head') [0],
Timeout = 3000,
fait = false;
fonction _Serialize (obj) {
var a = [], key, val;
pour (clé dans obj) {
val = obj [key];
if (val.constructor == array) {
pour (var i = 0, len = val.length; i <len; i ++) {
a.push (key + '=' + encodeuRIComponent (val [i]));
}
}autre{
a.push (key + '=' + EncodeuRIComponent (Val));
}
}
Retour A.Join ('&');
}
demande de fonction (url, opt) {
fonction fn () {}
var opt = opt || {},
data = opt.data,
succès = opt.success || fn,
échec = opt.failure || fn,
scope = opt.scope || gagner,
TimeStamp = opt.Timestamp;
if (data && typeof data == 'objet') {
data = _Serialize (data);
}
var script = doc.createelement ('script');
rappel de fonction (issucc) {
if (issucc) {
if (typeof jsonp! = 'undefined') {// Le JSONP à droite de l'affectation doit être renvoyé en arrière-plan, et cette variable est une variable globale
fait = true;
Success.Call (Scope, JSONP);
}autre{
défaillance.Call (portée);
// alert ('avertissement: JSONP n'est pas revenu.');
}
}autre{
défaillance.Call (portée);
}
// gérer la fuite de mémoire dans IE
script.onload = script.onerror = script.onreadystateChange = null;
JSONP = Undefined;
if (head && script.parentNode) {
head.removechild (script);
}
}
fonction fixonError () {
setTimeout (function () {
si (! fait) {
callback ();
}
}, temps mort);
}
if (ie678) {
script.onreadystatechange = function () {
var ReadyState = this.readyState;
if (! Done && (ReadyState == 'Loaded' || ReadyState == 'Complete')) {
rappel (true);
}
}
// fixonError ();
}autre{
script.onload = function () {
rappel (true);
}
script.onerror = function () {
callback ();
}
if (opéra) {
FixonError ();
}
}
if (data) {
url + = '?' + données;
}
if (horodat) {
if (data) {
url + = '& ts =';
}autre{
url + = '? ts ='
}
url + = (new Date) .getTime ();
}
script.src = url;
head.insertbefore (script, head.firstchild);
}
return {charge: demande};
}(ce);
La méthode d'appel est la suivante:
La copie de code est la suivante:
Sjax.load ('jsonp66.js', {
Success: function () {alert (jsonp.name)},
défaillance: function () {alert ('error');}
});
Formatage du milomètre
La copie de code est la suivante:
fonction toth millise (num) {
var num = (num || 0) .toString (), result = '';
while (num.length> 3) {
result = ',' + num.slice (-3) + résultat;
num = num.slice (0, num.length - 3);
}
if (num) {result = num + result; }
Résultat de retour;
}
Ce qui précède est les scripts JavaScript couramment utilisés partagés par cet article. J'espère que vous les aimez.