507 votos

jQuery Trucos y Consejos

Sintaxis

Almacenamiento De Datos

Optimización

Miscelánea

252voto

Andreas Grech Puntos 39188

Creación de un Elemento HTML y mantener una referencia

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */


Comprobar si un elemento existe

if ($("#someDiv").length)
{
    // It exists...
}


La escritura de su propia selectores

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

111voto

clawr Puntos 4043

jQuery data() método es útil y no es bien conocido. Permite enlazar los datos a DOM de los elementos sin modificar el DOM.

95voto

Nathan Long Puntos 30303

Anidamiento De Filtros

Puede anidar filtros (como nickf mostrado aquí).

.filter(":not(:has(.selected))")

80voto

Oli Puntos 65050

Yo realmente no soy un fan de la $(document).ready(fn) de acceso directo. Asegurarse de que los recortes de abajo en el código, sino también los recortes de abajo en la legibilidad del código. Cuando veas $(document).ready(...), usted sabe lo que usted está buscando. $(...) es utilizado en demasiadas otras formas de inmediato sentido.

Si usted tiene múltiples marcos puede utilizar jQuery.noConflict(); como usted dice, pero también puede asignar una variable distinta para de esta manera:

var $j = jQuery.noConflict();

$j("#myDiv").hide();

Muy útil si tienes varios marcos que se pueden reducir a $x(...)-estilo de llamadas.

77voto

Filip Dupanović Puntos 10071

Ooooh, no nos olvidemos de jQuery metadatos! La función data() es grande, pero tiene que ser pobladas a través de jQuery llamadas.

En lugar de romper W3C cumplimiento con la costumbre de los atributos de los elementos, tales como:

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/> 

El uso de metadatos en su lugar:

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: