Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Le Blog de NicoLargo-Tutorial Jquery

    Загружено:

    mlabassi6868
    77 просмотров2 страницы

    Оригинальное название

    Le Blog de NicoLargo-Tutorial jQuery

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    77 просмотров2 страницы

    Le Blog de NicoLargo-Tutorial Jquery

    Загружено:

    mlabassi6868

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 2

    Le blog de NicoLargo | Tutorial jQuery

    Copyright Nicolas Richasse nicolas.richasse@gmail.com


    http://blog.nicolargo.com/2008/01/tutorial-jquery.html

    Tutorial jQuery

    jQueryest une bibliothèque javascript open-source et cross-browser qui permet de traverser et manipuler très facilement
    l'arbre DOM de vos pages web à l'aide d'une syntaxe fortement similaire à celle d'XPath (qui est la syntaxe de manipulation
    d'arbre XML). jQuery vous permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des
    attributs, etc. mais également de gérer les événements javascript ainsi que de faire des requetes AJAX le plus simplement du
    monde.

    Pour développer jQuery, il suffit de connaitre un seul objet référencé par la variable "$". Cet objet est en fait une fonction
    javascript qui est le point d'entrée de tout le framework, et dont le retour est l'object "$" lui-meme (dont le contexte dépend
    de la fonction appelée) ce qui permet d'enchainer facilement et rapidement des actions (comme nous le verrons dans les
    exemples qui suivent).

    Maintenant que les présentations sont faites, passons sans attendre aux exemples !

    Tout d'abord, jQuery peut etre téléchargé ici sous forme d'un fichier .js normal ou compressé : http://jquery.com.Une fois
    téléchargé, il suffit de l'insérer entre les balises <head> et </head> de vos pages html.

    Exemple : <script type="text/javascript" src="jquery-1.2.2.min.js"/>Quelques bases sur la sélection...

    - $("p");
    Cet appel retourne tous les éléments P (paragraphes) de votre document : on a rarement fait plus simple.
    - $(".tata");
    Cet appel retourne tous les éléments de votre document qui ont la classe CSS "tata".
    - $("#toto");
    Cet appel retourne l'élément de votre document, s'il existe, dont l'attribut ID est "toto".
    - $("#titi > span");
    Cet appel retourne tous les éléments SPAN contenus dans l'élément dont l'identifiant est "titi". On pourrait écrire cet
    appel de cette façon également : $("span", $("#titi"));
    - $("table#tutu > tr:even");
    Cet appel retourne tous les éléments TR pairs (pour les lignes impaires remplacer "even" par "odd") contenus dans
    l'élément TABLE dont l'identifiant est "tutu" (à noter la grande originalité des noms que je donne a mes identifiants...).
    Cet appel peut etre extremement utile pour appliquer une couleur de fond a toutes les lignes paires par exemple.

    A partir de la, vous pouvez appliquer toutes les fonctions de jQuery que vous voulez. En voici quelques exemples concrets
    (cliquez ici pour télécharger les exemples d’appels jQuery du tutorialet les jouer chez vous) !

    - $("p").addClass("bluebg");
    Cet appel va chercher tous les éléments P de votre document et leur ajouter la classe CSS nommée "bluebg" si ils ne la
    possèdent pas déjà.
    - $("p").removeClass("bluebg");
    Cet appel retire la classe "bluebg" des éléments P du document.
    - $("p").toggleClass("bluebg");
    Cet appel va alterner les fonctions "addClass" et "removeClass" vues précédemment.
    - $("p:odd").css("border", "5px solid black");
    Cet appel va ajouter une bordure noire de 5px d'épaisseur a tous les éléments P impairs.
    - $("a[href=http://www.google.fr]").css("font-weight", "bold").css("color", "red").css("background-color",
    "green");
    Cet appel va transformer tous les liens pointant vers le site http://www.google.fr, comme celui-ci : google.fr c'est par ici
    !
    - $("p#testAppend > span").append("Hello World !");
    Cet appel va ajouter du texte a la balise SPAN contenu dans l'élément P dont l'identifiant est "testAppend".

    page 1 / 2
    Le blog de NicoLargo | Tutorial jQuery
    Copyright Nicolas Richasse nicolas.richasse@gmail.com
    http://blog.nicolargo.com/2008/01/tutorial-jquery.html

    Quelques effets sympas maintenant !

    - $("#testAnim").show("slow");
    - $("#testAnim").hide("normal");
    - $("#testAnim").slideDown(500);
    - $("#testAnim").slideUp(200);
    - $("#testAnim").toggle();
    - $("#testAnim").fadeIn();
    - $("#testAnim").fadeOut();

    Si jamais vous trouvez que la bibliothèque jQuery propose peu d'animation, sachez qu'il est possible de rajouter des plugins !
    Voici une petite liste de plugins très intéressants :

    - Interfaceest certainement le plugin le plus connu : il ajoute énormément d'animations a jQuery. Allez voir la page
    d'exemples ici
    - ThickBoxpermet de faire des "popup" html (pour faire des galeries d'images par exemple)
    - UI Datepickerpermet de créer des calendriers très simplement
    - etc.

    Voila, c'est fini pour cette petite introduction a jQuery. Voici quelques liens qui vous seront certainement utiles :

    - Le site officiel de jQuery : http://www.jquery.com


    - Une documentation en ligne de jQuery écrite en jQuery (ca vaut le coup d'oeil !) :
    http://www.visualjquery.com/1.1.1.html

    Bon développement !NDNicolargo: Merci à Ritchi, maître-es développeur pour ce billet !

    page 2 / 2

    Вам также может понравиться