Batota JQuery - A melhor folha de dicas interativa no JQuery

Introdução ao JQuery do Cheatsheet

O Jquery é uma biblioteca javascript multiplataforma que é persistente com a intenção principal de facilitar o desenvolvimento do código da Web. É uma afirmação comprovada de que a introdução do Jquery reduziu bastante o comprimento dos códigos javascript. Portanto, mesmo um código javascript de várias linhas pode ser facilmente alcançado com um pequeno bloco ou mesmo uma única linha da instrução JQuery.

Neste artigo JQuery do Cheatsheet, discutiremos o que é Jquery e o PTP dessa estrutura:

Existem inúmeros sites ativos na web, e o mercado inclui uma ampla variedade de idiomas que realizam a construção desses sites e produtos online. Alguns dos famosos são os seguintes,

HTML, CSS
Javascript e JQuery para script final do cliente
PHP para script final do servidor
MYSQL para consulta de banco de dados
etc.

Vantagens de usar a estrutura JQuery sobre outras,

Envolve uma comunidade enorme e muitos plugins introduzidos nela.
Leve
poderosas capacidades de encadeamento
Documentação resumida e tutoriais
Capacidade de desenvolver componentes Ajax facilmente
É Capacidade de tornar o código simples e reutilizável
Navegador amigável

Conteúdo básico e sintaxe do JQuery da folha de dicas:

Incluir: Incluir Jquery no script de execução atual

Sintaxe: A estrutura sintaxe do JQuery

O Seletor seleciona os componentes HTML

$(Selector).action() Ação executada no componente selecionado

Define o uso de JQuery

Folha de dicas para seletores Jquery:

elementos de tagelementos de tag

Seletor	DESCRIÇÃO
$ ("*")	Seleciona todos os elementos HTML
$ ("P.demo")	Selecione% s elementos de tag
$ (": Botão")	Seleciona o botão e os elementos de entrada
$ ("Tr: par")	Seleciona o par
$ ("Tr: ímpar")	Seleciona o ímpar
$ ("Span: parent")	Seleciona elementos que possuem um elemento filho associado
$ ("(Href)")	Seleciona todos os elementos com atributos href
$ (": Entrada")	Seleciona todos os elementos do formulário

Cheat sheet para Jquery Events: Event é algum tipo de ação na página da Web. Os principais eventos envolvidos são os seguintes.

Eventos do Mouse	Método de evento do mouse	Eventos de teclado	Método de evento do teclado	Eventos de formulário	Método Event
mouse entrar	.mouseenter ()	pressione o botão	.pressione o botão()	mudança	.mudança()
Duplo click	.dblclick ()	Keydown	.keydown ()	foco	.foco()
clique	.clique()	Keyup	.keyup ()	borrão	.borrão()
licença do mouse	.mouseleave ()	Eventos do Navegador	Método de evento do navegador	Documentar eventos	Métodos de evento de documento
mouse para baixo	.mousedown ()	População de erro	.erro()	descarregar	.descarregar()
mouse up	.mouseup ()	rolagem	.rolagem()	carga	.carga()

Ex:

$("p").dblclick(function()( $(this).hide(); ));

Batota Jquery efeitos:

Noções básicas: .hide (), .show (), .toggle () - Permite ocultar, mostrar e alternar os elementos selecionados.

Ex:

$("p").hide();

Personalizado: .animate (), .delay (), .dequeue (), .stop ()

o método animate () prepara animações personalizadas
o método delay () permite a execução atrasada de itens.
dequeue () executa a próxima sequência de funções presentes na fila.

Ex:

$("element1").animate( ( opacity : 0.50 left: "+=27" )

Fade: fadeTo (), fadeOut (), fadeIn (), fadeToggle ()

fadeIn () Desvanece um elemento oculto
fadeout () permite que um elemento visível seja desbotado
fadeTo () diminui para uma dada opacidade
fadeToggle () permite que o elemento seja alternado com os métodos fade in e fade out.

Ex:

$("button").click(function() ( $("#div2").fadeOut("slow"); ));

Slide: slideDown (), slideUp (), slideToggle ()

slideDown () Tela com um movimento deslizante, elementos superados
slideToggle () Exibe ou oculta com um movimento deslizante, elementos superados
slideUp () Oculta com um movimento deslizante, elementos superados

Dicas e Truques gratuitos do uso do ChQuery jQuery

1) Mantenha um parâmetro de contexto que permita que a execução inicie a partir de um ramo DOM mais profundo, em vez de chamar a partir da raiz.

2) Verifique se o elemento existe e, em seguida, avance para a execução do código.

Sintaxe:

if($("#element").length) ( // DOM element exists ) else ( //DOM element dont exists )

3) O método de dados jQuerys liga elementos e dados DOM sem modificar o DOM.

4) Verifique se algum dos elementos está oculto.

Ex:

if($(element).is(":visible") == "true") ( //The element is Visible )

5) Mantenha uma contagem dos elementos filhos anteriores imediatamente.

6) O carregamento das imagens anteriormente otimiza o desempenho da execução da consulta.

7) É melhor verificar se a consulta foi carregada com sucesso antes de executá-la.

Ex:

if (typeof jQuery == 'undefined') ( console.log('jQuery not loaded'); ) else ( console.log('jQuery loaded'); )

8) Links de imagens quebrados podem ser substituídos com facilidade, executando o código abaixo,

Ex:

$('img').on('error', function () ( if(!$(this).hasClass('broken-image')) ( $(this).prop('src', 'img/broken.png.webp').addClass('broken-image'); ) ));

9) O quadro deve sempre ter certeza de se ajustar ao conteúdo da página.

10) Os próprios filtros de seleção podem ser adicionados ao Jquery. tudo como nos filtros de seleção de bibliotecas também pode ser personalizado. adicionar um objeto $ .expr (':') fará isso.

Ex:

(function($) ( var random = 0 $.expr(':').random = function(a, i, m, r) ( if (i == 0) ( random = Math.floor(Math.random() * r.length); ) return i == random; ); ))(jQuery); // how to utilize this piece of code. $('li:random').addClass('glow');

11) A adição do atributo desativado à entrada permite manter o campo de entrada desativado até que determinados campos relativos sejam preenchidos.

Ex:

$('input(type="submit")').prop('disabled', true);

12) Certifique-se de definir a seção do manipulador de erros para manipular os retornos de erro do ajax. quando um erro de 400 ou 500 for atingido, esta seção será acionada automaticamente.

Ex:

$(document).on('ajaxError', function (e, xhr, settings, error) ( console.log(error); ));

Cheat sheet JQuery - conclusão

Jquery reduz a complexidade adicional que o javascript mantém com ele. com várias entidades associadas ao jquery está entre as principais ferramentas de desenvolvimento de páginas da web no mercado. seus recursos de encadeamento leves e eficientes tornaram a codificação da Web bastante fácil para os desenvolvedores.

Artigo recomendado

Este foi um guia para o ChQuery JQuery aqui, discutimos o conteúdo e o comando, além de dicas e truques gratuitos do JQuery, você também pode consultar o seguinte artigo para saber mais -