Dicas e truques do jQuery

Sintaxe

• Abreviação de ready-event por roosteronacid
• Quebras de linha e encadeamento por roosteronacid
• Filtros de aninhamento por Nathan Long
• Armazenar em cache uma coleção e executar comandos na mesma linha por roosteronacid
• Contém seletor por roosteronacid
• Definindo propriedades na criação de elementos por roosteronacid
• Acesse funções jQuery como faria com uma matriz por roosteronacid
• A função noConflict - Libertando a variável $ por Oli
• Isolar a variável $ no modo noConflict pelo nickf
• Modo sem conflito por roosteronacid

Armazenamento de dados

• A função de dados - vincular dados a elementos pelo TenebrousX
• Suporte a atributos de dados HTML5, em esteróides! por roosteronacid
• O plug-in de metadados do jQuery por Filip Dupanović

Otimização

• Otimize o desempenho de seletores complexos com roosteronacid
• O parâmetro context por lupefiasco
• Salvar e reutilizar pesquisas de Nathan Long
• Criando um elemento HTML e mantendo uma referência, Verificando se existe um elemento, Escrevendo seus próprios seletores por Andreas Grech

Diversos

• Verifique o índice de um elemento em uma coleção por redsquare
• Manipuladores de eventos ao vivo da TM
• Substituir funções anônimas por funções nomeadas por ken
• Estrutura Microsoft AJAX e ponte jQuery da Slace
• tutoriais em jQuery por egyamado
• Remover elementos de uma coleção e preservar a capacidade de cadeia por roosteronacid
• Declare $ this no início de funções anônimas de Ben
• FireBug Lite, plug-in Hotbox, informa quando uma imagem foi carregada e o CDN do Google por Color Blend
• Uso judicioso de scripts jQuery de terceiros por harriyott
• A cada função de Jan Zich
• Plug-in de extensões de formulário de Chris S
• Cada função assíncrona do OneNerd
• O plug-in de modelo jQuery: implementando lógica complexa usando funções de renderização por roosteronacid

Criando um elemento HTML e mantendo uma referência

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 se existe um elemento

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

Escrevendo seus próprios seletores

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

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

O data()método do jQuery é útil e pouco conhecido. Permite vincular dados a elementos DOM sem modificar o DOM.

Filtros de aninhamento

Você pode aninhar filtros (como o nickf mostrou aqui ).

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

Eu realmente não sou fã do $(document).ready(fn)atalho. Claro que reduz o código, mas também reduz a legibilidade do código. Quando você vê $(document).ready(...), você sabe o que está olhando. $(...)é usado de muitas outras maneiras para fazer sentido imediatamente.

Se você possui várias estruturas, pode usar jQuery.noConflict();o que diz, mas também pode atribuir uma variável diferente para ela assim:

var $j = jQuery.noConflict();

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

Muito útil se você tiver várias estruturas que podem ser $x(...)resumidas em chamadas de estilo.

Ooooh, não vamos esquecer os metadados do jQuery ! A função data () é ótima, mas precisa ser preenchida por meio de chamadas jQuery.

Em vez de quebrar a conformidade do W3C com atributos de elementos personalizados, como:

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

Use os metadados:

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

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

Manipuladores de eventos ao vivo

Defina um manipulador de eventos para qualquer elemento que corresponda a um seletor, mesmo que ele seja adicionado ao DOM após o carregamento inicial da página:

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

Isso permite que você carregue conteúdo via ajax ou adicione-o via javascript e faça com que os manipuladores de eventos sejam configurados corretamente para esses elementos automaticamente.

Da mesma forma, para interromper a manipulação de eventos ao vivo:

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

Esses manipuladores de eventos ao vivo têm algumas limitações em comparação com os eventos regulares, mas funcionam muito bem na maioria dos casos.

Para mais informações, consulte a documentação do jQuery .

UPDATE: live()e die()foram descontinuados no jQuery 1.7. Consulte http://api.jquery.com/on/ e http://api.jquery.com/off/ para obter funcionalidade de substituição semelhante.

UPDATE2: live()foi obsoleto por muito tempo, mesmo antes do jQuery 1.7. Para versões jQuery 1.4.2+ anteriores a 1.7, use delegate()e undelegate(). O live()exemplo ( $('button.someClass').live('click', someFunction);) pode ser reescrita utilizando delegate()como que: $(document).delegate('button.someClass', 'click', someFunction);.

Substitua funções anônimas por funções nomeadas. Isso realmente substitui o contexto do jQuery, mas parece mais com o uso do jQuery, devido à sua dependência das funções de retorno de chamada. Os problemas que tenho com funções anônimas inline são que eles são mais difíceis de depurar (muito mais fácil olhar para uma pilha de chamadas com funções com nomes distintos, em vez de 6 níveis de "anônimo"), e também o fato de várias funções anônimas dentro da mesma A cadeia jQuery pode se tornar difícil de ler e / ou manter. Além disso, funções anônimas normalmente não são reutilizadas; por outro lado, declarar funções nomeadas me incentiva a escrever código com maior probabilidade de ser reutilizado.

