Q.lib.js : Création d'une bibliothèque jQuery like, plus efficiente - Part.03 - Attributs, Properties et CSS.

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.