Uma colecção de dicas simples para ajudar-te com a jQuery.
Para outras grandes listas aqui visita @sindresorhus's lista detalhada de listas impresionantes.
- Utilizar
noConflict()
- Verificando a jQuery Carrgada
- Verifique se existe um elemento
- Utiliza
.on()
No lugar de uniao.click()
- Regressar a botao de inicio
- Carregar preview de imágens
- Comprovar Se as imagens carregaram
- Corrigir imágens automáticamente crashadas
- Publicar um formulario com AJAX
- Alternar classes na libertacao
- Desactivar campos de entrada
- Deter a carga de Enlaces
- De caché de jQuery selectores
- Alavanca de fundo / Slide
- Acordeao simples
- Faz dois Divs na mesma altura
- Abrir enlaces externos numa nova tab / janela
- Buscar elemento Por Texto
- Visibilidade link de Cambio
- Controlo de erros de chamada Ajax
- Chamadas Plugin Cadeia
- Ordenar a lista de elementos alfabéticamente
- Desactivar o click direito
O símbolo $
usado pela jQuery também usa outras bibliotecas de JavaScript. Para garantir que a jQuery não entre em conflito com o objeto $
de diferentes bibliotecas, utiliza o método noConflict()
ao iniciar o documento:
jQuery.noConflict();
Agora haverá referência ao objeto jQuery utilizando o nome da variavel jQuery
no lugar de $
(por exemplo, jQuery('div p').hide()
). Se você tem várias versões do jQuery na mesma página, você pode usar o noConflict ()
para definir um alias para uma versão específica:
let $x = jQuery.noConflict();
Regressar ao índice de conteudos
Antes de fazeres alguma coisa com jQuery primeiro tens que asegurar-te de que esta carregado:
if (typeof jQuery == 'undefined') {
console.log('jQuery hasn\'t loaded');
} else {
console.log('jQuery has loaded');
}
Agora que estás fora...
Regressar ao índice de conteudos
Antes de usar um elemento HTML, você precisa garantir que ele faça parte do DOM.
if ($("#selector").length) {
//faça algo com element
}
Regressar ao índice de conteudos
.en O uso de ()
da-lhe varias vantagens sobre o uso de .click ()
, tais como a capacidade de agrupar varios eventos...
.on ('click tap hover')
...A uniao aplica-se aos elementos criados de forma dinámica, assim (nao ha necesidade de obrigar manualmente cada elemento adicionados dinámicamente a um elemento DOM) ...
...E a posibilidade de configurar un espaco de nomes:
.on('click.menuOpening')
Os espacos de nomes dao te o poder para desenlacar um evento específico (por exemplo,.off('click.menuOpening')
).
Regressar ao índice de conteudos
No que toca ao uso da animate
e métodos scrollTop
na jQuery nao ee necesario um plugin para criar uma animaciao simple-scroll-a arriba:
// Back to top
$('.container').on('click', '.back-to-top', function (e) {
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 800);
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>
A mudancao dos cambios de valor scrollTop
onde se quer que a barra de deslocamento se aterre. Na realidade, tudo o está a fazer e animar o corpo do documento ao durante 800 milisegundos ate que se desloque a parte superior do documento.
Nota: Procura por algum comportamento incorrecto com scrollTop
.
Regressar ao indice de conteudos
Se a tua página web utiliza una grande quantidade de imágens que nao sao visiveis inicialmente (por exemplo, em visao helicoptero) faz sentido para prever-las:
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');
Regressar ao índice de conteudos
As vezes pode ser preciso comprobar se as imagens carregaram completamente a fim de continuar com as sequencias de comandos:
$('img').on('load', function () {
console.log('image load successful');
});
Tambiem podes comprovar se uma imagen em particular carregou-se durante a troca da etiqueta <img>
por um ID ou classe.
Regressar ao índice de conteudos
Se por acaso encontrares casos de imagens crashadas no teu site a troca de uma por outra pode seres uma chatice. Este simples pedaco de código pode poupar muitas dores de cabeca:
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
Alternativamente, se desejas ocultar simplemente imagens crashadas, este fragmento encarregará-se disso:
$('img').on('error', function () {
$(this).hide();
});
Regressar ao índice de conteudos
Métodos jQuery AJAX sao uma forma comum para solicitar texto, HTML, XML, JSON o. Se desejas enviar um formulario através da AJAX pode-se recolher os logins do utilizador através do método val()
:
$.post('sign_up.php', {
user_name: $('input[name=user_name]').val(),
email: $('input[name=email]').val(),
password: $('input[name=password]').val(),
});
Porem, todas estas chamadas val()
costumam ser complicadas. Uma melhor maneira de recolher os logins do utilizador sera ao utilizar a funcao serialize()
que recolhe as entradas do utilizador em cadeia:
$.post('sign_up', $('#sign-up-form').serialize());
Regressar ao índice de conteudos
Digamos que queres trocar o visual de um elemento assim actualizas a página quando um utilizador se desloca sobre ele. Tu podes juntar uma classe ao seu elemento quando o utilizador está a flutuar; quando o utilizador deixa a flutuar a classe e eliminada:
$('.btn').on('hover', function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
Só tens que adicionar o CSS necessario. Se desejas uma forma mais simples, utiliza o método toggleClass
:
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
Nota: CSS pode ser uma solucao mais rápida neste caso, mas vale a pena saber isto.
Regressar ao índice de conteudos
As vezes e possivel pretender que o botao de envio de um formulario ou uma das suas entradas de texto esteja desativados ate que o utilizador realize uma acción determinada (por exemplo, controlo da "Ja leram terminais" janela de verificacao). Adicionar o atributo disabled
a entrada para que se possa activar quando se quer:
$('input[type="submit"]').prop('disabled', true);
Tudo o que necessitas fazer e executar o método prop
outra vez na entrada, e depois establecer o valor de disabled
para false
:
$('input[type="submit"]').prop('disabled', false);
Regressar ao índice de conteudos
As vezes nao queres vínculos para ir a uma determinada página web, nem voltar a carregar a página; e posivele que queiras que se faca outra coisa, como abrir outro script. Isto vai fazer o truque de prevenir a accao por defeito:
$('a.no-link').on('click', function (e) {
e.preventDefault();
});
Regressar ao índice de conteudos
Pense em quantas vezes se escreve o mesmo selector vezes sem conta em qualquer projecto. Cada selector $('.element')
tem que buscar em todo DOM cada vez, independentemente do seu dito selector havia executado anteriormente. No lugar deste, execute o selector de uma vez e armazena os resultados em uma so variavel:
var blocks = $('#blocks').find('li');
Agora pode-se utilizar a variavel blocks
sempre que quiseres sem precisares de buscar el DOM em cada ocasiao:
$('#hideBlocks').on('click', function () {
blocks.fadeOut();
});
$('#showBlocks').on('click', function () {
blocks.fadeIn();
});
O armaenamento em caché selectores de jQuery sao uma ganancia de rendimiento fácil.
Regressar ao índice de conteudos
Deslizante e a descoloracao sao algo que usamos um monte de vezes em animacoes com jQuery. E possivel que só queiram mostrar um elemento quando um utilizador clica em algo, o que faz com que os fadeIn
e métodos de slideDown
aperfeicoem. Mas se deseja que o elemento apareca na primera posiciao e logo desaparecem no segundo este vai a funcionar muito bem:
// Fade
$('.btn').on('click', function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').on('click', function () {
$('.element').slideToggle('slow');
});
Regressar ao índice de conteudos
Este e um método simples para um acordeao rápido:
// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').on('click', function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});
Diante a adicao deste script, a única coisa que tens que fazer na tua página web e o HTML necessario para ir buscar este trabalho.
Regressar ao índice de conteudos
As vezes, vais precisar de dois divs terem a mesma altura nao importa o conteudo:
$('.div').css('min-height', $('.main-div').height());
Este exmplo establece a min-height
característica que significa que pode ser maior que o div principal mas nunca mais pequena. Sem obstaculos, um método mais flexible seria um conjunto de elementos e ajustar a altura com a altura do elemento mais alto:
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);
Se deseja todas columnas tenham a mesma altura:
var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
});
Nota: Isto pode fazer se de varias maneiras em CSS mas dependendo das tuas necessidades, saber como fazer isto em jQuery vale a pena.
Regressar ao índice de conteudos
Abrir enlaces externos numa nova tab ou janela do browser e garantir enlaces na mesma origem aberta na mesma tab ou janela:
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');
Nota: window.location.origin
nao funciona no IE10. Este fix ocupa-se deste problema.
Regressar ao índice de conteudos
Tendo em conta o uso do selector contains()
em jQuery pode-se encontrar texto contendo um elemento. Se nao existe texto, esse elemento ocultará-se:
var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();
Regressar ao índice de conteudos
Gatillo JavaScript quando o utilizador ja nao se concentra numa tab, ou volta a centrar-se numa tab:
$(document).on('visibilitychange', function (e) {
if (e.target.visibilityState === 'visible') {
console.log('Tab is now in view!');
} else if (e.target.visibilityState === 'hidden') {
console.log('Tab is now hidden!');
}
});
Regressar ao índice de conteudos
Quando uma chamada Ajax devolve um erro 404 ou 500 o gestor de erros ira abrir. Se nao se define o controlador, outro código jQuery podera nao funcionar. Definir um controlador global de erros de Ajax:
$(document).on('ajaxError', function (e, xhr, settings, error) {
console.log(error);
});
Regressar ao índice de conteudos
jQuery permite el "encadeamento" plug-in de chamadas a métodos para mitigar o processo de consulta em repetidas ocasioes o DOM e a creacao de varios objetos jQuery. Digamos que o seguinte fragmento representa as suas chamadas a métodos plugin:
$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();
Isto poderia melhorar significativamente o uso de encadeamento:
$('#elem')
.show()
.html('bla')
.otherStuff();
Uma alternativa e armazenar em caché o elemento numa variavel (com o prefixo $
):
var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();
Ambos os métodos armazenamento em caché e o encadeamento sao as melhores prácticas que tornal o código curto e mais rápido.
Regressar ao índice de conteudos
Digamos que tu terminas com demasiados elementos numa lista. Talvez o conteudo e produzido por um CMS e desejas ordenar por ordem alfabética:
var ul = $('#list'),
lis = $('li', ul).get();
lis.sort(function (a, b) {
return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
});
ul.append(lis);
Tem que ir!
Regressar ao índice de conteudos
Se desejas desactivar o botao direito do rato, podes fazer-lo para uma página inteira...
$(document).ready(function () {
$(document).bind('contextmenu', function (e) {
return false;
})
})
...mas também podes fazer o mesmo para um elemento específico:
$(document).ready(function () {
$('#submit').bind('contextmenu', function (e) {
return false;
})
})
Regressar ao índice de conteudos
As versoes actuais de Chrome, Firefox, Safari, Opera, Edge e EI11.