JavaScript/jQuery

Début de la boite de navigation du chapitre

jQuery

Chapitre no9
Leçon : JavaScript
Chap. préc. :	Introduction à Prototype

   

fin de la boite de navigation du chapitre

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : jQuery
JavaScript/jQuery », n'a pu être restituée correctement ci-dessus.

Installation

Il suffit de télécharger le fichier du site officiel, puis de le stocker dans un endroit où les scripts l'utilisant feront mention. Par exemple pour un .html ou .js dans le même répertoire :

<script type="text/javascript" src="jquery.js"></script>

Les grandes lignes du langage Jquery

Dans ce framework (comme dans Prototype), la fonction $() permet de sélectionner (remplace les getElementBy). Elle est synonyme de jQuery().

Par extension le Jquery.UI ajoute des plugins, c'est à dire des fonctions pré-programmées stockées sur pages JS : Jquery.NomDeLaFonction.js. Fonctions graphiques, Drag & Drop, multi-forms etc.

Déclarer une fonction dans celle-ci ($(function(){.....});) le fait après le chargement de la page (onload), ce qui assure sa bonne exécution dès l'affichage complet.

Méthodes utiles

Manipulation d'objets

Cette section est vide, pas assez détaillée ou incomplète. Votre aide est la bienvenue !

Manipulation de tableaux

Pour transformer un tableau en chaine de caractères :

.join()
.toString()

Pour trier un tableau :

.sort()

.

Manipulation de chaînes de caractères

Sur l'espace...

style=//

1. present{background-color:#456548;}

Penser à :

 $(document).ready(function(){
 $(selector).text("voici le texte qui sera placé sur le compartiment selector ou élement etc");
 )};

à chaque fois qu'il y à une fonction mise en place

Propriétés et Méthodes

• browser
• noConflict
• fn.Jquery

De nombreux sélecteurs simples, d'attributs, de classe ou d'identifiants sont disponibles sur Jquery.

 $(selector,context)
 $(element)
 $(elements)
 $(JqueryObject)
 $(html)

afin de manipuler le DOM il existe sur Jquery des méthodes.

each(callback  length ...

Gérer les Attributs et Propriétés Gérer les Classes CSS, les styles, les dimensions, positions et contenu. - La gestion des évènements (events) - la requête serveur avec $.Ajax(options)

De nombreux effets visuels sont disponibles.

Syntaxe

jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript.

les Méthodes employés

Obj(tableau d'éléments,Objet,Objet jQuery)

un tableau sera sérialisé en nom/valeur //un Obj par clé \ valeur . Effets visuels // animate // toogle etc sélecteurs CSS // $(sélecteur).animate (ObjStyle,[duration],[easing],[callback]);

jquery(#ID).merge

jquery().merge (Array1 ,Array2) function (){ });

jquery(#ID).each

jquery().each (Array , function (){(index , value )});

jquery(#ID).grep()

jquery().grep() (Array , function (){( value, index )});

jquery(#ID).map()

jquery().map (Array , function (){(value, index )});

jquery(#ID).trim

jquery().trim (string);

(ID : eq(2)") sélect la 3eme cellule d'un d'un tableau

("tr : even").css sélect les élements pairs

(a : gt(1)) sélect. tous les link's début 3eme

(tr : odd).css sélect.Elements impairs (index numérique à partir de 0)

$('#titre');$(#titre).html('texte') ajout une chaine de caractère à titre

$('#titre');$(#titre).html('texte') ajout une chaine de caractère à titre

$.extend(obj1,obj2);...var obj = $.extend({obj1,obj2,obj3}); ajout

//<! [CDATA[var expréss= new regexp("[a-zA-Zèéàçùî\-]+",""gi");
var tabl = test.match(expréss);
var aff= "nombre de noms...etc" + tabl.length + "\n";
for (var i=0;i < tabl.length ;i++){aff = aff + "[" + tabl[i] + "]\n";}
//]]> <form name ='form' action = "">
input type = 'text' name = exempl..
onclick = ectraire (form) { var test = document.form.exemple.value; utiliser lastIndexOf() pour vous déplacer dans le occurrence texte vers le mot suivant (car IndexOf c'est le premier caractère

jQuery chaine de caractères
jQuery list = "liste"
jquery surfloading = [];

Début d'une définition

jquery.text

$("lkj").link ("style","origine") function(){alert("ceci est ma liste"};

Fin de la définition

Voir aussi

• Programmation JavaScript/Mots réservés#Mots_r.C3.A9serv.C3.A9s_en_jQuery sur Wikilivres

Outils de tests en ligne :

• http://jsbin.com/#javascript,html
• http://jsfiddle.net/

Références

• http://www.siteduzero.com/tutoriel-3-160891-jquery-ecrivez-moins-pour-faire-plus.html

JavaScript

Introduction à Prototype