Uma ilustração; ao invés de:

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

Eu prefiro:

function onState(){
    // do something
}

function offState(){
    // do something else
}

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

Definindo propriedades na criação do elemento

No jQuery 1.4, você pode usar um literal de objeto para definir propriedades ao criar um elemento:

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

... Você pode até adicionar estilos:

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

Aqui está um link para a documentação .

em vez de usar um alias diferente para o objeto jQuery (ao usar noConflict), eu sempre escrevo meu código jQuery envolvendo tudo em um fechamento. Isso pode ser feito na função document.ready:

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

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

Como alternativa, você pode fazer assim:

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

Acho que é o mais portátil. Eu tenho trabalhado em um site que usa o Prototype AND jQuery simultaneamente e essas técnicas evitaram todos os conflitos.

Verifique o índice

O jQuery possui .index, mas é muito difícil de usar, pois você precisa da lista de elementos e transmite o elemento do qual deseja o índice:

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

O seguinte é muito mais fácil:

Se você deseja conhecer o índice de um elemento em um conjunto (por exemplo, itens de lista) em uma lista não ordenada:

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

Atalho para o evento pronto

A maneira explícita e detalhada:

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

A abreviação:

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

Na função principal do jQuery, especifique o parâmetro context além do parâmetro seletor. A especificação do parâmetro context permite que o jQuery inicie a partir de uma ramificação mais profunda no DOM, em vez da raiz do DOM. Dado um DOM grande o suficiente, a especificação do parâmetro context deve ser traduzida em ganhos de desempenho.

Exemplo: localiza todas as entradas do tipo radio dentro do primeiro formulário no documento.

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

Referência: http://docs.jquery.com/Core/jQuery#expressioncontext

Não é realmente apenas o jQuery, mas fiz uma pequena ponte para o jQuery e o MS AJAX:

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

É muito bom se você estiver executando bastante ASP.NET AJAX, já que o jQuery é suportado pelo MS agora com uma boa ponte significa que é muito fácil executar operações do jQuery:

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

Portanto, o exemplo acima não é ótimo, mas se você estiver escrevendo controles do servidor ASP.NET AJAX, será fácil ter o jQuery dentro da implementação do controle do lado do cliente.

Otimize o desempenho de seletores complexos

Consultar um subconjunto do DOM ao usar seletores complexos melhora drasticamente o desempenho:

var subset = $("");

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

Falando de dicas e truques e também de alguns tutoriais. Eu achei essas séries de tutoriais (a série de vídeos “jQuery para iniciantes absolutos”) da Jeffery Way são MUITO ÚTEIS.

Ele tem como alvo os desenvolvedores que são novos no jQuery. Ele mostra como criar muitas coisas legais com o jQuery, como animação, Criando e removendo elementos e muito mais ...

Eu aprendi muito com isso. Ele mostra como é fácil usar o jQuery. Agora eu adoro e posso ler e entender qualquer script jQuery, mesmo que seja complexo.

Aqui está um exemplo que eu gosto de " Redimensionar 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>

Recomendo esses tutoriais ...

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

Cada função assíncrona

Se você tiver documentos realmente complexos nos quais a execução da função jquery each () trava o navegador durante a iteração e / ou o Internet Explorer exibe a mensagem ' você deseja continuar executando este script ', esta solução salvará o dia.

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

A primeira maneira que você pode usá-lo é como cada ():

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

Um segundo parâmetro opcional permite especificar a velocidade / atraso entre as iterações, o que pode ser útil para animações ( o exemplo a seguir aguardará 1 segundo entre as iterações ):

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

Lembre-se de que, como isso funciona de forma assíncrona, não é possível confiar nas iterações antes da próxima linha de código, por exemplo:

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

Escrevi isso para um projeto interno e, embora tenha certeza de que pode ser aprimorado, funcionou para o que precisávamos, por isso espero que alguns de vocês o considerem útil. Obrigado -

Sintaxe abreviada-sugar-thing - Armazene em cache uma coleção de objetos e execute comandos em uma linha:

Ao invés de:

var jQueryCollection = $("");

jQueryCollection.command().command();

Eu faço:

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

Um caso de uso um tanto "real" pode ser algo nesse sentido:

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

Eu gosto de declarar uma $thisvariável no início de funções anônimas, então eu sei que posso fazer referência a um jQueried isso.

Igual a:

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

    // Other code
});

Salvar objetos jQuery em variáveis ​​para reutilização

Salvar um objeto jQuery em uma variável permite reutilizá-lo sem ter que procurar no DOM para encontrá-lo.

