Pregunta jQuery consejos y trucos


Sintaxis

Almacenamiento de datos

Mejoramiento

Diverso


508
2017-12-20 03:08


origen


Respuestas:


Crear 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 */


Verificando si existe un elemento

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


Escribir sus propios selectores

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

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

252
2017-10-08 13:11



jQuery's data() método es útil y poco conocido. Le permite vincular datos a elementos DOM sin modificar el DOM.


111
2017-10-10 12:58



Filtros de anidación

Puede anidar filtros (como nickf mostró aquí)

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

95
2017-10-10 12:39



Realmente no soy un fan de la $(document).ready(fn) atajo. Claro que reduce el código, pero también reduce la legibilidad del código. Cuando veas $(document).ready(...), sabes lo que estás viendo $(...) se usa de muchas otras maneras para tener sentido de inmediato.

Si tiene múltiples marcos, puede usar jQuery.noConflict(); como dices, pero también puedes asignarle una variable diferente como esta:

var $j = jQuery.noConflict();

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

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


80
2017-10-08 13:21



Ooooh, no lo olvidemos metadatos jQuery! La función de datos () es excelente, pero debe completarse a través de llamadas jQuery.

En lugar de romper el cumplimiento de W3C con atributos de elementos personalizados como:

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

Use 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>

77



Controladores de eventos en vivo

Establecer un controlador de eventos para alguna elemento que coincide con un selector, incluso si se agrega al DOM después de la carga de la página inicial:

$('button.someClass').live('click', someFunction);

Esto le permite cargar contenido a través de ajax, o agregarlos a través de javascript y hacer que los controladores de eventos se configuren correctamente para esos elementos automáticamente.

Del mismo modo, para detener el manejo de eventos en vivo:

$('button.someClass').die('click', someFunction);

Estos controladores de eventos en vivo tienen algunas limitaciones en comparación con los eventos normales, pero funcionan bien para la mayoría de los casos.

Para más información, vea el Documentación jQuery.

ACTUALIZAR: live() y die() están en desuso en jQuery 1.7. Ver http://api.jquery.com/on/ y http://api.jquery.com/off/ para una funcionalidad de reemplazo similar.

ACTUALIZACIÓN2: live() ha estado en desuso durante mucho tiempo, incluso antes de jQuery 1.7. Para las versiones jQuery 1.4.2+ antes del uso 1.7 delegate() y undelegate(). los live() ejemplo ($('button.someClass').live('click', someFunction);) puede ser reescrito usando delegate() como eso: $(document).delegate('button.someClass', 'click', someFunction);.


74



Reemplace funciones anónimas con funciones nombradas. Esto realmente reemplaza el contexto de jQuery, pero entra en juego más al parecer cuando se usa jQuery, debido a su dependencia de las funciones de devolución de llamada. Los problemas que tengo con las funciones anónimas en línea son que son más difíciles de depurar (es mucho más fácil buscar en una pila de llamadas con funciones claramente nombradas, en vez de 6 niveles de "anónimos"), y también el hecho de que múltiples funciones anónimas dentro del mismo jQuery-chain puede volverse difícil de leer o mantener. Además, las funciones anónimas generalmente no se vuelven a usar; por otro lado, declarar funciones con nombre me anima a escribir código que es más probable que se reutilice.

Una ilustración; en lugar de:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

Yo prefiero:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

46



Definición de propiedades en la creación del elemento

En jQuery 1.4 puede usar un literal de objeto para definir propiedades cuando crea un elemento:

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

... Incluso puedes agregar estilos:

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

Aquí está un enlace a la documentación.


45



en lugar de usar un alias diferente para el objeto jQuery (cuando se usa noConflict), siempre escribo mi código jQuery envolviéndolo todo en un cierre. Esto se puede hacer en la función document.ready:

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

alternativamente puedes hacerlo así:

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

Encuentro que es el más portátil. He estado trabajando en un sitio que usa tanto Prototype como jQuery simultáneamente y estas técnicas han evitado todos los conflictos.


43



Verifica el índice

jQuery tiene .index pero es difícil de usar, ya que necesita la lista de elementos, y pasar el elemento que desea el índice de:

var index = e.g $('#ul>li').index( liDomObject );

El siguiente es mucho más fácil:

Si desea conocer el índice de un elemento dentro de un conjunto (por ejemplo, elementos de la lista) dentro de una lista desordenada:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

39



Taquigrafía para el evento listo

La forma explícita y verbosa:

$(document).ready(function ()
{
    // ...
});

La taquigrafía:

$(function ()
{
    // ...
});

23