JavaScript est un langage de script littéral, qui est un langage dynamique, faible et basé sur un prototype avec des types de support intégrés. Son interprète est appelé le moteur JavaScript. Il fait partie du navigateur et est largement utilisé dans le langage de script client. Il a d'abord été utilisé sur les pages Web HTML (une application sous le langage de balisage universel standard) pour ajouter des fonctions dynamiques aux pages Web HTML.
Cet article a compilé 5 code JavaScript pratique pour que tout le monde puisse faciliter le développement.
1. Déterminez si la date est valide
La fonction de date incluse dans JavaScript est encore trop simple, et il est difficile de répondre aux besoins de l'analyse et de jugement de différents formats de date dans des projets réels. JQuery a également des bibliothèques tierces pour faciliter le traitement lié à la date, mais parfois vous pouvez simplement avoir besoin d'une fonction très simple sans introduire une énorme bibliothèque tierce. Pour le moment, vous pouvez utiliser le code de vérification de date suivant, qui vous permet de personnaliser le format de date et de vérifier la validité de la date.
fonction isValidDate (valeur, userFormat) {// Définissez le format par défaut si le format n'est pas fourni userFormat = userFormat || «mm / dd / yyyy»; // Trouvez un délimiteur personnalisé en excluant // les caractères de mois, de jour et d'année var délimiter = / ■^mdy // Créez un tableau avec mois, jour et année // nous connaissons donc l'ordre du format par index var theformat = userFormat.split (Delimiter); // Créer un tableau à partir de la date utilisateur var theDate = value.split (Delimiter); fonction isdate (date, format) {var m, d, y, i = 0, len = format.length, f; pour (i; i <len; i ++) {f = format [i]; if (/m/.test(f)) m = date [i]; if (/d/.test(f)) d = date [i]; if (/y/.test(f)) y = date [i]; } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // Vérifiez si c'est un jour valide du mois d <= (nouvelle date (y, m, 0)). getDate ()); } return isdate (thedate, theformat);}Comment utiliser:
L'appel suivant revient faux car il n'y a pas de 31 jours en novembre
IsvalidDate ('DD-MM-YYYY', '31 / 11/2012 ')
2. Obtenez la largeur ou la hauteur maximale d'un ensemble d'éléments
La fonction suivante est très utile pour les développeurs qui ont besoin d'effectuer une disposition dynamique.
var getMaxHeight = fonction ($ elms) {var maxHeight = 0; $ elms.each (function () {// Dans certains cas, vous voudrez peut-être utiliser outerHeight () à la place var hauteur = $ (this) .height (); if (height> maxHeight) {maxHeight = height;}}); return maxheight;};Comment utiliser:
$ (éléments) .Height (getMaxHeight ($ (elements)));
3. Mettez en surbrillance le texte
Il existe de nombreuses bibliothèques tierces de jQuery qui peuvent implémenter la fonction de mise en évidence du texte, mais je préfère utiliser le petit morceau de code JavaScript suivant pour implémenter cette fonction. Il est très court et peut être modifié de manière flexible en fonction de mes besoins, et vous pouvez définir le style de mise en évidence vous-même. Les deux fonctions suivantes peuvent vous aider à créer votre propre plugin de mise en évidence de texte.
Fonction Highlight (texte, mots, balise) {// Tag par défaut Si aucune balise n'est fournie tag = tag || 'portée'; var i, len = words.length, re; pour (i = 0; i <len; i ++) {// Global Regex pour mettre en surbrillance toutes les correspondances re = new regexp (mots [i], 'g'); if (re.Test (text)) {text = text.replace (re, '<' + tag + '> $ & </' + tag + '>'); }} Retour Texte;}Vous aurez également besoin de défoncer les fonctions:
Fonction Halghlight (texte, balise) {// TAG DE DÉFAUT Si aucune balise n'est fournie tag = tag || 'portée'; var re = new regexp ('(<' + tag + '. +?> | <//' + tag + '>)', 'g'); return text.replace (re, '');}Comment utiliser:
$ ('p'). html (highlight ($ ('p'). html (), // le texte ['foo', 'bar', 'baz', 'Hello world'], // liste de mots ou de phrases pour mettre en évidence 'Strong' // tag personnalisé));4. Effet de mouvement texte
Parfois, vous voulez ajouter un mouvement à un paragraphe de votre texte afin que chaque mot puisse bouger. Vous pouvez utiliser le code plug-in jQuery suivant pour réaliser cet effet. Bien sûr, vous devez combiner un style de transition CSS3 pour obtenir de meilleurs résultats.
$ .fn.animateText = function (retard, klass) {var text = this.text (); var lettres = text.split (''); return this.each (function () {var $ this = $ (this); $ this.html (text.replace (/./ g, '<span> $ & </span>')); $ this.find ('span.letter'). chaque (fonction (i, el) {setTimeout (function () {$ (el) .addclass (klass);}, ralles; });Comment utiliser:
$ ('p'). AnimateText (15, 'foo');
5. Masquer les éléments un par un
Le plug-in jQuery suivant peut masquer un groupe d'éléments un par un selon la longueur de pas (temps d'intervalle) que vous définissez. Utilisé dans le rechargement des éléments de liste peut obtenir de bons résultats.
dollars. var $ el = this; pour (var i = 0, d = 0, l = $ el.length; i <l; i ++, d + = o.delay) {$ el.eq (i) .delay (d) .fadein (o.speed, o.ease); } retourne $ el;}Comment utiliser:
$ (elements) .fadeall ({retard: 300, vitesse: 300});
Ce qui précède n'est qu'une petite partie de ces extraits de code JavaScript pratiques, et j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.