IxEdit - jQuery la manière facile

Avec IxEdit il est possible JQuery fonctions JS sans programmation directement sur la volée dans le navigateur pour le code HTML des éléments zuzuweißen désiré. Au lieu d'un grand nombre d'autres termes la vidéo de démonstration:

Si vous voulez l'essayer, comment cela fonctionne:

Première Tout d'abord, les fichiers nécessaires à partir IxEdit IxEdit Télécharger

2ème Le Google Gears, le Firefox Addon Portable Google Gears installer et redémarrer navigateur

3e Dans le dossier décompressé à cet appel index.html IxEdit

Maintenant vous pouvez avec des éléments existants HTML comme jQuery événements zuweißen désiré. L'outil est idéal pour l'expérimentation avec des effets différents et plus généralement une meilleure idée des possibilités de jQuery pour se fournir.

Après tous les effets souhaités sont intégrés, la fonction de déploiement du code jQuery correspondante s'affiche, où le document source peut être copiée.

Facile ou!?

Lazy - plugins jQuery à la demande de chargement sur

Les jours que j'ai été un petit plugin jQuery bien appelé Lazy trébuché.
Si paresseux est juste un plugin grande 530Byte le cas des projets de grande envergure, un des avantages offerts par ce que les plugins jQuery qui concerne les autres, peut simplement faire Laden.

Lazy faire rien d'autre que des plug-ins pour initialiser que si quelque part vraiment appel à la fonction en est une.
Dites que vous pouvez intégrer paresseux sur ce que vous voulez, il sera chargé que lorsque c'est vraiment nécessaire.

Voici un exemple de code petite:

  1
 2
 3
 4
 5
 6

  'jquery.elastic.js' , 'elastic' ) ; $. Lazy («jquery.elastic.js», «élastique»);
 'jquery.validation.js' , 'validate' ) ; $. Lazy («jquery.validation.js ',' Valider ');
 'jquery.ajaxdotnet.js' , 'ajaxDotNet' ) ; $. Lazy («jquery.ajaxdotnet.js ',' ajaxDotNet ');

 / / Et puis vous utilisez vous plugins que vous faites toujours
 ) . elastic ( ) ; $ ('Textarea »). Élastique (); 

Plus d'infos et une démo et pour télécharger les fichiers que vous trouverez sur le site officiel:
http://www.unwrongest.com/projects/lazy/

Sélecteurs en jQuery

Je veux commencer une série dans la pièce par pièce, la manipulation de ses éléments jQuery, sélecteurs, plugins, etc est décrite. .. Je vais commencer par une description des différents sélecteurs

sélecteurs de base

• $ ('Code')
• $ ('# SomeID)
• $ ('. UneClasse)
• $('*')

  1

  "border" , "3px solid red" ) ; XXX. Css ("border", "rouge 3px solid"); 

XXX pour seulement un des sélecteurs ci-dessus sera utilisé. En particulier, la forme d'une *, qui est appliqué à tous les éléments dans le document.

Simple filtrage

• $ ('Li: d'abord »)
• $ ('Li: dernière)
• $ ('Li: pas (li: en premier)')
• $ ('Li: même »)
• $ ('Li: impair)

Ces sélecteurs de sélectionner des éléments en vertu d'un sous certaines conditions. "Li-premier exemple est une référence au premier élément dans une liste non ordonnée. "Li: pas (li: en premier)" sont des références à tous les points, sauf la première liste, et permet une manipulation voulue de ces objets.

  1

  ) . css ( "background-color" , "#bbbbff" ) ; $ ("Tr: même"). Css ("couleur" de fond ", bbbbff #"); 

Ce code serait le changement dans un tableau pour chaque paires d'index, la couleur de fond en utilisant la propriété CSS à une nouvelle couleur.

Filtrage de contenu

• $ ('Li: contains (' stringXXX ')')
• $ (': Vide')
• $ ('Li: a (a))
• $ ('P: parent ")

«Contient» ne change ici toute la liste des éléments dans lesquels l'expression chaîne "stringXXX" se produit.
"Vide" examiner tous les éléments que si un nœud enfant dans l'arborescence DOM est disponible. Même un simple texte dans un p-journée ne serait pas retourné.

  1

  ) . text ( "Was empty!" ) . css ( 'background' , 'rgb(255,220,200)' ) ; $ ("TD: vide"). Texte («Qu'est-ce vide!"). Css ('background', 'rgb (255,220,200)'); 

Visibilité Filtrer

• $ (': Hidden ")
• $ (': Visible »)

Voir aussi: 3-simple-conseils-pour-le-ajustement à jQuery-1.3

filtre des attributs

• $ ('Li [] classe »)
• $ ('Un rel [= "auto"]')
• $ ('[^ Class = "mon"]')
• $ ('A titre de $ [= "blog"]')

Une possibilité intéressante est de filtrer les éléments à l'aide d'un attribut. »] Li [classe», explique le seul élément ou plus (s) qui ont un attribut de classe.
"Un rel [="] "moi" indique un lien à des éléments de balises qui l'attribut "rel posséder» la valeur de soi ».
La liste montre troisième point tous les éléments noeud dans leur classe avec l'attribut "mon départ."
Le dernier point est une manière de rechercher des éléments qui ont à la fin d'un attribut d'une chaîne spécifique en tant que valeur.

  1

  ) . val ( "news here!" ) ; $ ("Input [^ class = 'mon']"). Val (" nouvelles ici! "); 

Formulaires

• $ (': Entrée ")
• $ (': Le texte »)
• $ (': Radio)
• $ (': Case')
• $ ('Submit')
• $ (': Image »)
• ...

Cela peut être spécifiée dans les formulaires HTML des champs de formulaire d'adresse.

Formulaire de filtre

• $ ('Input: enabled')
• $ (': Disabled »)
• $ (': Checked ")
• $ (': Sélection »)

Ces filtres peuvent être tirés de diverses propriétés de la référence des éléments les champs du formulaire. Alors, peut pouvez utiliser avec les sélecteurs ci-dessus par exemple, tous les champs sont actuellement l'adresse de propriété et de manipuler avez désactivé.

  1

  ) . val ( "this is it" ) ; $ ("Input: désactivé"). Val ("This is it"); 

Conseils pour traiter avec jQuery

Prêt à construire des composants dans leurs propres sites est une chose. L'autre est bien sûr la Funktionailität eux-mêmes de construire. Cela nécessite une connaissance approfondie du code en utilisant jQuery nécessaire. Voici quelques exemples pour obtenir .. chaud
chaque lieu de for ou while

Pour les boucles avec Inkrementor, tandis que les boucles de démolition et de condition. Aucun gros problème, mais souvent maladroit. Beaucoup plus facile avec le chacun-pour ou chaque boucle. En particulier en conjonction avec les tableaux. est également dans les 5 Java chaque nouveau disponible. Voici un petit exemple:

  1
 2
 3
 4
 5
 6
 7
 8

 [ 'MooTools' , 'Prototype' , 'jQuery' ] ; $. each ( myArray , function ( index , item ) { // Mache etwas mit dem Arrayelement // return false für Abbruch, true für weitermachen // each wird automatisch verlassen wenn jedes Element // durchlaufen ist } ) ; monTableau var = ['MooTools, Prototype "," jQuery'] ', $. chaque monTableau (, la fonction (indice, élément) (/ / Faire quelque chose avec l'élément de tableau / / return false pour annuler, le cas aller pour / / chaque est laissé automatiquement lorsque chaque élément / run /)) est; 

fonction Filtre

Cela permet à des éléments de l'arbre DOM facilement enlevés. Dans le code pourrait ressembler à:

  1
 2
 3
 4

  ) . filter ( function ( ) { $ ('Div'). Filter (function () (
     . length & gt ; 5 ; ce retour. childNodes. & longueur gt; 5; 
     / / Retourne une valeur booléenne
 )); 

La gestion des événements avec une différence!

Pour lier un événement à un élément n'est pas absolument nécessaire, l'ID de l'élément. Ce processus peut également être facilement mis en œuvre par le biais de la variable.

  1
 2
 3
 4
 5
 6

 $ ( '<div>' ) . appendTo ( 'body' ) ; // Verwende myDiv um Click Funktion herzustellen myDiv. bind ( 'click' , function ( ) { // do something...... } ) ;</ div > myDiv var = $ ('<div> »). appendTo (' body '); / / myDiv Cliquez sur Utiliser la fonction de produire myDiv. bind (" clic ", function () (/ / faire quelque chose) ...... ) </ div> 

Logger de mesure du rendement pour

Il ya toujours plusieurs solutions à un problème. Pour savoir quelle est la position plus convenable avec jQuery commandes de la console.

  1
 2
 3
 4
 5
 6
 7
 8
 9

  'Test1' ) ; console. temps («Test1»);
    / Logique du programme / de la première version ..
 'Test1' ) ; console. timeEnd ("Test1");

 'Test2' ) ; console. temps ("Test2");
    / / La logique de la deuxième ...
 'Test2' ) ; console. timeEnd ("Test2");

 / / Le plugin Firefox "Firebug" est le résultat mitloggen