jQuery et Manipulation de styles CSS

Nous allons développer une application basée sur le Web en utilisant jQuery, ce sera bien si vous avez une compréhension de la façon dont fonctionnent les applications internet et web.

Comment installer jQuery ?

Il y a deux façons d’utiliser jQuery.

• Installation locale – Vous pouvez télécharger la bibliothèque jQuery sur votre machine locale et incluez-le dans votre code HTML.
• Version basée sur CDN – Vous pouvez inclure la bibliothèque jQuery dans votre code HTML directement à partir de Content Delivery Network (CDN).

Extrait de cours

jQuery utilise les sélecteurs CSS pour sélectionner les éléments sur lesquels effectuer une action.

Pour une revue des sélecteurs CSS, voir :

1. Le document du cours (diapositives);

2. La page : http://www.w3schools.com/cssref/css_selectors.asp

jQuery fournit plusieurs méthodes pour lire ou modifier les propriétés CSS des éléments. Parmi les plus utilisées :

css() : permet de lire ou de modifier une propriété de style.

Par exemples :

Pour récupérer la couleur du premier paragraphe :

var c = $(’p’).css(’color’);

On peut récupérer les valeurs de plusieurs propriétés dans un tableau :

var tab = $(’#menu’).css([

‘width’, ‘height’, ‘background-color’, ‘margin’

]);

Pour mettre tous les paragraphes en rouge :

$(’p’).css(’color’,’red’);

Pour modifier plusieurs propriétés :

$(‘p’).css(‘border-color’,’blue’).css(‘background-color’,’lightgray’);

Ou :

$(‘p’).css({‘border-color’:’blue’,’background-color’:’lightgray’});

addClass() : permet d’ajouter la ou les classe(s) spécifiée(s) aux éléments sélectionnés.

Par exemple :

Pour récupérer la couleur du premier paragraphe :

.encadre {border : 2px red solid; padding : 5px;}

$(’img’).addClass(’encadre’);

removeClass() : permet de supprimer la ou les classe(s) spécifiée(s) des styles des éléments sélectionnés.

$(’img’).removeClass(’encadre’);

toggleClass() : permet d’ajouter, si absente(s), ou supprimer, si présente(s), la ou les classe(s) spécifiée(s) aux éléments sélectionnés.

$(’img’).toggleClass(’encadre’);

Profitez de ce manuel de formation en PDF pour comprendre mieux le JQuery et enrichir votre connaissance.

Commencez à télécharger ce cours adapté pour vous et à apprendre JQuery.

A. To udeft
jQuery – Manipulation de styles CSS
jQuery utilise les sélecteurs CSS pour sélectionner les éléments sur lesquels effectuer une action.
Pour une revue des sélecteurs CSS, voir :
1. Le document du cours (diapositives);
2. La page : http://www.w3schools.com/cssref/css_selectors.asp
jQuery fournit plusieurs méthodes pour lire ou modifier les propriétés CSS des éléments . Parmi
les plus utilisées :
css() : permet de lire ou de modifier une propriété de style.
Par exemples :
Pour récupérer la couleur du premier paragraphe :
var c = $(’p’). css (’color’);
On peut récupérer les valeurs de plusieurs propriétés dans un tableau :
var tab = $( ’#menu’ ).css( [
« width », « height », « bac kground -color », « margin »
]);
Pour mettre tous les paragraphes en rouge :
$(’p’).css( ’color’,’red’ );
Pour modifier plusieurs propriétés :
$(‘p’). css (‘border -color’,’blue’). css (‘background –
color’,’lightgray’) ;
Ou :
$(‘p’).css ({ ‘border -color ‘:’blue’, ‘background -color ‘:’lightgray’} );
addClass() : permet d’ajouter la ou les classe(s) spécifiée(s) aux éléments sélectionnés.
Par exemple :
Pour récupérer la couleur du premier paragraphe :
.enc adr e { bor d er : 2 px r e d s o l id; p ad di ng : 5px ;}
$(’ img ’). addClass (’ encadre ’);
removeClass() : permet de supprimer la ou les classe(s) spécifiée(s) des styles des éléments
sélectionnés.
$(’img’). removeClass (’encadre’);
toggleClass() : permet d’ajouter, si absente(s), ou supprimer, si présente(s), la ou les classe(s)
spécif iée(s) aux éléments sélectionnés.
$(’ img ’). toggleClass (’ encadre ’);

Pour plus d’exemples : http://api.jquery.com/category/css/