Revelando o jQuery 3:17 novos recursos poderosos e como aproveitá-los

Já se passaram mais de 10 anos desde que o jQuery começou a agitar a web e permaneceu por aí por bons motivos. Em julho de 2015, o jQuery anunciou o primeiro alfa da versão 3.0 – uma grande atualização depois de muito tempo. Eles estão trabalhando nisso há quase 2 anos. A nova versão promete um jQuery mais fino e rápido, com compatibilidade retroativa em mente.

A versão atual 3.1.1 corrige muitos bugs, adiciona novos métodos, remove algumas funções e altera o comportamento de algumas funções. Vamos dar uma olhada nos novos recursos que eles adicionaram e como usá-los.

17. Ocultar e mostrar métodos

Para aumentar a compatibilidade com design responsivo, o jQuery 3 foi aprimorado para ocultar muitos elementos. Um teste realizado em 54 amostras mostra que a nova versão é 2% mais rápida que a anterior.



Além disso, os métodos .hide(), .show() e .toggle() se concentrarão em estilos embutidos em vez de estilos computados. Dessa forma, eles respeitarão melhor os valores de exibição das folhas de estilo sempre que possível, o que significa que as regras CSS podem mudar dinamicamente em eventos como redimensionamento de janelas ou reorientação de dispositivos.

04 
 Leia:28 efeitos CSS3 incríveis para dar uma aparência moderna ao seu site 
 
16. Funções WrapAll() e Unwrap()
 
 No jQuery 2, o método .wrapAll() se comportou como .wrap() quando uma função foi passada. Isso foi alterado agora – .wrapAll(function) chama sua função uma vez, usando o resultado da string da chamada de função para agrupar toda a coleção. 
 
13 
 No jQuery 3, existe um parâmetro de seletor opcional para o método unwarp(). A nova assinatura do método é:
 
21 
 Ele permite que você passe uma string que contém uma expressão de seletor para corresponder ao elemento pai. Se houver uma correspondência, os elementos filhos correspondentes serão desembrulhados, caso contrário, não serão. 
 
15. Largura/altura da barra de rolagem levada em consideração
 
 No jQuery 2, as chamadas para $(window).width() retornam a "largura do conteúdo", que exclui qualquer barra de rolagem adicionada pelo navegador se o conteúdo exceder as dimensões do elemento. Para fornecer uma medida equivalente à consulta de mídia CSS, $(window).outerWidth() e $(window).outerHeight() agora retornam a largura e a altura, incluindo a largura e a altura da barra de rolagem. Isso é equivalente à propriedade DOM window.innerWidth. 
 
14. Comportamento de dados()
 
 No jQuery 3, o comportamento do método data() foi ligeiramente alterado para alinhar o método às especificações da API Dataset. Agora ele transformará todas as chaves das propriedades em camel case. 
 
35 
 Se você estiver usando uma versão antiga, obterá o seguinte resultado no console:
 
43 
 No jQuery 3, você obterá:
 
51 
 Como você pode ver, o nome da propriedade está em caixa de camelo sem travessão, enquanto nas versões mais antigas permanecia em minúscula e mantinha o travessão. 
 
13. SVG de suporte a operações de classe
 
 jQuery ainda não oferece suporte completo a SVG, mas os métodos que manipulam nomes de classes CSS, como .hasClass() ou .addClass(), podem ser usados para direcionar documentos SVG. Você pode alterar (adicionar, alternar, remover) ou encontrar classes com jQuery em SVG e depois estilizar as classes usando CSS. 
 
12. Filtros visíveis e ocultos
 
 jQuery 3 modifica o significado dos filtros :visible e :hidden. Ele considera os elementos :visible se possuírem alguma caixa de layout, incluindo aquelas de largura e altura zero. Por exemplo, o elemento br e os elementos inline sem conteúdo serão selecionados pelo filtro :visible. 
 
 Se você tiver a seguinte página HTML:
 
64 
 e você executa a instrução:
 
76 
 No jQuery 1 e 2, você obterá 0 como resultado, mas nesta versão o resultado será 3. 
 
11. Chega de arredondamentos para largura e altura
 
 jQuery agora retorna valores de .width() e .height() em números flutuantes em vez de inteiros, sempre que o navegador suportar. Para usuários que buscam precisão de subpixel para projetar páginas da web, isso pode ser uma boa notícia. 
 
 Por exemplo, se você tiver 3 elementos com largura de um terço (33,3333333%) dentro de um elemento contêiner com largura de 100px:
 
83 
 Se você tentar obter a largura dos elementos filhos:
 
93 
 Você obterá o valor 33,3333333, o resultado mais preciso. 
 
10. Camada extra de segurança
 
 Uma camada extra de segurança foi integrada contra ataques Cross-Site Scripting (XSS). Requer que os desenvolvedores especifiquem dataType:”script” nas opções dos métodos $.ajax() e $.get(). Isso evita a possibilidade de um ataque em que o site remoto forneça conteúdo sem script, mas decida fornecer um script malicioso. Como jQuery.getScript() define explicitamente dataType:”script”, ele não é afetado por esta alteração. 
 
