Chargement...

Accueil Contact Menu

jQuery DOM manipulation

Les selecteurs Evènements

Récupérer le contenu d'un élément

On peut récupérer le contenu d'un élément à l'aide des méthodes jQuery .html() et .text()

Exemple:

<div id="main">Bonjour je suis <b>batman</b></div>

	<script type="text/javascript">
	alert( $("#main").html() );
	/* Retourne Bonjour je suis <b>batman</b> */
	alert( $("#main").text() );
	/* Retourne Bonjour je suis batman */
	</script>

Remplacer le contenu

Pour remplir un élément, il faut utiliser la méthode .html()

<div id="main">Bonjour je suis <b>batman</b></div>

	<script type="text/javascript">
	$("#main").html("Il était une fois ");
	</script>

Résultat:

<div id="main">Il était une fois</div>

Ajouter du contenu

Il est possible d'ajouter du contenu à un élément grâce à la méthode .append()

<div id="main">Il était une fois</div>

	<script type="text/javascript">
	$("#main").append(" un enfant qui aimait le chocolat");
	</script>

Résultat:

<div id="main">Il était une fois un enfant qui aimait le chocolat</div>

Il existe une autre syntaxe pour ajouter du contenu: .appendTo()

<div id="main">Il était une fois</div>

	<script type="text/javascript">
	$( " un enfant qui aimait le chocolat" ).appendTo( "#main" );
	</script>

Résultat:

	<div id="main">Il était une fois un enfant qui aimait le chocolat</div>

Ajouter du contenu au début de l'élément

Il est possible d'ajouter du contenu au début d'un élément grâce à la méthode .prepend()

<div id="main">Il était une fois</div>

	<script type="text/javascript">
	$("#main").prepend("un enfant qui aimait le chocolat ");
	</script>

Résultat:

<div id="main">un enfant qui aimait le chocolat Il était une fois</div>

Il existe une autre syntaxe pour cette action:

<div id="main">Il était une fois</div>

	<script type="text/javascript">
	$("un enfant qui aimait le chocolat ").prependTo("#main");
	</script>

Résultat:

<div id="main">un enfant qui aimait le chocolat Il était une fois</div>

Supprimer un élément

	<script type="text/javascript">
	/* Supprime toutes les balises <li> du document */
	$("li").remove();
	</script>

Vider un élément

	<script type="text/javascript">
	/* Vide toutes les balises <li> du document */
	$("li").empty();
	</script>

Remplacer un élément

	<script type="text/javascript">
	/* Remplace les balises <li> par <a>Lien</a> */
	$("li").replaceWith( $("<a>Lien</a>") );
	</script>

Envelopper un élément

	<script type="text/javascript">
	/* Envelopper les balises <a> par des balises <li> */
	$("menu a").replaceWith( $("<li />") );
	</script>

Ecrire après un élément

	<script type="text/javascript">
	/* Ajoute la balise <span> juste après le footer */
	$("footer").after("<span>Lien 1</span>");
	</script>

Ecrire avant un élément

	<script type="text/javascript">
	/* Ajoute la balise <span> juste avant le footer */
	$("footer").before("<span>Lien 2</span>");
	</script>

Modifier les attributs

	<script type="text/javascript">

	/* Récupère la valeur de la balise href */
	var href = $("a").attr("href");

	/* Modifie la valeur de la balise href */
	$("a").attr("href", "http://creersonsiteweb.net");

	</script>

UNE QUESTION SUR L'ARTICLE?

Les selecteurs Evènements

Initiation

Un site web c'est quoi?Dév. back-end / front-end Que dois-je maîtriser ?Design /ergonomie web Navigateur Chrome L'éditeur de texte Installer serveur web Photofiltre OVH Hébergement FTP et filezilla Dictionnaire informatique

HTML

HTML c'est quoi?Créer une page web Les balises Les attributs Les tableaux Les listes Les images Les liens Les inputs Les formulaires Caractères spéciaux

CSS

CSS c'est quoi?Les sélecteurs L'héritage Les propriétés Les couleurs La police Les marges Position Flottant Les pseudo class Les unités de mesure Responsive design Astuces CSS Animations CSS

PHP

PHP c'est quoi?Mon premier script Les commentaires Variable Fonction Array / Tableau Loop / boucle Conditions GET et POST Cookies Sessions Variables serveur Dates

PHP Avancé

Syntaxe alternative Ecrire/Lire un fichier Expressions régulières POO PDO JSON XML Import / Export CSV Envoyer un mail Fonction récursive Convertir page web en PDF

Bootstrap

Bootstrap c'est quoi?La grille Les boutons Badges et Labels Images / Glyphicon Les alertes Responsive tables Tooltip Carousel Fenêtre dynamique Bootstrap wrap / Bootswatch Font Awesome

javascript / jQuery

jQuery c'est quoi?Javascript Les selecteurs Manipulation DOM Evènements Ajax Plugins jQuery Créer extension AngularJS

MySQL

Mysql c'est quoi?SQL SQL CREATE SQL INSERT SQL SELECT SQL UPDATE SQL DELETE PHPMyAdmin Les jointures Stocker mot de passe

Symfony 2

Introduction symfony Installer symfony Bundles (modules)Route Controller TWIG Assetic Bootstrap / Font Awesome AngularJS Doctrine / Entités Formulaires Mise en prod Bundles FOS Sécurité Services API REST

Prestashop

Installer eboutique Prestashop Gestion Prestashop Personnaliser Prestashop Modules Prestashop

Optimiser

En-tête HTTP / Cache SEO Référencement Encodage Sécuriser son site .htaccess URL Rewriting Sass Compass CoffeeScript Grunt Sitemap.xml Convertir images

Linux

Linux c'est quoi?Emuler Linux Installer Linux Ubuntu Les commandes linux Les droits utilisateurs Configurer Ubuntu Installer Apache MySQL PHP Installer Nginx + PHP5 FPM Configurer VHost Installer serveur SMTP Capture écran / gif

Site

Mentions légales

CSSW Apprendre à créer son site web