La diferencia y la conexión entre JavaScript, jQuery y Ajax

Descripción
Breve resumen:
1. JS es un lenguaje front-end.
2. Ajax es una tecnología que proporciona un mecanismo de actualización asincrónico, que utiliza el intercambio de datos entre el cliente y el servidor en lugar de todo el documento de la página para lograr una actualización parcial de la página.
3. jQuery es un marco que encapsula JS para que sea más cómodo de usar. jQuery hace que el uso de JS y Ajax sea más conveniente

Metáfora de la relación:
si js se compara con la madera, entonces jquery es un tablero (producto semiacabado)

1.
La forma abreviada de JavaScript javaScript es JS, un lenguaje de scripting ampliamente utilizado en el desarrollo web del lado del cliente. A menudo se usa para agregar funciones dinámicas a páginas HTML (los programas escritos por él pueden incorporarse en páginas HTML o XML y verse directamente Interpretación y ejecución en el dispositivo).
Componentes:
Núcleo (ECMAScript), Modelo de objetos de documento (DOM), Modelo de objetos de navegador (BOM)

2. jQuery
jQuery es una biblioteca javaScript rápida y concisa, que permite a los usuarios procesar de manera más conveniente documentos HTML, eventos, realizar efectos de animación y proporcionar interacción AJAX para sitios web de manera conveniente.

3. Ajax
AJAX significa "JavaScript asincrónico y XML" (JavaScript asincrónico y XML). AJAX no es un acrónimo, sino un sustantivo creado por Jesse James Gaiiett. Se refiere a una tecnología de desarrollo web para la creación de aplicaciones web interactivas.

Contact
javaScript es un lenguaje de scripting utilizado para el desarrollo de clientes web. Ajax es una nueva tecnología basada en el lenguaje JS y que combina principalmente tres tecnologías de JS, CSS y XML. Es una tecnología de desarrollo web para la creación de aplicaciones web interactivas. jQuery es un marco JS, basado en el lenguaje JS, una biblioteca JS desarrollada integrando la tecnología Ajax, encapsulando las funciones de JS y Ajax, y proporcionando interfaces funcionales, simplificando enormemente la operación de Ajax y JS.

jQuery puede simplificar enormemente la escritura de programas JavaScript. Para usar jQuery, primero debe agregar una referencia a la biblioteca jQuery en la parte superior del código HTML, como:

//Cita

Los archivos de la biblioteca se pueden colocar localmente, o puede utilizar directamente los CDN de empresas conocidas (la ventaja de que los CDN cargan jquery). La ventaja es que los CDN de estas grandes empresas son más populares y es probable que los usuarios hayan almacenado en caché cuando visitan otros sitios web antes de visitar su sitio web. En el navegador, puede acelerar la velocidad de apertura del sitio web. Otro beneficio es obvio, el ahorro de ancho de banda de tráfico del sitio web.
http://code.jquery.com/jquery-1.6.min.js oficial de jQuery

1 Elemento de posicionamiento
JS
document.getElementById ("abc")

jQuery
$ ("# abc") Posicionamiento por id
$ (". abc") Posicionamiento por clase
$ ("div") Posicionamiento por etiqueta
$ (this) Posicionamiento del elemento actual

Cabe señalar que el resultado devuelto por JS es este elemento, y el resultado devuelto por jQuery es un objeto JS. En el siguiente ejemplo, se asume que se ha posicionado el elemento abc.

La sintaxis de jQuery selecciona elementos HTML y realiza ciertas operaciones en los elementos seleccionados.
Sintaxis básica: $ (selector) .action () El
signo de dólar define jQuery
selector (selector) "consultar" y "buscar" elemento HTML
La acción de jQuery () realiza operaciones en el elemento
Ejemplo:
$ (this) .hide () - Ocultar el elemento actual
$ ("p"). hide () - ocultar todo

Elemento
$ ("p.test"). Hide () - oculta todos los que tienen class = "test"

Elemento
$ ("# prueba"). Hide () - oculta el elemento con id = "prueba"

Este es un texto.

Este es un texto.

Agrega una clase al primer elemento div

Este es el contenido del archivo de muestra ("demo_test.txt"):

jQuery AJAX es una gran característica.

Este es un texto del párrafo.

Cargue el contenido del elemento con id = "p1" en el archivo "demo_test.txt" al especificado

En el elemento:
$ ("# div1"). Load ("demo_test.txt # p1");

Evento personalizado de Jquery
Este evento ocurre cuando se carga todo el árbol DOM
$ (documento) .ready (nombre de la función (params) { }); // abreviatura $ (nombre de la función (params) { }); // abreviatura $ (función ( ) { });

Uso de comillas simples y comillas dobles
Los tipos de comillas deben ser inconsistentes dentro y fuera (intente usar doble exterior y sencillo interior)
console.log ("look'come 'here"); // Resultado: look'come 'aquí
casos especiales donde las comillas internas y externas tienen el mismo tipo, use \ para prohibir la compilación
console.log (' mira'come 'aquí'); // Resultado: mira'come 'aquí

