Hoja de trucos JQuery - La mejor hoja de trucos interactiva en JQuery

Introducción a Cheatsheet JQuery

Jquery es una biblioteca de JavaScript multiplataforma que persiste en una intención principal de hacer que el desarrollo web sea más fácil de codificar. Es una declaración comprobada de que la introducción de Jquery ha reducido bastante la longitud de los códigos javascript, por lo que incluso un código javascript de varias líneas se puede lograr fácilmente con un bloque pequeño o incluso una sola línea de la declaración JQuery.

En este artículo de Cheatsheet JQuery, discutiremos qué es Jquery y el PTP de este marco:

Existen numerosos sitios web activos en la web, y el mercado incluye una amplia gama de idiomas que logran la creación de estos sitios web y productos en línea. Algunos de los famosos son los siguientes,

HTML, CSS
Javascript y JQuery para scripting de final de cliente
PHP para secuencias de comandos de fin de servidor
MYSQL para consultar bases de datos
etc.

Ventajas de usar el marco JQuery sobre otros,

Involucra una gran comunidad y una gran cantidad de complementos introducidos en ella.
Ligero
poderosas capacidades de encadenamiento
Breve documentación y tutoriales
Capacidad para desarrollar componentes Ajax fácilmente
Es la capacidad de hacer que el código sea simple y reutilizable
Navegador amigable

Contenido básico y sintaxis de Cheat Sheet JQuery:

Incluir: Incluyendo Jquery al script de ejecución actual

Sintaxis: la estructura sintáctica de JQuery

El selector selecciona los componentes HTML

$(Selector).action() Acción realizada en el componente seleccionado

Define el uso de JQuery

Hoja de trucos para los selectores Jquery:

elementos de etiquetaelementos de etiqueta

Selector	DESCRIPCIÓN
PS	Selecciona todos los elementos HTML.
$ ("P.demo")	Selecciona elementos de etiqueta
$ (": Botón")	Selecciona el botón y los elementos de entrada.
$ ("Tr: par")	Selecciona el par
$ ("Tr: impar")	Selecciona el impar
$ ("Span: parent")	Selecciona elementos que tienen un elemento hijo asociado
$ (“(Href)”)	Selecciona todos los elementos con atributos href
$ (": Entrada")	Selecciona todos los elementos del formulario.

Hoja de trucos para Jquery Events: Event es algún tipo de acción en la página web. Los eventos clave involucrados son los siguientes.

Eventos de mouse	Método de evento del mouse	Eventos de teclado	Método de evento de teclado	Eventos de formulario	Método de evento de formulario
mouse enter	.mouseenter ()	pulsación de tecla	.keypress ()	cambio	.cambio()
Haga doble clic	.dblclick ()	Keydown	.keydown ()	atención	.atención()
hacer clic	.hacer clic()	Tecla Arriba	.tecla Arriba()	difuminar	.difuminar()
dejar el mouse	.mouseleave ()	Eventos del navegador	Método de evento del navegador	Documentar eventos	Métodos de eventos de documentos
ratón hacia abajo	.ratón hacia abajo()	Error de población	.error()	descargar	.descargar()
ratón arriba	.mouseup ()	Desplazarse	.Desplazarse()	carga	.carga()

Ej:

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

Hoja de trucos efectos Jquery:

Conceptos básicos: .hide (), .show (), .toggle () - Permite ocultar, mostrar y alternar los elementos seleccionados.

Ex:

$("p").hide();

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

el método animate () prepara animaciones personalizadas
El método delay () permite la ejecución retrasada de elementos.
dequeue () ejecuta la siguiente secuencia de funciones presentes en la cola.

Ej:

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

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

fadeIn () Desvanece un elemento oculto
fadeout () permite que un elemento visible se desvanezca
fadeTo () se desvanece a una opacidad dada
fadeToggle () permite que el elemento se alterne con los métodos de aparición y desaparición gradual.

Ej:

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

Diapositiva: slideDown (), slideUp (), slideToggle ()

slideDown () Pantalla con un movimiento deslizante elementos superpuestos
slideToggle () Muestra u oculta con un movimiento deslizante elementos superpuestos
slideUp () Oculta con un movimiento deslizante elementos superpuestos

Consejos y trucos gratuitos sobre el uso de Cheat sheet jQuery

1) Mantenga un parámetro de contexto que permita que la ejecución inicie desde una rama DOM más profunda en lugar de invocar desde la raíz.

2) Verifique si el elemento existe y luego empuje hacia adelante para la ejecución del código.

Sintaxis:

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

3) El método de datos jQuerys vincula elementos DOM y datos sin modificar el DOM.

4) Verifique si alguno de los elementos está oculto.

Ej:

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

5) Mantenga un recuento de elementos secundarios anteriores inmediatos.

6) Cargar las imágenes antes optimiza el rendimiento de la ejecución de la consulta.

7) Es mejor verificar que la consulta se haya cargado correctamente antes de ejecutarla.

Ex:

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

8) Los enlaces de imágenes rotas se pueden reemplazar fácilmente llevando a cabo el siguiente código,

Ex:

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

9) El marco debe asegurarse siempre de que se ajuste al contenido de la página.

10) Se pueden agregar filtros de selección propios en Jquery. como todo en los filtros de selección de la biblioteca también se puede personalizar. Agregar un objeto $ .expr (':') lo hará.

Ej:

(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) Agregar el atributo deshabilitado a la entrada permite mantener deshabilitado el campo de entrada hasta que se llenen ciertos campos relativos.

Ex:

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

12) Asegúrese de definir la sección del controlador de errores para manejar los retornos de error ajax. cuando se alcanza un error de 400 o 500, esta sección se activará automáticamente.

Ex:

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

Cheat sheet JQuery - conclusión

Jquery reduce la complejidad adicional que JavaScript tiene con él. con múltiples entidades asociadas con jquery se encuentra entre las principales herramientas de desarrollo de páginas web en el mercado. Sus capacidades de encadenamiento livianas y eficientes han hecho que la codificación web sea bastante fácil para los desarrolladores.

Artículo recomendado

Esta ha sido una guía para la hoja de trucos JQuery. Aquí hemos discutido el contenido y el comando, así como consejos y trucos gratuitos de la hoja de trucos JQuery. También puede consultar el siguiente artículo para obtener más información: