Framework Javascript, s'inspirant de JQuery, mais dans une version très épurée
Je me suis rendu compte, à force d'utiliser JQuery, que j'incluais un gros ficher (58k dans sa
version compactée) alors que je n'utilisais qu'à peine 20% de ses fonctionnalités. J'ai donc décidé
de créer mon propre framework, qui ne contiendrait que les fonctionnalités dont j'ai besoin.
Date de dernière mise à jour : 22 juillet 2009
Sources :
SK Commons
Sélecteur
Ce framework fonctionne de la même manière que JQuery. Vous pouvez donc sélectionner les éléments
Par id :
$("#ex1")
Par classe :
$(".ex2")
Par balise :
$("ex3")
Il n'y a cependant pas de sélecteur multiple. Les exemples suivants ne marchent pas :
$("#ex1, #ex2")
$("#ex1 > p")
$(".class1, .class2")
Evènements
Gestion des évènements Javascript standards
click()
$("#exemple").click(function(){
alert($(this).id);
})
mouseover()
$("#exemple").mouseover(function(){
$(this).addClass("highlighted");
})
mouseout()
$("#exemple").mouseout(function(){
$(this).removeClass("highlighted");
})
addClass()
Ajoute une classe CSS
$("#exemple").addClass("highlighted");
append()
Ajoute du contenu
$("#exemple").append("<div id='test'>test</div>");
css()
Récupère ou modifie un ou des attributs css
// met à jour un attribut
$("#exemple").css("color", "#123456");
// met à jour plusieurs attributs
$("#exemple").css({
backgroundColor: "#123456",
color: "#654321"
});
// récupère un attribut
$("#exemple").css("color");
each()
Effectue une boucle sur les éléments
$(".ex").each(function() {
alert($(this).id);
});
hover()
Gère les évènements onmouseover et onmouseout
$("#exemple").hover(function() { // mouse over
$(this).addClass("hover");
},
function() { // mouse out
$(this).removeClass("hover");
});
html()
Remplace le contenu
$("#exemple").html("<div id='test'>test</div>");
remove()
Supprime le contenu
$("#exemple").remove();
removeClass()
Enlève une classe CSS
$("#exemple").removeClass("highlighted");
val()
Récupère ou modifie la valeur d'un élément de formulaire
// récupère la valeur
$("#bouton1").val();
// met à jour la valeur
$("#bouton1").val("test");