jQuery native selectors es uno de los conceptos más elementales de jQuery .En muchas ocasiones nos olvidamos de como funciona jQuery y es buen momento de recordarlo. jQuery es una librería que nos permite trabajar con el árbol DOM a través de un potente conjunto de selectores.
Lamentablemente no todos los selectores son selectores nativos de CSS eso quiere decir que jQuery no podrá apoyarse en los métodos nativos de JavaScript para realizar la búsqueda y lo tendrá que hacer de una forma mucho más manual. En este caso los siguientes selectores no son nativos:
:input concretamente selecciona inputs , select y textarea ¿En qué nos afecta a la hora de trabajar? . En un principio puede parecer que no es algo demasiado importante pero veamos un ejemplo:
<body> <p>parrafo</p> <p>parrafo</p> <p>parrafo</p> <p>parrafo</p> <div><input type="text" name="nombre" value="cecilio"/></div> <p>parrafo</p> </body>
Podemos cambiar el color de la caja de texto utilizando el siguiente código de Javascript:
$(document).ready(function() {
$(":input").css("background-color","blue");
});
Ahora bien podemos hacer lo mismo con este otro :
$(document).ready(function() {
$("div").find("input").css("background-color","blue");
});
Es evidente que el primer selector es mucho más compacto y tenemos la tendencia a pensar que también es mucho más rápido ya que ni siquiera tenemos que ejecutar un método find(). Lamentablemente estaremos equivocados:
:input no es un selector nativo y esto penaliza mucho , da lo mismo que la expresión sea muy compacta. Por el otro lado tanto “div” como “input” son selectores nativos soportados por CSS. Utilicemos más los jQuery Native Selectors que son los selectores soportados por los navegadores a través de CSS y conseguiremos mejores resultados.
Otros artículos relacionados : jQuery clone , jQuery Ajax
