Johann Burkard ha recopilado 6 trucos que podemos hacer usando jQuery y que podremos llegar a usar alguna vez.
1) Buscar texto en la página
$.fn.egrep = function(pat) {
var out = [];
var textNodes = function(n) {
if (n.nodeType == Node.TEXT_NODE) {
var t = typeof pat == 'string' ?
n.nodeValue.indexOf(pat) != -1 :
pat.test(n.nodeValue);
if (t) {
out.push(n.parentNode);
}
}
else {
$.each(n.childNodes, function(a, b) {
textNodes(b);
});
}
};
this.each(function() {
textNodes(this);
});
return out;
};Como podemos ver, mediante una pequeña extensión, dotamos a jQuery de la capacidad de buscar texto en nuestra aplicación. Simplemente tendremos que usar $.egrep(TEXTO); para que nos devuelva los elementos que la contienen. Veamos un ejemplo:
var anietos = $('body').egrep(/anieto2k/i);
for (var x in anietos) {
anietos[x].css("backgroundColor", "yellow");
}2) Filtrando con case-insensitive
var pattern = /exp/i;
$('#id').filter(function() {
return pattern.test($(this).text());
});Con filter() podemos filtrar la colección de nodos devueltos por una consulta en jQuery y mediante el uso del código anterior, podemos hacer que nos encuentre el texto que pasamos como pattern a dicha función. Veamos un ejemplo.
var pattern = /anieto2k/i;
var anietos = $("#content p").filter(function(){
return pattern.test($(this).text());
}).wrap('<strong></strong>');3) Reducir el tamaño de jQuery.min.js
Nos muestra el propio Johann las pruebas que ha hecho para reducir el tamaño de jQuery con alternativas a /packer/ de Dean Edwars.
4) Logea el tiempo de carga de la página
<html>
<head>
<script type="text/javascript">
var t = new Date();
</script>
… (your page) …
<script type="text/javascript">
new Image().src = '/load.gif?' + (new Date().getTime() - t.getTime());
</script>
</body>
<html>Una interesante prácticas que nos puede aportar información acerca del tiempo de carga de nuestra página para todos los usuarios que la visiten. Se basa en la carga de una imagen mediante Javascript (no necesariamente jQuery) y que nos contabilizará el tiempo transcurrido entre la declaración de t y la carga de la imagen.
5) Recargando un iframe
$('#iframe').each(function() {
this.contentWindow.location.reload(true);
});Accediendo al elemento contentWindow, podemos hacer uso de location y así recargar la página contenida dentro del <iframe />.
6) Ejecutar código al cargar un iframe
$('#iframe').load(function() {
// do something
});Al igual que la página actual, con jQuery podemos añadir una funcionalidad que se activará al acabar de cargar el contenido de un <iframe />. Algo muy útil para no acceder al contenido del mismo sin que este esté completamente cargado.
6 comentarios, 0 referencias
+
#