(Como @Louis sugeriu, agora uso $ para indicar que uma variável contém um 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 um exemplo mais complexo, digamos que você tenha uma lista de alimentos em uma loja e queira mostrar apenas os que correspondem aos critérios de um usuário. Você tem um formulário com caixas de seleção, cada uma contendo um critério. As caixas de seleção têm nomes como organice lowfat, e os produtos têm classes correspondentes - .organic, etc.

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

Agora você pode continuar trabalhando com esse objeto jQuery. Toda vez que uma caixa de seleção é clicada (para marcar ou desmarcar), comece na lista principal de alimentos e filtre para baixo com base nas caixas 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 a maioria das dicas interessantes e importantes já foram mencionadas, portanto esta é apenas uma pequena adição.

A pequena dica é a função jQuery.each (objeto, retorno de chamada) . Todo mundo provavelmente está usando a função jQuery.each (retorno de chamada) para iterar sobre o próprio objeto jQuery porque é natural. A função do utilitário jQuery.each (objeto, retorno de chamada) itera sobre objetos e matrizes. Por um longo tempo, de alguma forma, não vi o que poderia ser, além de uma sintaxe diferente (não me importo de escrever todos os loops criados), e estou um pouco envergonhado por ter percebido sua principal força apenas recentemente.

O fato é que, como o corpo do loop no jQuery.each (objeto, retorno de chamada) é uma função , você obtém um novo escopo a cada vez no loop, o que é especialmente conveniente quando você cria fechamentos no loop.

Em outras palavras, um erro comum típico é fazer algo como:

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

Agora, quando você invocar as funções na functionsmatriz, receberá um alerta três vezes com o conteúdo undefinedque provavelmente não é o que você queria. O problema é que existe apenas uma variável ie todos os três fechamentos se referem a ela. Quando o loop termina, o valor final de ié 3 e someArrary[3]é undefined. Você poderia contornar isso chamando outra função que criaria o fechamento para você. Ou você usa o utilitário jQuery, que basicamente o faz por você:

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

Agora, quando você invoca as funções, recebe três alertas com o conteúdo 1, 2 e 3 conforme o esperado.

Em geral, não é nada que você não possa fazer sozinho, mas é bom ter.

Acesse funções jQuery como faria com uma matriz

Adicionar / remover uma classe com base em um valor booleano ...

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

É a versão mais curta do ...

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

Não há muitos casos de uso para isso. Mesmo assim; Eu acho legal :)

Atualizar

Caso você não seja do tipo que lê comentários, o ThiefMaster ressalta que o toggleClass aceita um valor booleano , que determina se uma classe deve ser adicionada ou removida. No que diz respeito ao meu código de exemplo acima, essa seria a melhor abordagem ...

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

Atualizar:

Basta incluir este script no site e você obterá um console Firebug que aparece para depuração em qualquer navegador. Não é tão completo, mas ainda é bastante útil! Lembre-se de removê-lo quando terminar.

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

Confira este link:

Dos truques CSS

Atualização: Encontrei algo novo; é o JQuery Hotbox.

JQuery Hotbox

O Google hospeda várias bibliotecas JavaScript no Google Code. Carregá-lo de lá economiza largura de banda e carrega rapidamente porque já foi armazenado em cache.

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

Ou

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

Você também pode usar isso para saber quando uma imagem está totalmente carregada.

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

O "console.info" do firebug, que você pode usar para despejar mensagens e variáveis ​​na tela sem precisar usar caixas de alerta. "console.time" permite que você configure facilmente um cronômetro para agrupar um monte de código e ver quanto tempo leva.

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 filtragem sobre pseudo-seletores quando possível, para que o jQuery possa usar querySelectorAll (que é muito mais rápido que chiar). Considere este seletor:

$('.class:first')

A mesma seleção pode ser feita usando:

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

O que é mais rápido porque a seleção inicial de '.class' é compatível com QSA

Remover elementos de uma coleção e preservar a cadeia

Considere o seguinte:

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

A filter()função remove elementos do objeto jQuery. Nesse caso: Todos os elementos li que não contenham o texto "Um" ou "Dois" serão removidos.

Alterando o tipo de um elemento de entrada

Eu me deparei com esse problema quando estava tentando alterar o tipo de um elemento de entrada já anexado ao DOM. Você precisa clonar o elemento existente, inseri-lo antes do elemento antigo e excluir o elemento antigo. Caso contrário, não funcionará:

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 criterioso de scripts jQuery de terceiros, como validação de campo de formulário ou análise de URL. Vale a pena ver o que há para saber, quando você encontrar um requisito JavaScript em seguida.

Quebras de linha e encadeamento

Ao encadear várias chamadas em coleções ...

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

Você pode aumentar a legibilidade com quebras de linha. Como isso:

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

Use .stop (true, true) ao acionar uma animação para impedir que ela repita a animação. Isso é especialmente útil para animações de sobreposição.

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

Usando funções anônimas de execução automática em uma chamada de método, como .append()para iterar através de algo. IE:

$("<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();
}()));

Eu uso isso para percorrer coisas que seriam grandes e desconfortáveis ​​para sair do meu encadeamento para construir.

Suporte a atributos de dados HTML5, em esteróides!

A função de dados foi mencionada anteriormente. Com ele, você pode associar dados a elementos DOM.

Recentemente, a equipe do jQuery adicionou suporte para atributos de dados * * personalizados em HTML5 . E como se isso não bastasse; eles alimentaram a função de dados com esteróides, o que significa que você pode armazenar objetos complexos na forma de JSON, diretamente na sua marcação.

O HTML:

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

O 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!