2 de los puntos más fuertes de jquery son: sus selectores, que nos permiten con unos pocos caracteres seleccionar cualquier elemento de nuestro documento y su sistema para ser extendido a base de plugins.

Lo más común es crear plugins para jquery que hagan complejas funciones a partir de unos elementos seleccionados. Algo no tan común es crear un nuevo selector, hecho a medida de nuestra web, y que nos permita por lo tanto escoger de forma cómoda elementos de nuestra web.

Para crear un nuevo selector lo más fácil es usarlo como filtro personalizado. En jquery se suelen usar los dos puntos «:» para este tipo de filtros. Así, de serie, se nos permien selectores del tipo «form#miForm :selected» para escoger solo aquellos «option» dentro de un «select» que han sido seleccionados. Nosotros lo que podemos crear es cualquier tipo de argumento tras los dos puntos para lanzar el filtro que queramos.

$.extend($.expr[':'], {
  miNuevoSelector: function(el) {
    //Codigo filtrando el array de elementos "el" 
    return el;
  }
});

// tras lo cual ya podemos lanzar
$('.miclase:miNuevoSelector').click(function() {
  alert("Este elemento, responde a click porque responde a :miNuevoSelector");
});

Veamos un ejemplo muy sencillo. Jquery nos trae de serie los selectores «:first» y «:last». Vamos a crear un selector que nos escoja no el primer elemento, sino el segundo. Suponiendo que en nuestra web vamos a hacer un gran uso de el porque siempre destacamos el segundo elemento de los listados y no el primero.

$.extend($.expr[':'], {
  second: function(el) {
    if (el[1])
      return el[1];
    else
      return [];
  }
});

// tras lo cual ya podemos lanzar
$('ul#miListado li:second').click(function() {
  alert("Este el segundo elemento");
});

Si, esto no parece demasiado útil. El tema es que en el filtrado podemos llegar a hacer cualquier cosa. Podríamos incluso interactuar con el css y solo escoger aquellos con background rojo, o como en uno de los ejemplos más comunes por la red sobre este tema, solo aquellos elementos que pasen de cierta altura:

$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});
 
$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});