jQuery es una biblioteca JavaScript rápida y concisa creada por John Resig en 2006 con un bonito lema: Escribe menos, haz más. jQuery simplifica el recorrido de documentos HTML, el manejo de eventos, la animación y las interacciones Ajax para un desarrollo web rápido. jQuery es un conjunto de herramientas de JavaScript diseñado para simplificar varias tareas escribiendo menos código.
A continuación se muestra la lista de características principales importantes compatibles con jQuery:
DOM manipulation - jQuery facilitó la selección de elementos DOM, atravesarlos y modificar su contenido mediante el uso del motor de selección de código abierto entre navegadores llamado Sizzle.
Event handling - jQuery ofrece una forma elegante de capturar una amplia variedad de eventos, como un usuario que hace clic en un enlace, sin necesidad de saturar el código HTML con controladores de eventos.
AJAX Support - El jQuery le ayuda mucho a desarrollar un sitio receptivo y rico en funciones usando tecnología AJAX.
Animations - El jQuery viene con muchos efectos de animación incorporados que puede usar en sus sitios web.
Lightweight - La jQuery es una biblioteca muy liviana, de aproximadamente 19 KB de tamaño (minificada y comprimida con gzip).
Cross Browser Support - jQuery es compatible con varios navegadores y funciona bien en IE 6.0+, FF 2.0+, Safari 3.0+, Chrome y Opera 9.0+.
Latest Technology - jQuery admite selectores CSS3 y sintaxis XPath básica.
Utilice la función $ (document) .ready (). Todo lo que contiene se cargará tan pronto como se cargue el DOM y antes de que se carguen los contenidos de la página.
JavaScript soporta muy bien el concepto de objeto. Puede crear un objeto utilizando el objeto literal de la siguiente manera:
var emp = {
name: "Zara",
age: 10
};Puede escribir y leer las propiedades de un objeto utilizando la notación de puntos de la siguiente manera:
// Getting object properties
emp.name // ==> Zara
emp.age // ==> 10
// Setting object properties
emp.name = "Daisy" // <== Daisy
emp.age = 20 // <== 20Puede definir matrices utilizando el literal de matriz de la siguiente manera:
var x = [];
var y = [1, 2, 3, 4, 5];Una matriz tiene una propiedad de longitud que es útil para la iteración. Podemos leer elementos de una matriz de la siguiente manera:
var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
// Do something with x[i]
}Una función nombrada tiene un nombre cuando se define. Una función nombrada se puede definir usando la palabra clave de función de la siguiente manera:
function named(){
// do some stuff here
}Una función en JavaScript puede tener nombre o ser anónima.
Una función anónima se puede definir de manera similar a una función normal, pero no tendría ningún nombre.
¡Si! Se puede asignar una función anónima a una variable.
¡Si! Una función anónima se puede pasar como argumento a otra función.
Los argumentos de las variables de JavaScript representan los argumentos pasados a una función.
Usando el operador typeof, podemos obtener el tipo de argumentos pasados a una función. Por ejemplo
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3Usando la propiedad argument.length, podemos obtener el número total de argumentos pasados a una función. Por ejemplo
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3El objeto de argumentos tiene una propiedad callee, que se refiere a la función en la que se encuentra. Por ejemplo
function func() {
return arguments.callee;
}
func(); // ==> funcPalabra clave famosa de JavaScript esto siempre se refiere al contexto actual.
El alcance de una variable es la región de su programa en la que está definida. La variable de JavaScript tendrá solo dos ámbitos.
Global Variables - Una variable global tiene un alcance global, lo que significa que es visible en todas partes en su código JavaScript.
Local Variables- Una variable local será visible solo dentro de una función donde esté definida. Los parámetros de la función son siempre locales para esa función.
Una variable local tiene prioridad sobre una variable global con el mismo nombre.
Una devolución de llamada es una función de JavaScript simple que se pasa a algún método como argumento u opción. Algunas devoluciones de llamada son solo eventos, llamados para darle al usuario la oportunidad de reaccionar cuando se activa un determinado estado.
Los cierres se crean siempre que se accede a una variable que está definida fuera del ámbito actual desde dentro de algún ámbito interno.
El siguiente ejemplo muestra cómo el contador variable es visible dentro de las funciones de creación, incremento e impresión, pero no fuera de ellas:
function create() {
var counter = 0;
return {
increment: function() {
counter++;
},
print: function() {
console.log(counter);
}
}
}
var c = create();
c.increment();
c.print(); // ==> 1El método charAt () devuelve el carácter en el índice especificado.
El método concat () devuelve el carácter en el índice especificado.
El método forEach () llama a una función para cada elemento de la matriz.
El método indexOf () devuelve el índice dentro del objeto String que llama de la primera aparición del valor especificado, o -1 si no se encuentra.
El método length () devuelve la longitud de la cadena.
El método pop () elimina el último elemento de una matriz y devuelve ese elemento.
El método push () agrega uno o más elementos al final de una matriz y devuelve la nueva longitud de la matriz.
El método reverse () invierte el orden de los elementos de una matriz: el primero se convierte en el último y el último en el primero.
El método sort () ordena los elementos de una matriz.
El método substr () devuelve los caracteres en una cadena que comienza en la ubicación especificada hasta el número especificado de caracteres.
El método toLowerCase () devuelve el valor de la cadena de llamada convertido a minúsculas.
El método toUpperCase () devuelve el valor de la cadena de llamada convertido a mayúsculas.
El método toString () devuelve la representación de cadena del valor del número.
Un selector de jQuery es una función que utiliza expresiones para encontrar elementos coincidentes de un DOM según los criterios dados. Simplemente puede decir que los selectores se usan para seleccionar uno o más elementos HTML usando jQuery. Una vez que se selecciona un elemento, podemos realizar varias operaciones en ese elemento seleccionado. Los selectores de jQuery comienzan con el signo de dólar y paréntesis - $ ().
La función de fábrica $ () es sinónimo de la función jQuery (). Entonces, en caso de que esté usando cualquier otra biblioteca de JavaScript donde $ sign esté en conflicto con otra cosa, puede reemplazar $ sign por el nombre de jQuery y puede usar la función jQuery () en lugar de $ ().
$ ('nombre-etiqueta') selecciona todos los elementos de tipo nombre-etiqueta en el documento. Por ejemplo, $ ('p') selecciona todos los párrafos <p> en el documento.
$ ('# some-id') selecciona el elemento único en el documento que tiene un ID de some-id.
$ ('. alguna-clase') selecciona todos los elementos del documento que tienen una clase de alguna clase.
$ ('*') selecciona todos los elementos disponibles en un DOM.
$ ('E, F, G') selecciona los resultados combinados de todos los selectores especificados E, F o G donde los selectores pueden ser cualquier selector de jQuery válido.
El método attr () se puede utilizar para obtener el valor de un atributo del primer elemento del conjunto coincidente.
El método attr (nombre, valor) se puede utilizar para establecer el atributo nombrado en todos los elementos del conjunto envuelto utilizando el valor pasado.
El método addClass (classes) se puede utilizar para aplicar hojas de estilo definidas en todos los elementos coincidentes. Puede especificar varias clases separadas por espacios.
El método removeAttr (nombre) se puede utilizar para eliminar un atributo de cada uno de los elementos coincidentes.
El método hasClass (clase) devuelve verdadero si la clase especificada está presente en al menos uno del conjunto de elementos coincidentes.
El método removeClass (class) elimina todas o las clases especificadas del conjunto de elementos coincidentes.
El método toggleClass (class) agrega la clase especificada si no está presente, elimina la clase especificada si está presente.
El método html () obtiene el contenido html (innerHTML) del primer elemento coincidente.
El método html (val) establece el contenido html de cada elemento emparejado.
El método text () obtiene el contenido de texto combinado de todos los elementos coincidentes.
El texto (val) establece el contenido de texto de todos los elementos coincidentes.
El método val () obtiene el valor de entrada del primer elemento coincidente.
El método val (val) establece el atributo de valor de cada elemento coincidente si se llama en <input> pero si se llama en <select> con el valor <option> pasado, la opción pasada se seleccionaría, si se llama en casilla de verificación o casilla de radio, entonces se marcarán todas las casillas de verificación y casilla de radio correspondientes.
El método de filtro (selector) se puede utilizar para filtrar todos los elementos del conjunto de elementos coincidentes que no coinciden con los selectores especificados. El selector se puede escribir utilizando cualquier sintaxis de selector.
El método eq (índice) reduce el conjunto de elementos coincidentes a un solo elemento.
El método is (selector) compara la selección actual con una expresión y devuelve verdadero, si al menos un elemento de la selección se ajusta al selector dado.
El método not (selector) elimina los elementos que coinciden con el selector especificado del conjunto de elementos coincidentes.
El método de corte (selector) selecciona un subconjunto de elementos coincidentes.
El método add (selector) agrega más elementos, emparejados por el selector dado, al conjunto de elementos emparejados.
El método andSelf () agrega la selección anterior a la selección actual.
El método children ([selector]) obtiene un conjunto de elementos que contienen todos los hijos inmediatos únicos de cada uno de los conjuntos de elementos coincidentes.
El método más cercano (selector) obtiene un conjunto de elementos que contienen el elemento principal más cercano que coincide con el selector especificado, incluido el elemento inicial.
El método contents () encuentra todos los nodos secundarios dentro de los elementos coincidentes (incluidos los nodos de texto), o el documento de contenido, si el elemento es un iframe.
El método end () revierte la operación 'destructiva' más reciente, cambiando el conjunto de elementos coincidentes a su estado anterior.
El método de búsqueda (selector) busca elementos descendientes que coincidan con los selectores especificados.
El siguiente ([selector]) obtiene un conjunto de elementos que contienen los próximos hermanos únicos de cada uno del conjunto de elementos dado.
NextAll ([selector]) busca todos los elementos hermanos después del elemento actual.
El método offsetParent () devuelve una colección jQuery con el padre posicionado del primer elemento coincidente.
El método principal ([selector]) obtiene el padre directo de un elemento. Si se llama a un conjunto de elementos, parent devuelve un conjunto de sus elementos principales directos únicos.
El método parent ([selector]) obtiene un conjunto de elementos que contienen los antepasados únicos del conjunto de elementos coincidentes (excepto el elemento raíz).
El método prev ([selector]) obtiene un conjunto de elementos que contienen los hermanos anteriores únicos de cada uno de los conjuntos de elementos coincidentes.
El método prevAll ([selector]) encuentra todos los elementos hermanos delante del elemento actual.
El método de hermanos ([selector]) obtiene un conjunto de elementos que contiene todos los hermanos únicos de cada uno de los conjuntos de elementos coincidentes.
El método css (nombre) devuelve una propiedad de estilo en el primer elemento coincidente.
El método css (nombre, valor) establece una propiedad de estilo única en un valor en todos los elementos coincidentes.
El método height (val) establece la altura CSS de cada elemento coincidente.
El método height () obtiene la altura calculada actual, en píxeles, del primer elemento coincidente.
El método innerHeight () obtiene la altura interna (excluye el borde e incluye el relleno) del primer elemento coincidente.
El método innerWidth () obtiene el ancho interno (excluye el borde e incluye el relleno) para el primer elemento coincidente.
El método offset () obtiene el desplazamiento actual del primer elemento coincidente, en píxeles, en relación con el documento.
El método offsetParent () devuelve una colección jQuery con el padre posicionado del primer elemento coincidente.
El método externalHeight ([margin]) obtiene la altura exterior (incluye el borde y el relleno de forma predeterminada) para el primer elemento coincidente.
El método outerWidth ([margin]) obtiene el ancho exterior (incluye el borde y el relleno por defecto) para el primer elemento coincidente.
El método position () obtiene la posición superior e izquierda de un elemento en relación con su padre desplazado.
El método width (val) establece el ancho CSS de cada elemento coincidente.
El método width () obtiene el ancho de píxeles calculado actual del primer elemento coincidente.
El método empty () elimina todos los nodos secundarios del conjunto de elementos coincidentes.
El método remove (expr) elimina todos los elementos coincidentes del DOM.
El método preventDefault () del objeto Event evita que el navegador ejecute la acción predeterminada.
El método isDefaultPrevented () del objeto Event devuelve si event.preventDefault () se llamó alguna vez en este objeto de evento.
El método stopPropagation () del objeto Event detiene la propagación de un evento a los elementos principales, lo que evita que los controladores principales sean notificados del evento.
El método isPropagationStopped () del objeto Event devuelve si event.stopPropagation () se llamó alguna vez en este objeto de evento.
El método stopImmediatePropagation () del objeto Event detiene la ejecución del resto de los controladores.
El método isImmediatePropagationStopped () del objeto Event devuelve si event.stopImmediatePropagation () se llamó alguna vez en este objeto de evento.
La función bind (type, [data], fn) vincula un controlador a uno o más eventos (como hacer clic) para cada elemento coincidente. También puede vincular eventos personalizados.
La función ready (fn) vincula una función para que se ejecute siempre que el DOM esté listo para ser atravesado y manipulado.
El método load (url, [data], [callback]) carga HTML desde un archivo remoto y lo inyecta en el DOM.
El método ajaxComplete (devolución de llamada) se puede utilizar para registrar una devolución de llamada que se ejecutará cada vez que se complete una solicitud AJAX.