Léa – Documentation

Léa – Documentation

Léa

Utilisation générale, $.ready(), $.extend(), $.create(), $.ajax(), $.get(), $.post(), .each(), .get(), .find(), .hasClass(), .addClass(), .removeClass(), .css(), .show(), .hide(), .html(), .addEvent(), .removeEvent(), .click(), .attr(), .removeAttr(), .data(), .removeData(), .clone(), .append(), .prepend(), .before(), .after(), .remove(), .parent(), .previous(), .next(), .position()

Utilisation générale

Usage : $('query' | htmlElement).method( [arguments] );
Exemple :

$('li a').click( function(event){
   alert('Hello!');
} );

$.ready()

Description : Exécute une fonction dès lors que le document a été chargé
Usage : $.ready(function);
Exemple:

$.ready(function(){
   alert('READY!');
});

$.extend()

Description : Ajoute des fonctionnalités supplémentaires
Usage : $.extend(obj);
Exemple:

$.extend({
   'bgRed': function(){
      this.each(function(elt){
         $(elt).css('backgroundColor', '#ff0000');
      }
   },
   'fontSizing': function(size){
      this.each(function(elt){
         $(elt).css('fontSize', size);
      }
   }
});

$('span').bgRed();
$('a').fontSizing(32);

$.create()

Description : Créé un élément Html
Usage : $.create('tagName', [properties]);
Exemple:

var newDiv = $.create('div', {
   'id': 'myDiv',
   'class': 'superDiv',
   'content': 'Hello World!',
   'style': {
      'height': '130px',
      'width': '200px'
   },
   'event': {
      'mouseover': function(){ console.log('Hover'); },
      'mouseout': function(){ console.log('Out'); }
   }
});

$('body').append(newDiv);

$.ajax()

Description : Exécute une requête asynchrone
Usage : $.ajax('url', 'GET|POST', [postData], [callback]);
Exemple :

// Requête GET avec traitement de la réponse
$.ajax('my_page.php', 'GET', null, function(response){
   alert(response);
});

// Requête POST sans traitement de la réponse
$.ajax('my_page.php', 'POST', {
   'firstName': 'Sebastien',
   'lastName': 'Decamme'
   }
);

$.get()

Description : Exécute une requête asynchrone GET
Usage : $.get('url', [callback]);
Exemple :

$.get('my_page.php', function(response){
   alert(response);
});

$.post()

Description : Exécute une requête asynchrone POST
Usage : $.post('url', [postData], [callback]);
Exemple :

$.post('my_page.php', {
   'firstName': 'Sebastien',
   'lastName': 'Decamme'
   }, function(response){ alert(response); }
);

.each()

Description : Appel la fonction passée en paramètre sur l’ensemble des résultats de la requête CSS.
Usage : $('query' | htmlElement).each( function(element, index) {} );
Exemple :

$('li a').each( function(link, index){
   console.log('Link ' + index + ' : ' + link.href);
});

.get()

Description : Retourne le ou les éléments Html
Usage : $('query' | htmlElement).get([index]);
Exemple :

// Retourne un tableau avec l'ensemble des résultats
var listItems = $('li').get();

// Retourne le premier élément Html
var listItem = $('li').get(0);

.find()

Description : Recherche un élément Html
Usage : $('query' | htmlElement).find('query');
Exemple :

$('li').find('a.active').hide();

.hasClass()

Description : Vérifie si l’élément Html possède une classe CSS
Usage : $('query' | htmlElement).hasClass('className');
Exemple :

var hasClass = $('#myItem').hasClass('iRed');
console.log('myItem possède la classe iRed ? Réponse : ' + hasClass);

.addClass()

Description : Ajoute une classe CSS
Usage : $('query' | htmlElement).addClass('className');
Exemple :

$('#myItem').addClass('iRed');

.removeClass()

Description : Supprime une classe CSS
Usage : $('query' | htmlElement).removeClass('className');
Exemple :

$('#myItem').removeClass('iRed');

.css()

Description : Obtient ou défini des propriétés CSS
Usage : $('query' | htmlElement).css(cssProperty, [cssValue]);
Exemple :

// Obtenir la propriété CSS d'un élément Html
var myColor = $('#myItem').css('color');

// Définir la propriété CSS d'un élément Html
$('#myItem').css('color', '#ffcccc');

// Définition multiple de propriétés CSS d'un élement Html
$('#myItem').css({
   'height': '200px',
   'width': '350px',
   'color': '#ffcccc'
});

.show()

Description : Affiche un élément Html
Usage : $('query' | htmlElement).show([displayMode = block]);
Exemple :

// Affichage classique
$('#myItem').show();

// Affichage spécifique
$('#myItem').show('inline-block');

.hide()

Description : Masque un élément Html
Usage : $('query' | htmlElement).hide();
Exemple :

$('#myItem').hide();

.html()

Description : Retourne ou défini le contenu Html
Usage : $('query' | htmlElement).html([html]);
Exemple :

// Définir le contenu Html d'un élément
$('#myItem').html('<span>Hello</span>');

// Récupérer le contenu Html d'un élément
var content = $('#myItem').html();

.addEvent()

Description : Ajoute un évènement
Usage : $('query' | htmlElement).addEvent('event', callback);
Exemple :

$('#myItem').addEvent('mouseover', function(){
   alert('hello !')
});

.removeEvent()

Description : Supprime un évènement
Usage : $('query' | htmlElement).removeEvent('event', callback);
Exemple :

$('#myItem').addEvent('mouseover', myCallBack);

.click()

Description : Ajoute un évènement ‘onClick’
Usage : $('query' | htmlElement).click(callback);
Exemple :

$('#myItem').click(function(){
   alert('hello !')
});

.attr()

Description : Ajoute ou défini un attribut
Usage : $('query' | htmlElement).attr('attribute', ['attributeValue']);
Exemple :

// Récupérer la valeur d'un attribut
var myAttribute = $('#myImage').attr('src');

// Définir la valeur d'un attribut
$('#myImage').attr('src', 'http://google.net/image.png');

.removeAttr()

Description : Supprime un attribut
Usage : $('query' | htmlElement).removeAttr('attribute');
Exemple :

$('#myLink').removeAttr('title');

.data()

Description : Ajoute ou défini un attribut DATA
Usage : $('query' | htmlElement).data('dataName', ['dataValue']);
Exemple :

// Récupérer la valeur d'un attribut 'data-name'
var myName = $('#myItem').data('name');

// Définir la valeur d'un attribut 'data-name'
$('#myItem').data('name', 'Sebastien');

.removeData()

Description : Supprime un attribut DATA
Usage : $('query' | htmlElement).removeData('dataName');
Exemple :

$('#myItem').removeData('name');

.clone()

Description : Retourne le clone d’un élément Html
Usage : $('query' | htmlElement).clone();
Exemple :

var myCopy = $('#myItem').clone();

.append()

Description : Ajout du contenu à la fin d’un élément Html
Usage : $('query' | htmlElement).append('html' | htmlElement);
Exemple :

$('#myItem').append('<span>Hello</span>');

.prepend()

Description : Ajout du contenu au début d’un élément Html
Usage : $('query' | htmlElement).prepend('html' | htmlElement);
Exemple :

$('#myItem').prepend('<span>Hello</span>');

.before()

Description : Ajout du contenu immédiatement avant un élément Html
Usage : $('query' | htmlElement).before('html' | htmlElement);
Exemple :

$('#myItem').before('<span>Hello</span>');

.after()

Description : Ajout du contenu immédiatement après un élément Html
Usage : $('query' | htmlElement).after('html' | htmlElement);
Exemple :

$('#myItem').after('<span>Hello</span>');

.remove()

Description : Supprime élément Html
Usage : $('query' | htmlElement).remove();
Exemple :

$('#myItem').remove();

.parent()

Description : Retourne le parent d’un élément Html
Usage : $('query' | htmlElement).parent();
Exemple :

$('a').parent().prepend('<span>Hello</span>');

.previous()

Description : Retourne l’élément Html précédent
Usage : $('query' | htmlElement).previous();
Exemple :

$('a').previous().prepend('<span>Hello</span>');

.next()

Description : Retourne l’élément Html suivant
Usage : $('query' | htmlElement).next();
Exemple :

$('a').next().prepend('<span>Hello</span>');

.position()

Description : Retourne les positions LEFT et TOP d’un élément Html dans le document
Usage : $('query' | htmlElement).position();
Exemple :

var myPosition = $('#myItem').position();
alert('X : ' + myPosition.left + ', Y : ' + myPosition.top);

A propos de l'auteur

Commentaires

* KeywordLuv ! Entrez VotreNom@VosMotsClés dans le champ "Nom" pour bénéficier d'un mot-clef ciblé.