100 
9. A marca de hash inválida
 
 jQuery 3 gera um erro de sintaxe se uma string do seletor consiste em nada além de uma marca de hash, como jQuery(“#”) e .find(“#”). Na versão mais antiga, $(“#”) retornava uma coleção vazia e .find(“#”) gerava um erro. 
 
8. Novo método para escapar de string
 
 O novo método jQuery.escapeSelector() permite escapar de qualquer string ou caractere que tenha um significado especial em um seletor CSS. É útil nos casos em que um ID ou nome de classe contém caracteres com um significado especial em CSS, como ponto e vírgula ou ponto. 
 
 Por exemplo, se um elemento na página tiver um id “abc.xyz”, ele não poderá ser selecionado com $(“abc.xyz”) porque o seletor é analisado como um elemento com id ‘abc’, que também possui uma classe ‘xyz’. No entanto, ele pode ser selecionado com o novo método $(“#” + $.escapeSelector(“abc.xyz”)). 
 
7. Argumentos jQuery.when()
 
 No jQuery 3, se você adicionar um argumento de entrada com um método then() a $.when(), ele será interpretado como um “thenable” compatível com Promise. Isso permite uma gama muito mais ampla de entradas, incluindo promessas Bluebird e promessas ES6, o que possibilita escrever retornos de chamada assíncronos mais sofisticados. 
 
118 
 As chamadas jQuery.when com vários argumentos se comportam como Promise.all, agregando valores de atendimento em uma matriz de atendimento ou, alternativamente, rejeitando com o primeiro valor de rejeição. As chamadas de argumento único e zero se comportam como Promise.resolve, retornando um Deferred que resolve de forma idêntica a thenable ou cumpre com sua entrada não-Promise. 
 
 Além disso, o método jQuery.when() não transmite mais notificações de progresso da entrada Deferred para a saída Deferred. 
 
6. O hash em um URL é preservado
 
 O método jQuery.ajax() agora envia a URL completa para o transporte (script, xhr, jsonp ou transporte personalizado). Ele não remove mais o hash do URL, se ele estiver lá. No entanto, você precisará retirá-lo manualmente antes de enviar a solicitação se o servidor na outra extremidade da conexão não conseguir lidar com um hash em uma URL. 
 
5. Objetos diferidos são compatíveis com promessas JS
 
 Adiados são objetos encadeados que possibilitam a criação de filas de retorno de chamada. O jQuery 3 tornou os objetos diferidos compatíveis com os novos padrões Promises/A+. Há uma mudança importante no método .then(). Qualquer exceção lançada em um retorno de chamada .then() agora é capturada e convertida em um valor de rejeição. O valor não passível de retorno retornado de um manipulador de rejeição se transforma em um valor de cumprimento. 
 
 O método diferido à moda antiga:
 
123 
 O novo comportamento padrão Promises/A+ 
 
137 
4. Nova API para animações
 
 
 
 O jQuery 3 usa a API requestAnimationFrame() para executar animações. Esta nova API executa animações de maneira mais suave e rápida, consumindo menos tempo de CPU. Ele é usado apenas em navegadores que o suportam. Para navegadores mais antigos, como o Internet Explorer 9, o jQuery usa sua API mais antiga como método alternativo. 
 
 Leia:24 ferramentas de animação CSS3 e HTML5 para designers 
 
3. jQuery 3 é executado em modo estrito
 
 A maioria dos navegadores que suportam jQuery 3 usa o modo estrito, e a nova versão foi construída com esta diretiva em mente. Embora o jQuery 3 tenha sido escrito em modo estrito, seu código não precisa ser executado em modo estrito, portanto, você não precisa reescrever o código existente se quiser migrar para a versão atual. No entanto, há uma exceção – algumas versões do ASP.net não são compatíveis devido ao modo estrito. 
 
 Se você estiver executando o ASP.net 4.0 que usa arguments.caller.callee para tentar rastrear pilhas de chamadas no método doPostBack(), é melhor continuar usando o jQuery 2.x ou versões anteriores. Hoje em dia os navegadores suportam rastreamentos de pilha via error.stack, portanto não é necessário examinar argumentos.caller.callee. 
 
2. Nova assinatura para método Get e Post
 
 jQuery tem uma nova assinatura para as funções utilitárias $.get() e $.post() para alinhá-las a $.ajax(). A nova assinatura são os parâmetros de configuração. 
 
149 
 As configurações do objeto podem ter muitas propriedades. É o mesmo objeto que você pode fornecer para $.ajax(). A única diferença ao passar o objeto para $.get() e $.post() em oposição a $.ajax() é que a propriedade do método é sempre ignorada, porque $.get() e $.post() possuem um método HTTP predefinido para executar a solicitação Ajax (GET e POST). 
 
 Considere um código:
 
152 
 Apesar da propriedade do método, a instrução não enviará uma solicitação POST, mas uma solicitação GET. 
 
1. Para…de Loop
 
 jQuery 3 suporta o loop for…of introduzido na especificação ECMAScript 6. Ele permite que você faça um loop sobre objetos iteráveis ​​como Map, Set, Array e assim por diante. Ao utilizar este loop, o valor obtido é um elemento DOM de uma coleção jQuery, um de cada vez. 
 
 Leia:26 plug-ins jQuery modernos para tornar seu site melhor 
 
 O loop for…of pode ser usado para substituir a antiga sintaxe $.each( ) e facilitar o loop pelos elementos de uma coleção jQuery. Suponhamos que você queira atribuir um nome a cada elemento de entrada de uma página. 
 
 O código jQuery 2 seria parecido com… 
 
169 
 O código jQuery 3 será semelhante a… 
 
172 

            

            

               Como o spyware premium para Android restaura o controle executivo:três principais benefícios         
                16 folhas de dicas essenciais de aprendizado de máquina para cientistas de dados