El uso de selectores en jQuery ( jQuery selectors) es lo más común ya que el framework se basa en ellos para realizar la selección de un grupo de nodos del arbol DOM. Un ejemplo sencillo de uso de selector con jQuery puede ser el siguiente:
$("p").css("color","blue");
Que se encarga de seleccionar todos los párrafos de un documento.
jQuery selectors y extensibilidad
En más de una ocasión necesitaremos generar nuestros propios selectores y extender jQuery sobre todo si tenemos que abordar proyectos complejos que se basen en él. Vamos a construir un selector personalizado que seleccione todos los parrafos que contienen un número primo.
<script type="text/javascript">
$.expr[':'].primo = function(elem) {
var numero= parseInt(elem.innerText);
var primo=false;
console.log(numero);
for (var i=2;i<numero;i++) {
if ((numero % i)==0) {
return false;
}
}
return true;
};
</script>
Este nuevo selector nos selecciona X nodos del documento que contengan números primos.Vamos a ver como podemos utilizarle.
//omitimos la declaración del selector
$(document).ready(function() {
$("#usarSelector").click(function() {
//usamos el nuevo selector
$("p:primo").css("color","red");
});
});
Una vez hemos diseñado el nuevo selector podemos utilizarlo en una página para seleccionar aquellos nodos que tengan números primos en su contenido.
Vamos a ver el código HTML por completo:
<html>
<head>
<script src="jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
$.expr[':'].primo = function(elem) {
var numero= parseInt(elem.innerText);
var primo=false;
console.log(numero);
for (var i=2;i<numero;i++) {
if ((numero % i)==0) {
return false;
}
}
return true;
};
$(document).ready(function() {
$("#usarSelector").click(function() {
$("p:primo").css("color","red");
});
});
</script>
</head>
<body>
<input type="button" id="usarSelector" value="usarSelector"/>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>8</p>
<p>9</p>
<p>10</p>
</body>
</html>
El resultado será el siguiente:
Otros artículos relacionados : JQuery Sizzle, jQuery Context
