Cómo mejorar en jQuery

jQuery es una biblioteca utilizada principalmente para el recorrido de documentos HTML, manipulación, manejo de eventos, animación y Ajax. Si lo ve como un montón de métodos, uno para cada tipo de operación DOM, entonces las cosas se vuelven simples.

A continuación se muestra la estructura del código de muestra para una IU de pestaña. Ahora, para que sea interactivo, deberá realizar algunas manipulaciones DOM [cambiar la estructura del documento, el estilo y el contenido de la etiqueta HTML cuando ocurra un evento] usando jQuery.

Básicamente, el código html es el árbol de etiquetas nodos AKA. Hay nodo primario y nodo secundario. Hay nodos hermanos. Cada nodo puede ser una etiqueta abierta o una etiqueta cerrada. Cada etiqueta tiene un nombre. Tienen atributos como src, class, style, href, etc. Tienen contenido. Tienen estilos.

A continuación se muestra el código jQuery correspondiente:

// Selecciona toda la lista de pestañas
var tabLists = $ (‘. tab’). find (“. tab-list li”);
// selecciona todos los contenidos de la pestaña
var tabPanes = $ (‘. tab’). find (“. tab-content .tab-pane”);

var transitionSpeed ​​= 10000;

// adjunte un escucha de clics a la lista de pestañas
tabLists.click (function () {

// elimina toda la clase activa de las pestañas. adjuntamos una clase a la pestaña en la que se hizo clic para que parezca una pestaña seleccionada.
tabLists.removeClass (“activo”);
// Agregar clase activa a la pestaña en la que se hizo clic
$ (this) .addClass (“activo”);

// ocultar todos los paneles de pestañas
tabPanes.slideUp (settings.transitionSpeed);
// encuentra el panel de pestañas de la pestaña en la que se hace clic actualmente
var target = $ (this) .find (“a”). attr (“href”);
// hazlo visible
$ (target) .slideDown (transitionSpeed);

});

Tratemos de entender jQuery. En general, la manipulación DOM incluye las siguientes operaciones:

Encontrar / seleccionar etiquetas.

jQuery ofrece una gran flexibilidad para seleccionar etiquetas usando selectores CSS. Seleccionará una sola etiqueta o un montón de etiquetas en función del selector que utilice.

etiqueta var = $ (‘su-selector-aquí’); // $ () es el constructor jQuery

// SELECTORES BÁSICOS
// por id
etiqueta var = $ (‘# myDiv’);
// por clase
etiqueta var = $ (‘. demoClass’);
// por nombre de etiqueta
etiqueta var = $ (‘div’);

// SELECCIONANDO POR ORDEN
etiqueta var = $ (‘img: first’). attr (‘src’);

// SELECTORES DE FORMULARIO
$ (“input: disabled”). val (“esto es todo”);

// SELECCIONAR POR ATRIBUTOS
etiqueta var = $ (‘img [altura]’). longitud;

// SELECCIONANDO POR VISIBILIDAD
: oculto #seleccione todos los elementos ocultos
: visible #seleccione todos los elementos visibles

// SELECCIÓN DE PADRES Y NIÑOS
$ (‘div: primer hijo’). text (‘cambiarme’);

Los siguientes son algunos métodos que pueden ayudarlo a seleccionar y navegar fácilmente por las etiquetas:

.próximo();
.nextAll ();
.prev ();
.prevAll ();
.siblings ();
.agregar nuevamente(); #incluir célula original también
.padre();
.niños();
.fin(); #volver al padre de la celda;

Tratar con el contenido.

El contenido puede ser texto o HTML.

// obteniendo etiquetas html
$ (‘div’). html ()
// obteniendo contenido
$ (‘div’). text ()
// obteniendo valores del cuadro de texto, desplegable
$ (‘# myInput’). val ()

Manejo de atributos como class, src, etc.

// OBTENER Y ESTABLECER ATRIBUTOS
// obteniendo los atributos del elemento
$ (‘img’). attr (‘src’);
// configurando vale usando una función
$ (‘table’). attr (‘border’, function (arr)) {return arr;};
// establecer los atributos del elemento
// método uno:
$ (‘img’). attr (‘alt’, ‘demo alt’);
// método dos:
$ (‘img’). attr ({
src: ‘demo.jpg’,
title: ‘este es el título de demostración’,
alt: ‘esta es la demostración alt’
});
// eliminando el atributo
$ (‘img’). removeAttr (‘height’);
// MANEJO DEL ATRIBUTO DE CLASE
$ (‘# bar’). addClass (‘foo’);
//Similar
.removeClass ();
.toggleClass ();
.hasClass ();

Tratar con estilos sobre la marcha

// obtener el valor de una propiedad css
var color = $ (‘# test’). css (‘background-color’);
// obteniendo múltiples propiedades css
var prop = $ ((‘# prueba’)
.css ([‘ancho’, ‘altura’, ‘color’, ‘color de fondo’]);
// agregando / actualizando la propiedad css
$ (‘# myTest’). css (‘color’, ‘rojo’);
// establecer valor a través de una función
$ (‘. ejemplo’). css (‘ancho’, función (índice) {
índice de retorno * 50;
});
// establecer varias propiedades a la vez
$ (‘. ejemplo’). css ({
‘background-color’: ‘amarillo’,
‘font-size’: ’20px’
});

Tratar con Tag en su conjunto

// agregar etiqueta
$ (“.inner”) .append (“

Prueba

“);
$ (“

Prueba

“) .appendTo (“.inner”);

// anteponer una etiqueta
$ (“.inner”) .prepend (“

Prueba

“);
$ (“

Prueba

“) .prependTo (“.inner”);

// Insertar contenido, especificado por el parámetro, después de cada elemento en el conjunto de elementos coincidentes
$ (“.inner”) .after (“

Prueba

“);

// Insertar cada elemento en el conjunto de elementos coincidentes después del objetivo.
$ (“h2”) .insertAfter ($ (“.container”));

// Insertar contenido, especificado por el parámetro, antes de cada elemento en el conjunto de elementos coincidentes.
$ (“.inner”) .before (“

Prueba

“);

// Insertar cada elemento en el conjunto de elementos coincidentes antes del objetivo.
$ (“h2”) .insertBefore ($ (“.container”));

//envolver
$ (‘p’). wrap (‘

‘);

//Similar
.wrapAll ();
.wrapInner ();

// Reemplace cada elemento de destino con el conjunto de elementos coincidentes.
$ (“

Nuevo encabezado

“) .replaceAll (“.inner”);

// Reemplace cada elemento del conjunto de elementos coincidentes con el nuevo contenido proporcionado y devuelva el conjunto de elementos que se eliminó.
$ (“p”) .replaceWith (“ Párrafo. “);

// Elimina todos los nodos secundarios del conjunto de elementos coincidentes del DOM.
$ (“p”) .empty ();

//clon()
$ (‘p’). clone (). appendTo ($ (‘div’));

// Eliminar el conjunto de elementos coincidentes del DOM.
$ (“.hello”) .remove ();

//despegar()
$ (function () {
var b;
$ (‘# detach’). click (function () {
b = $ (‘div> p’). detach ();
});
$ (‘# append’). click (function () {
$ (b) .appendTo (‘div’);
});
});

Manejo de eventos

Puede adjuntar fácilmente un detector de eventos a las etiquetas

$ (‘your-seletor-here’). eventName (your-function-here);

Ejemplo:

$ (‘# submit’). click (function (e) {
// tu código aquí
});

Lista de métodos comunes basados ​​en eventos

// Evento de página
.ready () // cuando la página web se carga en el navegador

// Eventos del tablero clave
.keypress () // se presiona y suelta una tecla
.keydown () // se presiona una tecla
.keyup () // se libera una clave

// FORMAR EVENTOS
.cambio()
.select () // Vincula un controlador de eventos al evento JavaScript “select”, o activa ese evento en un elemento.

$ (“: input”) .select (function () {
$ (“div”) .text (“Algo fue seleccionado”) .show (). fadeOut (1000);
});

.focus () // detecta el foco de un elemento
.blur () // detecta un elemento borroso

MOUSE EVENTOS
.click () // detecta un clic
.mousedown () // cuando se presiona el botón del mouse sobre un elemento
.mouseup () // cuando se suelta el botón del mouse
.dblclick () // detecta un doble clic
.mouseenter () // el cursor del mouse ingresa al seleccionado pero el elemento no es el elemento hijo
.mouseleave () // el cursor del mouse deja el elemento seleccionado
.flotar()
.mouseover () // el cursor del mouse ingresa al elemento seleccionado o cualquiera de sus elementos secundarios
.mouseout () // el cursor del mouse deja el elemento seleccionado
.mousemove () // se mueve el mouse

Funciones de ayuda

// recorrer los elementos coincidentes
$ (‘img’). each (function (index, tag) {
console.log (index + ‘:’: etiqueta);
});

// recorrer la matriz y el objeto
entrada var = [1,3,6,3,6,8];
salida var = 0;
$ .each (entrada, función (índice, valor) {
salida + = valor;
});
console.log (salida);

// encuentra los elementos en el objeto
$ (‘li’). find (‘ul: first’);

// Reduce el conjunto de elementos coincidentes a los que coinciden con el selector o pasan la prueba de la función.
$ (“li”) .filter (“: even”) .css (“color de fondo”, “rojo”);
$ (“li”) .filter (función (índice) {
return $ (“fuerte”, esto) .length === 1;
});

// Eliminar un controlador de eventos.
función flash () {
$ (“div”) .show (). fadeOut (“lento”);
}

$ (“#bind”) .click (function () {
$ (“cuerpo”)
.on (“clic”, “#theone”, flash)
.find (“#theone”)
.text (“¡Puede hacer clic!”);
});

$ (“#unbind”) .click (function () {
$ (“cuerpo”)
.off (“clic”, “#theone”, flash)
.find (“#theone”)
.text (“No hace nada …”);
});

// agrega un oyente de eventos
$ (‘# clk’). on (‘click dblclick’, function () {
console.log (‘clic y doble clic’);
});

// Obtenga el valor de una propiedad para el primer elemento del conjunto de elementos coincidentes o establezca una o más propiedades para cada elemento coincidente.
$ (‘# myCheck’). change (function () {
var bool = $ (this) .prop (‘verificado’);
console.log (bool);
});
// desencadenar un evento
$ (‘# clk’). trigger (‘clic’);
o
$ (‘# clk’). clic ();

// objetivo y es
$ (‘# clk’). click (function (e) {
var bool = $ (e.target) .is (‘a’);
si (bool) {
console.log (‘ se hizo clic’);
}
});

Extender el desarrollo de jQuery / Plugin

Desea que la funcionalidad de pestaña, en el ejemplo mostrado anteriormente, esté disponible en todo su código. Desea un único método al que pueda llamar en una selección de jQuery para inicializar la pestaña. En este caso, es posible que desee escribir un complemento.

Aquí hay un código de placa de caldera para un desarrollo de jQuery Plugin:

/ *
* jquery-boilerplate – v4.0.0
* Un inicio rápido para el desarrollo de complementos jQuery.
* http://jqueryboilerplate.com
* *
* Hecho por Zeno Rocha
* Bajo licencia MIT
* /
// el punto y coma antes de la invocación de la función es una red de seguridad contra concatenados
// scripts y / u otros complementos que pueden no cerrarse correctamente.
; (función ($, ventana, documento, indefinido) {

“uso estricto”;

// undefined se usa aquí ya que la variable global undefined en ECMAScript 3 es
// mutable (es decir, alguien más puede cambiarlo). indefinido no es realmente ser
// se pasa para que podamos asegurarnos de que su valor sea realmente indefinido. En ES5, indefinido
// ya no se puede modificar.

// la ventana y el documento se pasan como variables locales en lugar de globales
// ya que esto (ligeramente) acelera el proceso de resolución y puede ser más eficiente
// minified (especialmente cuando se hace referencia a ambos regularmente en su complemento).

// Crea los valores predeterminados una vez
var pluginName = “defaultPluginName”,
valores predeterminados = {
propertyName: “valor”
};

// El constructor del complemento real
Plugin de función (elemento, opciones) {
this.element = elemento;

// jQuery tiene un método extendido que combina el contenido de dos o
// más objetos, almacenando el resultado en el primer objeto. El primer objeto
// generalmente está vacío ya que no queremos alterar las opciones predeterminadas para
// futuras instancias del complemento
this.settings = $ .extend ({}, valores predeterminados, opciones);
this._defaults = valores predeterminados;
this._name = pluginName;
this.init ();
}

// Evitar conflictos de plugin.prototype
$ .extend (Plugin.prototype, {
init: function () {

// Coloca aquí la lógica de inicialización
// Ya tienes acceso al elemento DOM y
// las opciones a través de la instancia, por ejemplo, this.element
// y this.settings
// puedes agregar más funciones como la siguiente y
// llámalos como el ejemplo de abajo
this.yourOtherFunction (“jQuery Boilerplate”);
},
yourOtherFunction: function (texto) {

// algo de lógica
$ (this.element) .text (texto);
}
});

// Un contenedor de complementos realmente ligero alrededor del constructor,
// prevenir contra múltiples instancias
$ .fn [pluginName] = función (opciones) {
devuelve this.each (function () {
if (! $. data (this, “plugin_” + pluginName)) {
$ .data (esto, “plugin_” +
pluginName, nuevo complemento (esto, opciones));
}
});
};

}) (jQuery, ventana, documento);

En general, nuestro complemento de pestañas se verá así:

; (función ($, ventana, documento, indefinido) {

“uso estricto”;

var pluginName = “tabify”,
valores predeterminados = {
transición Velocidad: 300
};

Plugin de función (elemento, opciones) {
this.element = elemento;

this.settings = $ .extend ({}, valores predeterminados, opciones);
this._defaults = valores predeterminados;
this._name = pluginName;
this.init ();
}

$ .extend (Plugin.prototype, {
init: function () {

var tabLists = $ (this.element) .find (“. tab-list li”);
var tabPanes = $ (this.element) .find (“. tab-content .tab-pane”);

var transitionSpeed ​​= this.settings.transitionSpeed;

tabLists.click (function () {

tabLists.removeClass (“activo”);
$ (this) .addClass (“activo”);

tabPanes.slideUp (settings.transitionSpeed);
var target = $ (this) .find (“a”). attr (“href”);
$ (target) .slideDown (settings.transitionSpeed);

});

}
});

$ .fn [pluginName] = función (opciones) {

devuelve this.each (function () {

if (! $. data (this, “plugin_” + pluginName)) {

$ .data (this, “plugin_” + pluginName, nuevo Plugin (this, options));

}

});

};

}) (jQuery, ventana, documento);

Y aquí está el código HTML

cuerpo{
margen: 0;
relleno: 0;
Familia tipográfica: “Helvetica Neue”;
color: # 333;
}

* {
tamaño de la caja: border-box;
}

.envoltura{
ancho: 100%;
relleno: 0 15px;
}

ul.tab-list {
margen: 0;
relleno: 0;
tipo-estilo-lista: ninguno;
}

ul.tab-list li {
pantalla: bloque en línea;
cursor: puntero;
}

ul.tab-list li.active {
borde inferior: sólido 2px # 00aeef;
}

ul.tab-list li a {
esquema: ninguno;
decoración de texto: ninguno;
altura de línea: 50 px;
relleno: 0 15px;
color: heredar;
}

.tab-content .tab-pane {
pantalla: ninguno;
relleno: 15px 0;
}

.tab-content .tab-pane: first-child {
bloqueo de pantalla;
}

$ (“. tab”). tabify ({
velocidad de transición: 10000
});