Consejos y trucos de jQuery

Sintaxis

• Taquigrafía para el evento listo por roosteronacid
• Saltos de línea y posibilidad de cambio por roosteronacid
• Filtros de anidamiento de Nathan Long
• Cachear una colección y ejecutar comandos en la misma línea por roosteronacid
• Contiene selector por roosteronacid
• Definición de propiedades en la creación de elementos por roosteronacid
• Acceda a las funciones de jQuery como lo haría con una matriz de roosteronacid
• La función noConflict - Liberando la variable $ por Oli
• Aísle la variable $ en modo noConflict por nickf
• Modo sin conflicto por roosteronacid

Almacenamiento de datos

• La función de datos: vincula datos a elementos mediante TenebrousX
• Soporte de atributos de datos HTML5, ¡con esteroides! por roosteronacid
• El complemento de metadatos jQuery de Filip Dupanović

Mejoramiento

• Optimizar el rendimiento de selectores complejos con roosteronacid
• El parámetro de contexto por lupefiasco
• Guardar y reutilizar búsquedas de Nathan Long
• Crear un elemento HTML y mantener una referencia, verificar si existe un elemento, escribir sus propios selectores por Andreas Grech

Diverso

• Verifique el índice de un elemento en una colección por redsquare
• Manejadores de eventos en vivo por TM
• Reemplazar funciones anónimas con funciones nombradas por ken
• Microsoft AJAX framework y jQuery bridge de Slace
• Tutoriales de jQuery por egyamado
• Eliminar elementos de una colección y preservar la posibilidad de encadenamiento con roosteronacid
• Declare $ this al comienzo de las funciones anónimas de Ben
• FireBug lite, complemento de Hotbox, indica cuándo una imagen ha sido cargada y Google CDN por Color Blend
• Uso juicioso de scripts de jQuery de terceros por harriyott
• Cada función de Jan Zich
• Complemento de extensiones de formulario de Chris S
• Asíncrono de cada función por OneNerd
• El complemento de plantilla jQuery: implementación de lógica compleja utilizando funciones de renderizado por roosteronacid

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

Comprobando si existe un elemento

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

Escribiendo tus 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");
});

El data()método de jQuery es útil y poco conocido. Le permite enlazar datos a elementos DOM sin modificar el DOM.

Filtros de anidamiento

Puede anidar filtros (como se muestra aquí ).

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

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

Si tiene varios marcos, puede usarlos jQuery.noConflict();como dice, pero también puede asignarle una variable diferente de esta manera:

var $j = jQuery.noConflict();

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

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

¡Ooooh, no olvidemos los metadatos de jQuery ! La función data () es excelente, pero debe completarse mediante llamadas jQuery.

En lugar de romper el cumplimiento del 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>

Manejadores de eventos en vivo

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

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

Esto le permite cargar contenido a través de ajax o agregarlo 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 regulares, pero funcionan muy bien en la mayoría de los casos.

Para obtener más información, consulte la documentación de jQuery .

ACTUALIZACIÓN: live()y die()están en desuso en jQuery 1.7. Consulte http://api.jquery.com/on/ y http://api.jquery.com/off/ para obtener una funcionalidad de reemplazo similar.

ACTUALIZACIÓN2: live()ha quedado en desuso por mucho tiempo, incluso antes de jQuery 1.7. Para las versiones jQuery 1.4.2+ anteriores a 1.7 use delegate()y undelegate(). El live()ejemplo ( $('button.someClass').live('click', someFunction);) se puede reescribir usando delegate()como que: $(document).delegate('button.someClass', 'click', someFunction);.

Reemplazar funciones anónimas con funciones con nombre. Esto realmente reemplaza el contexto de jQuery, pero entra en juego más de lo que parece 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 (mucho más fácil ver una pila de llamadas con funciones con nombres distintos, en lugar de 6 niveles de "anónimo"), y también el hecho de que múltiples funciones anónimas dentro de la misma jQuery-chain puede volverse difícil de leer y / o mantener. Además, las funciones anónimas generalmente no se reutilizan; 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 vez 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 );

Definir 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í hay un enlace a la documentación .

en lugar de usar un alias diferente para el objeto jQuery (cuando uso 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, puede hacerlo así:

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

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

Consulta el índice

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

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

Lo 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;
});

Taquigrafía para el evento listo

La forma explícita y detallada:

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

La taquigrafía:

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

En la función central jQuery, especifique el parámetro de contexto además del parámetro selector. Especificar el parámetro de contexto permite que jQuery comience desde una rama más profunda en el DOM, en lugar de desde la raíz del DOM. Dado un DOM suficientemente grande, especificar el parámetro de contexto debería traducirse en ganancias de rendimiento.

Ejemplo: Encuentra todas las entradas de tipo radio dentro de la primera forma del documento.

$("input:radio", document.forms[0]);

Referencia: http://docs.jquery.com/Core/jQuery#expressioncontext

Realmente no solo jQuery, pero hice un pequeño puente agradable para jQuery y MS AJAX:

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

Es realmente agradable si está haciendo una gran cantidad de ASP.NET AJAX, ya que jQuery es compatible con MS ahora que tiene un buen puente significa que es realmente fácil hacer operaciones de jQuery:

$get('#myControl').j().hide();

Entonces, el ejemplo anterior no es excelente, pero si está escribiendo controles de servidor ASP.NET AJAX, hace que sea fácil tener jQuery dentro de su implementación de control del lado del cliente.

Optimizar el rendimiento de selectores complejos

Consultar un subconjunto del DOM cuando se utilizan selectores complejos mejora drásticamente el rendimiento:

var subset = $("");

$("input[value^='']", subset);

Hablando de consejos y trucos y también algunos tutoriales. Encontré que esta serie de tutoriales (serie de videos “jQuery for Absolute Beginners”) de Jeffery Way es MUY ÚTIL.

Está dirigido a aquellos desarrolladores que son nuevos en jQuery. Él muestra cómo crear muchas cosas interesantes con jQuery, como animación, Crear y eliminar elementos y más ...

Aprendí mucho de eso. Muestra cómo es fácil usar jQuery. Ahora me encanta y puedo leer y comprender cualquier script jQuery incluso si es complejo.

Aquí hay un ejemplo que me gusta " Cambiar el tamaño del texto "

1- jQuery ...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- Estilo CSS ...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- HTML ...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    </p>
</div>

Recomiendo estos tutoriales ...

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

Asíncrono de cada función ()

Si tiene documentos realmente complejos donde ejecutar la función jquery each () bloquea el navegador durante la iteración, y / o Internet Explorer aparece el mensaje ' ¿desea continuar ejecutando este script '? Esta solución le ahorrará el día.

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

La primera forma en que puede usarlo es como cada ():

$('your_selector').forEach( function() {} );

Un segundo parámetro opcional le permite especificar la velocidad / retraso entre iteraciones que puede ser útil para las animaciones ( el siguiente ejemplo esperará 1 segundo entre iteraciones ):

$('your_selector').forEach( function() {}, 1000 );

Recuerde que dado que esto funciona de forma asíncrona, no puede confiar en que las iteraciones se completen antes de la siguiente línea de código, por ejemplo:

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

Escribí esto para un proyecto interno, y aunque estoy seguro de que se puede mejorar, funcionó para lo que necesitábamos, así que espero que algunos de ustedes lo encuentren útil. Gracias -

Sintaxis shorthand-sugar-thing: almacena en caché una colección de objetos y ejecuta comandos en una línea:

En vez de:

var jQueryCollection = $("");

jQueryCollection.command().command();

Hago:

var jQueryCollection = $("").command().command();

Un caso de uso algo "real" podría ser algo así:

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

Me gusta declarar una $thisvariable al comienzo de las funciones anónimas, así que sé que puedo hacer referencia a un jQueried esto.

Al igual que:

$('a').each(function() {
    var $this = $(this);

    // Other code
});

Guardar objetos jQuery en variables para su reutilización

Guardar un objeto jQuery en una variable le permite reutilizarlo sin tener que buscar en el DOM para encontrarlo.

(Como sugirió @Louis, ahora uso $ para indicar que una variable contiene un objeto jQuery).

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

Como ejemplo más complejo, supongamos que tiene una lista de alimentos en una tienda y desea mostrar solo los que coinciden con los criterios de un usuario. Tiene un formulario con casillas de verificación, cada una con un criterio. Las casillas de verificación tienen nombres como organicy lowfat, y los productos tienen clases correspondientes .organic, etc.

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

Ahora puede seguir trabajando con ese objeto jQuery. Cada vez que se hace clic en una casilla de verificación (para marcar o desmarcar), comience desde la lista maestra de alimentos y filtre en función de las casillas marcadas:

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

Parece que la mayoría de los consejos interesantes e importantes ya se han mencionado, por lo que este es solo una pequeña adición.

El pequeño consejo es la función jQuery.each (objeto, devolución de llamada) . Probablemente todos estén usando jQuery.each (devolución de llamada) para iterar sobre el objeto jQuery en sí porque es natural. La función de utilidad jQuery.each (objeto, devolución de llamada) itera sobre objetos y matrices. Durante mucho tiempo, de alguna manera no vi para qué podría ser, aparte de una sintaxis diferente (no me importa escribir todos los bucles de moda), y me da un poco de vergüenza que me di cuenta de su fuerza principal recientemente.

La cuestión es que, dado que el cuerpo del bucle en jQuery.each (objeto, devolución de llamada) es una función , siempre obtiene un nuevo alcance en el bucle que es especialmente conveniente cuando crea cierres en el bucle.

En otras palabras, un error común típico es hacer algo como:

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

Ahora, cuando invoque las funciones en la functionsmatriz, recibirá una alerta tres veces con el contenido undefinedque probablemente no sea lo que deseaba. El problema es que solo hay una variable i, y los tres cierres se refieren a ella. Cuando finaliza el ciclo, el valor final de ies 3 y someArrary[3]es undefined. Podría solucionarlo llamando a otra función que crearía el cierre para usted. O usa la utilidad jQuery, que básicamente lo hará por usted:

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

Ahora, cuando invocas las funciones, obtienes tres alertas con el contenido 1, 2 y 3 como se esperaba.

En general, no es nada que no puedas hacer tú mismo, pero es bueno tenerlo.

Acceda a las funciones de jQuery como lo haría con una matriz

Agregar / eliminar una clase basada en un booleano ...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

Es la versión más corta de ...

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

No hay muchos casos de uso para esto. Sin embargo; Creo que es genial :)

Actualizar

En caso de que no sea del tipo de lectura de comentarios, ThiefMaster señala que toggleClass acepta un valor booleano , que determina si una clase debe agregarse o eliminarse. Entonces, en lo que respecta a mi código de ejemplo anterior, este sería el mejor enfoque ...

$('selector').toggleClass('name_of_the_class', true/false);

Actualizar:

Simplemente incluya este script en el sitio y obtendrá una consola Firebug que aparece para depurar en cualquier navegador. No es tan completo, pero sigue siendo bastante útil. Recuerde eliminarlo cuando haya terminado.

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Mira este enlace:

De trucos CSS

Actualización: encontré algo nuevo; es el JQuery Hotbox.

JQuery Hotbox

Google aloja varias bibliotecas de JavaScript en Google Code. Cargarlo desde allí ahorra ancho de banda y se carga rápidamente porque ya se ha almacenado en caché.

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  

    // Load jQuery  
    google.load("jquery", "1.2.6");  

    google.setOnLoadCallback(function() {  
        // Your code goes here.  
    });  

</script>

O

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

También puede usar esto para saber cuándo una imagen está completamente cargada.

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});

El "console.info" de firebug, que puede usar para volcar mensajes y variables en la pantalla sin tener que usar cuadros de alerta. "console.time" te permite configurar fácilmente un temporizador para envolver un montón de código y ver cuánto tiempo lleva.

console.time('create list');

for (i = 0; i < 1000; i++) {
    var myList = $('.myList');
    myList.append('This is list item ' + i);
}

console.timeEnd('create list');

Use métodos de filtrado sobre pseudo-selectores cuando sea posible para que jQuery pueda usar querySelectorAll (que es mucho más rápido que sizzle). Considere este selector:

$('.class:first')

La misma selección se puede hacer usando:

$('.class').eq(0)

Lo cual es más rápido porque la selección inicial de '.class' es compatible con QSA

Eliminar elementos de una colección y preservar la posibilidad de encadenamiento

Considera lo siguiente:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

La filter()función elimina elementos del objeto jQuery. En este caso: se eliminarán todos los elementos li que no contengan el texto "Uno" o "Dos".

Cambiar el tipo de un elemento de entrada

Me encontré con este problema cuando intentaba cambiar el tipo de un elemento de entrada ya conectado al DOM. Debe clonar el elemento existente, insertarlo antes del elemento anterior y luego eliminar el elemento anterior. De lo contrario no funciona:

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");

Uso juicioso de scripts de jQuery de terceros, como la validación de campos de formulario o el análisis de URL. Vale la pena ver de qué se trata para saber cuándo será el próximo requisito de JavaScript.

Saltos de línea y encadenabilidad

Al encadenar varias llamadas en colecciones ...

$("a").hide().addClass().fadeIn().hide();

Puede aumentar la legibilidad con saltos de línea. Me gusta esto:

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

Use .stop (verdadero, verdadero) cuando se activa una animación evita que se repita la animación. Esto es especialmente útil para las animaciones de rollover.

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

Usar funciones anónimas de ejecución automática en una llamada a un método, como .append()iterar a través de algo. ES DECIR:

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

Utilizo esto para recorrer cosas que serían grandes e incómodas para romper mi encadenamiento para construir.

Soporte de atributos de datos HTML5, ¡con esteroides!

La función de datos ha sido mencionada anteriormente. Con él, puede asociar datos con elementos DOM.

Recientemente, el equipo de jQuery ha agregado compatibilidad con los atributos de datos * personalizados de HTML5 . Y como si eso no fuera suficiente; Han alimentado a la fuerza la función de datos con esteroides, lo que significa que puede almacenar objetos complejos en forma de JSON, directamente en su marcado.

El HTML:

<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />

El JavaScript:

var data = $("p").data("xyz");

data.str // "hi there"
typeof data.str // "string"

data.int + 2 // 4
typeof data.int // "number"

data.obj.arr.join(" + ") + " = 6" // "1 + 2 + 3 = 6"
typeof data.obj.arr // "object" ... Gobbles! Errrghh!