Le sélecteur $_.na
Q.lib.js possède un sélecteur de nodes possédant la propriété name.
- DOM document.getElementsByName("nameValue");
- jQuery $("[name='test1']");
- Q.lib.js $_.na("test1");
Q.lib.js est entre 200 et 300 fois plus rapide que jQuery sur ce selecteur
Code
$_.na = function(n) {
return document.getElementsByName(n);
};
Méthode .attr()
- .attr(attributeName) Lit la valeur du premier élément dans l'ensemble des éléments sélectionnés.
- jQuery var title = $( "em" ).attr( "title" );
- Q.lib.js var title = $_.tn( "em" ).attr( "title" );
- .attr(attributeName, value) Définit la valeur d'un attribut de l'ensemble des éléments sélectionnés.
- jQuery $( "#photo1" ).attr("title", "My first picture" );
- Q.lib.js $_.id( "photo1" ).attr( "title", "My first picture" );
- .attr(attributes) définit la valeur de plusieurs attributs de l'ensemble des éléments sélectionnés (passage d'un objet clé/valeur).
- jQuery $( "img" ).attr({title:"A picture of me", alt:"Album N°3"});
- Q.lib.js $_.tn( "img" ).attr({title:"A picture of me", alt:"Album N°3"});
Code
// ====================================================
// .attr()
// ----------------------------------------------------
// Get the value of an attribute for the first element
// in the set of matched elements or set one or more
// attributes for every matched element.
// ----------------------------------------------------
Node.prototype.attr = function(a, v) {
if (arguments.length == 2) {
this.setAttribute(a,v);
return this;
}
if (typeof a === 'string') {
return this.getAttribute(a);
}
if (typeof a === 'object') {
for (var k in a) {
this.setAttribute(k,a[k]);
}
return this;
}
};
NodeList.prototype.attr = function() {
var args = [].slice.apply(arguments);
for (var i=0, L=this.length; i < L; i++) {
this[i].attr.apply(this[i], args);
}
return this;
};
HTMLCollection.prototype.attr = NodeList.prototype.attr;
Méthode .prop()
- .prop(propertyName) Lit la valeur de la propriété du premier élément dans l'ensemble des éléments sélectionnés.
- jQuery var title = $( "#cb1" ).prop( "checked" );
- Q.lib.js var title = $_.id( "cb1" ).prop( "checked" );
- .prop(propertyName, value) Définit la valeur d'une propriété de l'ensemble des éléments sélectionnés.
- jQuery $( "[name='cb']" ).prop( "checked", true );
- Q.lib.js $_.na( "cb" ).prop( "checked", true );
- .prop(properties) définit la valeur de plusieurs propriétés de l'ensemble des éléments sélectionnés (passage d'un objet clé/valeur).
- jQuery $( "[name='cb']" ).prop({checked:true, disabled:true});
- Q.lib.js $_.na( "cb" ).prop({checked:true, disabled:true});
Code
// ====================================================
// .prop()
// ----------------------------------------------------
// Get the value of a property for the first element in
// the set of matched elements or set one or more
// properties for every matched element.
// ----------------------------------------------------
Node.prototype.prop = function(p, v) {
if (arguments.length == 2) {
this[p] = v;
return this;
}
if (typeof p === 'string') {
return this[p];
}
if (typeof p === 'object') {
for (var k in p) {
this[k] = p[k];
}
return this;
}
};
NodeList.prototype.prop = function() {
var args = [].slice.apply(arguments);
for (var i=0, L=this.length; i < L; i++) {
this[i].prop.apply(this[i], args);
}
return this;
};
HTMLCollection.prototype.prop = NodeList.prototype.prop;
Méthode .css()
- .css(propertyName) Lit la valeur réelle de la propriété CSS (getComputedStyle) du premier élément dans l'ensemble des éléments sélectionnés.
- jQuery var color = $( "#mydiv" ).css( "background-color" );
- Q.lib.js var color = $_.id( "mydiv" ).css( "background-color" );
- .css(propertyName, value) Définit la valeur de la propriété CSS de l'ensemble des éléments sélectionnés.
- jQuery $( "p" ).css( "color", "red" );
- Q.lib.js $_.tn( "p" ).css( "color", "red");
- .css(properties) définit la valeur de plusieurs propriétés CSS de l'ensemble des éléments sélectionnés (passage d'un objet clé/valeur).
- jQuery $( "div" ).css({"color":red, "background-color":"yellow"});
- Q.lib.js $_.tn( "div" ).css({"color":red, "background-color":"yellow"});
Code
// ====================================================
// .css()
// ----------------------------------------------------
// Get the value of a style property for the first
// element in the set of matched elements or set one or
// more CSS properties for every matched element.
// ----------------------------------------------------
Node.prototype.css = function(c, v) {
if (arguments.length == 2) {
this.style[$_.cC(c)] = v;
return this;
}
if (typeof c === 'string') {
return window.getComputedStyle(this).getPropertyValue(c);
}
if (typeof c === 'object') {
for (var k in c) {
this.style[$_.cC(k)] = c[k];
}
return this;
}
};
NodeList.prototype.css = function() {
var args = [].slice.apply(arguments);
for (var i=0, L=this.length; i < L; i++) {
this[i].css.apply(this[i], args);
}
return this;
};
HTMLCollection.prototype.css = NodeList.prototype.css;
Résumé
Q.lib.js sait travailler avec toutes les propriétés associées à un élément : attributs, classes CSS, propriétés booléenne (checked, disabled, ...) et enfin les propriétés CSS classiques.
Nous avons introduit un nouveau sélecteur ($_.na) très rapide permettant de sélectionner en général des éléments de formulaires par leur nom.
Nous verrons dans le prochain article comment la librairie prend en charge les évènements.