------------------- Corregir
<input type = "button" οnclick = "alert (" pop up ")" /> ---------- ------Incorrecto

Pero, ¿por qué el carácter de escape \ en JS no tiene ningún efecto?
Debido a que este código todavía está bajo la jurisdicción de HTML, el carácter de escape debe ser HTML en lugar de javascript:
------------------- correcto

Enlace de evento
$ (function () { // Evento uno $ ('. Body-tab .header-btn'). Click (function () {

        });
        事件一  由外向内：body   .body-tab   .header-btn
        $('body').on('click', '.body-tab .header-btn', function () {

        })
    });

})

Método jQuery load () El método
jQuery load () es un método AJAX simple pero poderoso.
El método load () carga datos del servidor y coloca los datos devueltos en el elemento seleccionado.
Sintaxis:
$ (selector) .load (URL, datos, devolución de llamada);

El parámetro de devolución de llamada opcional especifica la función de devolución de llamada que se permitirá después de que se complete el método load (). La función de devolución de llamada puede establecer diferentes parámetros:
responseTxt-contiene el contenido del resultado cuando la llamada es exitosa
statusTXT-contiene el estado de la llamada
xhr-contiene el objeto XMLHttpRequest
El siguiente ejemplo mostrará un cuadro de aviso después de que se complete el método load (). Si el método load () tiene éxito, mostrará "¡Contenido externo cargado correctamente!", Y si falla, mostrará un mensaje de error:
Ejemplo
$ ("botón"). Haga clic en (función () { $ ("# div1 "). load (" Demo_test.txt ", function (responseTxt, statusTxt, xhr) { if (statusTxt ==" success ") alert (" ¡Contenido externo cargado correctamente! "); if (statusTxt ==" error ") alert ("Error:" + xhr.status + ":" + xhr.statusText); }); });

Método jQuery $ .get () El método
$ .get () solicita datos del servidor a través de una solicitud HTTP GET.
Sintaxis:
$ .get (URL, devolución de llamada); El
parámetro de URL requerido especifica la URL que desea solicitar.
El parámetro de devolución de llamada opcional es el nombre de la función que se ejecutará después de que la solicitud sea exitosa.
El siguiente ejemplo usa el método $ .get () para recuperar datos de un archivo en el servidor:
Ejemplo
$ ("botón"). Click (function () { $ .get ("hello / test.json", function (data , estado) { alerta ("Datos:" + datos + "\ nEstado:" + estado); }); });

Método jQuery $ .post () El método
$ .post () envía datos al servidor a través de una solicitud HTTP POST.
Sintaxis:
$ .post (URL, datos, devolución de llamada);

El parámetro de URL requerido especifica la URL que desea solicitar.
El parámetro de datos opcional especifica los datos que se enviarán con la solicitud.
El parámetro de devolución de llamada opcional es el nombre de la función que se ejecutará después de que la solicitud sea exitosa.
El siguiente ejemplo usa $ .post () para enviar datos junto con la solicitud:
Ejemplo
$ ("botón"). Click (function () { $ .post ("/ try / ajax / demo_test_post.php", { nombre: " Tutorial para novatos ", url:" http://www.runoob.com " }, función (datos, estado) { alerta (" Datos: \ n "+ datos +" \ nStatus: "+ estado); }); } );

jQuery.parent (expr), busque el nodo principal , puede pasar expr al filtro, como $("SPAn-").PAR\; \&\; ltEn-T\left(\right)opersona$ ("span"). Parent (. "Class")
jQuery.parents (expr), similar jQuery.parents (expr) , pero es Find all ancestor elements, no limitado al elemento padre
jQuery.children (expr), devuelve todos los nodos secundarios, este método solo devolverá nodos secundarios directos, no todos los nodos descendientes
jQuery.contents (), devuelve todo lo siguiente contenido, incluidos los nodos y el texto. La diferencia entre este método y children () es que, incluido el texto en blanco, también se devolverá como un objeto jQuery, children () solo devolverá el nodo
jQuery.prev (), el nodo hermano anterior, no todos los nodos hermanos
jQuery. prevAll (), devuelve todos los nodos hermanos anteriores
jQuery.next (), devuelve el siguiente nodo hermano, no todos los nodos hermanos
jQuery.nextAll (), devuelve todos los nodos hermanos posteriores
jQuery.siblings (), devuelve nodos hermanos, independientemente de
jQuery. find (expr), es completamente diferente de jQuery.filter (expr):

jQuery.filter () es filtrar una parte de la colección de objetos jQuery inicial, y

El resultado de retorno de jQuery.find (), no habrá contenido en el conjunto inicial, como $("p").find("span")，是从<pag>YuanSuabiertocomienza\; abuscar<span>,Y\; lomismoen$ ("p span")