Jquery es una biblioteca de Javascript creada para diseñar o simplificar HTML, CSS, AJAX, DOM, así como el manejo de eventos para el desarrollo web. Es un software de código abierto y gratuito para todos. Más de 10 millones de sitios web usan jquery. Jquery simplemente convierte una línea de JavaScript en métodos que se pueden llamar en una sola línea de código. Estos complementos están implementados.
Enfoque: en Jquery Plug-in hay un código que se necesita en un archivo javascript estándar. Los complementos ayudan a proporcionar diferentes métodos que se pueden usar con diferentes métodos de la biblioteca jquery.
- Crear un método
jQuery.fn.methodName = methodDefinition;
donde .methodname es el nombre de un método y
methoddefinition define un método - Para obtener un código perfecto o compatible, use this.each, que se usa para actuar sobre un conjunto de elementos coincidentes.
- El prefijo debe concluir con .js.
Sintaxis: Aquí está la sintaxis de un archivo de complemento
(function($){
$.fn.myFunction(settings){
settings = $.extend({setting_A: 'default_A', setting_B: 'default_B'...});
...code away!
};
}(jQuery);
Ejemplo 1: aquí hay un ejemplo de complemento.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-3.4.1.js"
type="text/javascript">
</script>
<script src="custom.js"
type="text/javascript">
</script>
</head>
<script>
(function($) {
$.fn.myFunction(settings) {
settings = $.extend({
setting_A: 'default_A',
setting_B: 'default_B'...
});
...code away!
};
}(jQuery);
</script>
<body>
<h1>GeeksForGeeks</h1>
<p>A Computer Portal For Geeks</p>
<button> Click To Get Started </button>
<script>
$(document).ready(function() {
$('button').click(function() {
alert('My first jquery code');
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2:
El siguiente método es un ejemplo de tener un método de advertencia. Solo eche un vistazo a la sintaxis del archivo plugin.js
(function($) {
$.fn.targetBlank = function () {
alert('Working');
}
}) (jQuery);
Ahora eche un vistazo al ejemplo que muestra cómo vincular el complemento con HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
type="text/css"
href="css/style.css">
</head>
<script>
(function($) {
$.fn.targetBlank = function() {
alert('Working');
}
})(jQuery);
</script>
<body>
<a href="https://www.google.co.in/"
target="_blank">Google</a>
<script type="text/javascript"
src="jquery-3.4.1.js"></script>
<script type="text/javascript"
src="plugin.js"></script>
<script type="text/javascript"
src="ext.js"></script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pranavduggal221999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA