{"id":1990,"date":"2011-05-10T08:29:25","date_gmt":"2011-05-10T07:29:25","guid":{"rendered":"http:\/\/flaven.fr\/?p=1990"},"modified":"2013-09-24T06:10:45","modified_gmt":"2013-09-24T04:10:45","slug":"jquery-javascript-selection-et-filtrage-filtrer-et-selectionner-avec-jquery","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2011\/05\/jquery-javascript-selection-et-filtrage-filtrer-et-selectionner-avec-jquery\/","title":{"rendered":"jQuery, javascript, s\u00e9lection et filtrage – Filtrer et s\u00e9lectionner avec jQuery"},"content":{"rendered":"

\n
\n
\nLa chose la plus bluffante lorsque on d\u00e9bute avec jQuery est bien cette capacit\u00e9 offerte par la librairie \u00e0 manipuler des \u00e9l\u00e9ments dans le flot HTML et de leur ajouter des classes CSS.<\/p>\n

Lorsque l’on d\u00e9bute dans le d\u00e9veloppement javascript, c’est de voir un r\u00e9sultat imm\u00e9diat dans son navigateur qui importe et donne quelques encouragements \u00e0 poursuivre dans l’aride voie du Javascript !<\/p>\n

On va voir donc comment se bluffer soit m\u00eame en commen\u00e7ant par les principes les plus faciles de manipulation et du filtrage \u00e0 l’aide de la librairie jQuery.<\/b><\/p>\n

Charger jQuery depuis le CDN de google<\/h4>\n

Par facilit\u00e9 et paresse, on va charger le librairie jQuery directement depuis le CDN (Content Distribution Network) de google qui gracieusement met \u00e0 disposition la librairie jQuery depuis ses serveurs. Les performances des serveurs de Google seront \u00e0 coup s\u00fbrs meilleurs que n’importe lequel des h\u00e9bergements.<\/p>\n

Deux solutions s’offrent \u00e0 vous :<\/p>\n

    \n
  1. Soit vous inscrire pour obtenir une API Key afin d’avoir l’autorisation d’utiliser le CDN de google<\/li>\n
  2. Soit d’utiliser directement les \u00e9l\u00e9ments par Google en personne dans ces nombreux exemples avec jQuery<\/li>\n<\/ol>\n

    On choisit la deuxi\u00e8me m\u00e9thode, plus facile….<\/b><\/p>\n

    Si vous choisissez de vous inscrire, il faudra d\u00e9clarer un nom de domaine par exemple http:\/\/social.hecube.net\/<\/code> et vous obtiendrez une cl\u00e9 de ce type
    \nABQIXXCCe-06-OL6sTKBMYSHQQpzsRR7boKB_9drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ<\/code><\/p>\n

    Insertion compl\u00e8te \u00e0 placer entre les balises ...<\/code> de votre page pour tirer profit de jQuery depuis le CDN de Google<\/b><\/p>\n

    \r\n<script type=\"text\/javascript\" src=\"https:\/\/www.google.com\/jsapi?key=ABQIXXCCe-06-OL6sTKBMYSHQQpzsRR7boKB_9drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ\"><\/script>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\"><\/script>\r\n<\/pre>\n
    Insertion avec la m\u00e9thode propos\u00e9e par Google<\/b><\/p>\n
    \r\n<script type=\"text\/javascript\" src=\"https:\/\/www.google.com\/jsapi?key=ABQIAAAAe-06-OL7sTKBMYSHQQpzsRR7boKB_8drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ\"><\/script>\r\n<script type=\"text\/javascript\">\r\n\/*\r\n    *  How to load jQuery with google CDN\r\n    *\/\r\n    google.load(\"jquery\", \"1\");\r\n<\/script>\r\n<\/pre>\n
    Utiliser jQuery<\/h4>\n
    Une fois, la librairie jQuery charg\u00e9e via le CDN de Google, on va pourvoir manipuler quelques \u00e9l\u00e9ments HTML genre div<\/code>, ul<\/code>, li<\/code>.<\/p>\n
    On a d\u00e9nombr\u00e9 14 exemples de filtrage et de s\u00e9lection avec jQuery, utilisant la plupart des fonctions natives de jQuery telles que addClass<\/code>, siblings()<\/code>, next()<\/code>, prev()<\/code>… etc.<\/b><\/p>\n
    Une illustration du r\u00e9sultat produit dans la cas num\u00e9ro 2<\/b>
    \n\"jQuery,<\/p>\n
    Voici le fichier HTML qui r\u00e9sume toutes les manipulations sur deux listes contenant : L\u00e9gumes et Fruits, Animaux.<\/p>\n
    \r\n\t<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\"\r\n\t   \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\">\r\n\r\n\t<html lang=\"en\">\r\n\t<head>\r\n\t\t<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\">\r\n\t\t<title>demo jQuery hecube<\/title>\r\n\t\t<meta name=\"author\" content=\"Social hecube\">\r\n\r\n\t\t<script src=\"http:\/\/www.google.com\/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0\" type=\"text\/javascript\"><\/script>\r\n\r\n\t \t<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\"><\/script>\r\n\r\n\r\n\r\n\r\n\t\t<script type=\"text\/javascript\">\r\n\t\tvar filExemple = {\r\n\t\t  ready : function() {\r\n\t\t    $(\"a\").click(filExemple.findElts);\r\n\t\t  },\r\n\r\n\t\t\t\/\/ fonction de recherche des éléments \r\n\t\t  findElts : function($e)\r\n\t\t  {\r\n\t\t    $e.preventDefault();\r\n\r\n\t\t    $(\"*\").removeClass(\"Rose\");\r\n\r\n\t\t\t\/\/ les différents cas de recherche\r\n\t\t    switch (this.id)\r\n\t\t    {\r\n\t\t      case \"filFindLi\":\r\n\t\t      {\r\n\t\t        \/\/ Trouver tous les li dans ul\r\n\t\t        $(\"ul\").find(\"li\").addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filSibLi\":\r\n\t\t      {\r\n\t\t        $(\"li#filPomm\").siblings().addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filNext\":\r\n\t\t      {\r\n\t\t        $(\"li#filRais\").next().addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filPrev\":\r\n\t\t      {\r\n\t\t        $(\"li#filLait\").prev().addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filNextAll\":\r\n\t\t      {\r\n\t\t        $(\"li#filLou\").nextAll().addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filPrevAll\":\r\n\t\t      {\r\n\t\t        $(\"li#filLou\").prevAll().addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"SelectLeg\":\r\n\t\t      {\r\n\t\t        $(\"li#filRais\").prevAll(\"li.filLeg\").addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filParents\":\r\n\t\t      {\r\n\t\t        $(\"li#filLait\").parents(\"div#filSelection\").addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filParent\":\r\n\t\t      {\r\n\t\t        $(\"li\").parent(\"ul\").addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filChildren\":\r\n\t\t      {\r\n\t\t        $(\"div.Liste\").children(\"h4\").addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filNot\":\r\n\t\t      {\r\n\t\t        $(\"ul li\").not(\"li.filLeg\").addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filSlice\":\r\n\t\t      {\r\n\t\t        $(\"ul#filAnimaux li\").slice(2, 4).addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filAdd\":\r\n\t\t      {\r\n\t\t        $(\"ul#filAnimaux li\").add(\"li#filPoti, li#filEndi\").addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t      case \"filEq\":\r\n\t\t      {\r\n\t\t        $(\"ul li\").eq(12).addClass(\"Rose\");\r\n\t\t        break;\r\n\t\t      }\r\n\t\t    }\r\n\t\t  }\r\n\t\t};\r\n\r\n\t\t$(document).ready(filExemple.ready);\r\n\r\n\t\t<\/script>\r\n\t\t<style>\r\n\t\tbody {\r\n\t\t    font: 16px sans-serif;\r\n\t\t}\r\n\t\tul {\r\n\t\t    list-style: none;\r\n\t\t    padding: 0;\r\n\t\t    margin: 0;\r\n\t\t    width: 200px;\r\n\t\t}\r\n\t\tli {\r\n\t\t    padding: 3px;\r\n\t\t    margin: 3px;\r\n\t\t}\r\n\t\tdiv.Liste {\r\n\t\t    float: left;    \r\n\t\t    margin: 0 20px;\r\n\t\t}\r\n\t\tdiv#Select {\r\n\t\t    clear: left;   \r\n\t\t    padding: 10px;\r\n\t\t}\r\n\t\t.Rose {\r\n\t\t    border: 1px solid #666666;\r\n\t\t    background: #F6177B;\r\n\t\t\tcolor:#fff;\r\n\t\t}\r\n\t\tdiv#filSelection {\r\n\t\t    overflow: hidden;\r\n\t\t}\r\n\t\t<\/style>\r\n\t\t\t<!-- Date: 2011-05-07 -->\r\n\t\t<\/head>\r\n\r\n\t\t<body>\r\n\r\n\t<!-- begin --><div id=\"filSelection\">\r\n\r\n\t\t      <div class=\"Liste\">\r\n\t\t          <h4>Légumes et Fruits<\/h4>\r\n\t\t          <ul id=\"filLegumesFruits\">\r\n\t\t             <li class=\"filLeg\" id=\"filPoti\">Potiron<\/li>\r\n\t\t             <li class=\"filLeg\" id=\"filEndi\">Endives<\/li>\r\n\t\t             <li class=\"filLeg\" id=\"filLait\">Laitue<\/li>\r\n\t\t             <li class=\"filLeg\" id=\"filPomm\">Pomme de terre<\/li>\r\n\t\t             <li class=\"filFruits\">Poire<\/li>\r\n\t\t             <li class=\"filFruits\">Cerise<\/li>\r\n\t\t             <li class=\"filFruits\" id=\"filRais\">Raisin<\/li>\r\n\t\t             <li class=\"filFruits\">Combava<\/li>\r\n\t\t          <\/ul>\r\n\t\t      <\/div>\r\n\r\n\r\n\t\t      <div class=\"Liste\">\r\n\t\t          <h4>Animaux<\/h4>\r\n\t\t          <ul id=\"filAnimaux\">\r\n\t\t             <li id=\"filPou\">Poulet<\/li>\r\n\t\t             <li id=\"filVac\">Vache<\/li>\r\n\t\t             <li id=\"filTig\">Tigre<\/li>\r\n\t\t             <li id=\"filLou\">Loup<\/li>\r\n\t\t             <li id=\"filEle\">Éléphant<\/li>\r\n\t\t          <\/ul>\r\n\t\t      <\/div>\r\n\r\n\t\t    <\/div>\r\n\r\n\r\n\t\t<div id=\"Select\">\r\n\r\n\t\t\t<ol>\r\n\r\n\t\t\t\t<li><a href=\"#\" id=\"filFindLi\">Sélectionner toutes les balises <code>li<\/code> à l'intérieur de la balise <code>ul<\/code>.<\/a><\/li>\r\n\t\t\t\t<li><a href=\"#\" id=\"filSibLi\">Sélectionner toute la parenté de la balise contenant l'id filPomm.<\/a><\/li>\r\n\t\t        <li><a href=\"#\" id=\"filNext\">Sélectionner la balise <code>li<\/code> <b>suivant<\/b> la balise <code>li<\/code> contentant l'id filRais à savoir <b>Combava<\/b><\/a><\/li>\r\n\t\t        <li><a href=\"#\" id=\"filPrev\">Sélectionner la balise <code>li<\/code> <b>précédente<\/b> la balise <code>li<\/code> contenant l' id filLait à savoir <b>Endives<\/b>.<\/a><\/li>\r\n\t\t        <li><a href=\"#\" id=\"filNextAll\">Sélectionner toute la parenté après la balise contenant l'id filLou.<\/a><\/li>\r\n\t\t        <li><a href=\"#\" id=\"filPrevAll\">Sélectionner toute la parenté avant la balise contenant l'id filLou<\/a><\/li>\r\n\t\t\t\t<li><a href=\"#\" id=\"SelectLeg\">Sélectionner exclusivement les balises <code>li<\/code> contenant l'id filLeg à partir de la balise contenant l'id filRais<\/a>\r\n\t\t        <li><a href=\"#\" id=\"filParents\">Sélectionner toute la parenté de l'élément <code>div<\/code> avec l'id filSelection.<\/a>\r\n\t\t        <li><a href=\"#\" id=\"filParent\">Sélectionner toute la parenté des éléments <code>ul<\/code> c'est à dire tous les <code>li<\/code>.<\/a>\r\n\t\t        <li><a href=\"#\" id=\"filChildren\">Sélectionner les balises <code>h4<\/code> au sein des éléments <code>div<\/code> qui possèdent la classe Liste.<\/a>\r\n\t\t        <li><a href=\"#\" id=\"filNot\">Sélectionner tous les éléments <code>li<\/code> au sein des balises <code>ul<\/code>, à l'exception des <code>li<\/code> dont la classe est filLeg.<\/a>\r\n\t\t\t\t<li><a href=\"#\" id=\"filSlice\">Sélectionner tous les éléments <code>li<\/code> compris entre Vache et Éléphant.<\/a>\r\n\t\t        <li><a href=\"#\" id=\"filAdd\">Sélectionner tous les <code>li<\/code> dans la liste des animaux et ajouter les <code>li<\/code> contenant les classes filPoti et filEndi à savoir <b>Potiron<\/b> et <b>Endives<\/b>.<\/a>\r\n\t\t        <li><a href=\"#\" id=\"filEq\">Sélectionner uniquement le dernier <code>li<\/code> à savoir <b>Éléphant<\/b>.<\/a>\r\n\t\t\t<\/ol>\r\n\r\n\r\n\r\n\t\t\t<\/div><!-- \/\/end  -->\r\n\t\t<\/body>\r\n\t\t<\/html>\r\n\t\r\n\t\r\n<\/pre>\n
    En savoir plus<\/h2>\n