¿Hay una manera fácil de convertir el código jQuery a JavaScript??
Aunque hay muchas similitudes entre JQuery y JavaScript, también existen varias diferencias en su sintaxis y funcionalidad. Para eso, primero, comprenda lo que el código jQuery está tratando de hacer. Luego, utilice los métodos o atributos alternativos de Vanilla JavaScript.
Este blog discutirá la conversión del código jQuery a JavaScript.
Cómo convertir el código jQuery a JavaScript?
Para convertir el código jQuery a JavaScript, es esencial comprender qué está haciendo el código y qué métodos jQuery se están utilizando. Luego, use los métodos alternativos en JavaScript, como el "ps"Utilizado en jQuery para seleccionar elementos mientras está en JavaScript, para seleccionar elementos"documento.QuerySelector ()" o "QuerySelectorAll ()Se utilizan métodos.
Comprendamos el proceso de conversión con la ayuda de un ejemplo.
Ejemplo
Aquí, tenemos un código jQuery que cambia el color del texto y muestra un texto explicativo en un botón Haga clic. Para eso, el documento HTML contiene dos botones, texto y un vacío
Etiqueta donde se mostrará el nuevo texto en el botón Haga clic:
Tutorial de JavaScript
Mientras trabaja con jQuery, es obligatorio agregar la biblioteca jQuery en la etiqueta del documento HTML:
En la etiqueta, se usa el código dado:
$ (documento).Ready (function ()$ ('#myDiv').buscar ('botón: primero').hacer clic (function ()
ps.texto').CSS ('color', 'azul');
$ ('#Mensaje').texto ('Soy el primer botón que establecerá el color del texto en azul');
);
$ ('#botón').próximo().hacer clic (function ()
ps.texto').css ('color', 'verde');
$ ('#Mensaje').texto ('Soy el segundo botón que establecerá el color del texto en verde');
);
);
En el código anterior
- Primero, usa el "listo()Función "que se ejecutará cuando el DOM esté completamente cargado. Con frecuencia se usa para asegurarse de que el DOM esté completamente cargado antes de la ejecución de cualquier código JavaScript que interactúe o manipula los elementos DOM.
- Luego, acceda al elemento DIV usando su ID asignada "$ ('#myDiv')"Y llama al"encontrar()Método "Para encontrar el primer botón, adjunte un evento de clic en él utilizando el"hacer clic()Método donde se cambiará el color del texto y se mostrará un mensaje de texto debajo del botón en el botón Haga clic.
- Luego, para encontrar el otro botón en el Div, hemos usado la jQuery "próximo()"Método y aplicado la misma funcionalidad.
Como puede ver que la salida muestra un mensaje de texto en el clic del botón que explicará el trabajo y, al mismo tiempo, se cambia el color del texto existente:
Ahora, aquí, convertiremos el código jQuery anterior en JavaScript sin cambiar la salida. Puede usar diferentes enfoques para la conversión, pero utilizaremos los métodos JavaScript como alternativa a los métodos jQuery.
Primero, accederemos al botón usando el "documento.QuerySelector ()" método:
botón var = documento.QuerySelector ('botón');Entonces, adjunte un "hacer clic"Evento con la ayuda del"addEventListener ()" método. Para cambiar el color del texto, en JavaScript, use el "estilo"Atributo mientras en jQuery usamos el"CSS ()" método. Del mismo modo, para el texto, use el "innerhtml"Propiedad en JavaScript mientras el"texto()El método se utiliza en la jQuery:
botón.addEventListener ('Click', function ()documento.QuerySelector ('.texto').estilo.color = "azul";
documento.QuerySelector ('#Mensaje').innerhtml = 'Soy el primer botón que establecerá el color del texto en azul';
);
Para el segundo botón, usaremos el "nextelementible"Atributo en JavaScript, mientras que en jQuery hemos usado el"próximo()" método:
botón.nextelementible.addEventListener ('Click', function ()documento.QuerySelector ('.texto').estilo.color = "verde";
documento.QuerySelector ('#Mensaje').textContent = 'Soy el segundo botón que establecerá el color del texto en verde';
);
Producción
JQuery Métodos o atributos alternativos en JavaScript
En la tabla dada, puede ver los métodos y atributos alternativos de la jQuery:
| jQuery | Javascript | |
|---|---|---|
| Ejecutar una función cuando el DOM esté listo | $ (documento).Ready (function () // código .. ); | documento.addEventListenerm ("DomContentLoaded", function () // código .. ); |
| Para seleccionar todo el HTML | $ ("Html") | documento.QuerySelector (selector) |
| Para seleccionar todo el cuerpo HTML | $ ("Cuerpo") | documento.cuerpo |
| Agregue una clase a un elemento HTML | $ elemento.AddClass (nombre de clase) | elemento.Lista de clase.Agregar (nombre de clase) |
| Retire una clase a un elemento HTML | $ elemento.RemoveClass (nombre de clase) | elemento.Lista de clase.eliminar (nombre de clase) |
| Alternar una clase a un elemento HTML | $ elemento.toggleclass (nombre de clase) | elemento.Lista de clase.Toggle (nombre de clase) |
| Compruebe si un elemento HTML contiene una clase | $ elemento.Hasclass (nombre de clase) | elemento.Lista de clase.tiene (nombre de clase) |
| Haga clic en el evento | ps.botón").hacer clic (función (evento) ); | documento.QuerySelector (".botón") .addEventListener ("Click", (Event) => ); |
| Agregar estilo CSS | $ Div.CSS (color: "amarillo") | div.estilo.color = "amarillo" |
| Seleccionando todos los elementos | ps .') | documento.QuerySelectorAll (); |
| Seleccione el primer elemento | .primero(); | documento.QuerySelector (); |
| Encontrar elementos | .encontrar(); | documento.QuerySelector (); o documento.QuerySelectorAll (); método |
| Selección del elemento infantil | .niños(); | Parentnode.niños; |
| Seleccionando el elemento principal | .padre(); | Nodo.parentnode; |
| Seleccionar hermanos | .hermanos(); | Nodo.parentnode.QuerySelectorAll (": no (#elem)"); |
| Seleccione el siguiente hermano | .próximo(); | NondocumentTypechildnode. nextElementBling; |
| Seleccione un hermano anterior | .prev (); | NondocumentTypechildnode. elementos anteriores; |
| Encuentra el elemento coincidente más cercano | .más cercano (); | Elemento.más cercano (); |
| Obtener atributo | .attr ('att-name'); | Elemento.getAttribute ('att-name'); |
| Agregar un nuevo elemento infantil | .append ('html-string'); | Nodo.añadir Niño(); |
| Eliminar todos los nodos infantiles | .vacío(); | Elemento.reemplazarChildren (); |
| Obtener o establecer contenido HTML | .html (); | Elemento.innerhtml; |
| Ocultar elemento | .esconder(); | Elementcssinlinestyle.estilo.display = 'ninguno'; |
| Elemento de exhibición | .espectáculo(); | Elementcssinlinestyle.estilo.display = "; |
| Agregar oyente de eventos | .en(); | EventTarget.addEventListener ('evento', functionName); |
| Eliminar el oyente de eventos | .apagado(); | EventTarget.RemoVentListener ('Event', functionName); |
| Recorrer un objeto, matriz o colección | .cada(); | Nodo.prototipo.para cada(); |
Se trata de convertir el código jQuery a JavaScript.
Conclusión
No hay una manera fácil de conversión de código jQuery a JavaScript. Simplemente puede conocer las diferencias entre ambos y usar los métodos integrados de vainilla JavaScript que son iguales a los métodos jQuery. Este blog discutió la conversión del código jQuery a JavaScript.