Cómo entender el complemento Jquery
Antes de desarrollar un complemento jQuery, primero debemos saber dos preguntas: ¿Qué es un complemento jQuery? ¿Cómo utilizar el complemento jQuery?
La primera pregunta es que el complemento jQuery es un método utilizado para extender el objeto prototipo jQuery. En pocas palabras, el complemento jQuery es un método del objeto jQuery. De hecho, después de responder la primera pregunta, también conoce la respuesta a la segunda pregunta. La forma de utilizar el complemento jQuery es llamar al método del objeto jQuery.
Veamos primero un ejemplo: $("a").css("color", "red"). Sabemos que cada objeto jQuery contendrá los métodos de operación DOM definidos en jQuery. Aquí, necesitamos usar el método $ para seleccionar el elemento a y devolver un objeto jQuery del elemento a. jQuery. Entonces, ¿cómo obtiene el objeto jQuery estos métodos? De hecho, jQuery define internamente un objeto jQuery.fn. Si observa el código fuente de jQuery, puede ver jQuery.fn = jQuery.prototype, lo que significa que jQuery.fn es el prototipo de jQuery, y todos los métodos de manipulación DOM de jQuery están definidos en jQuery.fn. Los métodos DOM de jQuery se definen en el objeto jQuery.fn y luego el objeto jQuery hereda estos métodos a través del prototipo.
1. Complemento jQuery básico Después de comprender el conocimiento anterior, podemos escribir un complemento jQuery simple. Supongamos que necesito un complemento jQuery para cambiar el color del contenido de la etiqueta. Puedo implementar el complemento de la siguiente manera:
$.fn.changeStyle = function(colorStr){
this. css ("color",colorStr);
}Luego use el complemento de la siguiente manera:
$("p").changeStyle("red");Cuando el complemento -in se llama, el complemento Internamente, este es el objeto jQuery que actualmente está llamando al complemento, en cuyo caso cada etiqueta seleccionada usando el método $() tendrá el estilo de color restablecido usando el complemento css(), que se usa cuando se llama al método changeStyle() para restablecer el estilo de color.
2. Satisfacer las llamadas en cadena. Las llamadas en cadena de los complementos de jQuery son una de las funciones principales de jQuery. Los complementos comunes deben seguir el estilo de jQuery y cumplir con los requisitos de las llamadas en cadena.
El método para implementar llamadas en cadena también es muy simple:
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr
devuelve esto;
} Luego puedes usarlo para llamar en cadena a otros métodos:
$("p").changeStyle("red").addClass( " color rojo"); El punto clave de implementar llamadas en cadena es que una línea de código devuelve esto. Si el complemento agrega esta línea de código, luego de ejecutar el complemento, devolverá el objeto jQuery actual, y luego se puede usar en el complemento. Después, el método continúa llamando a otros métodos jQuery.
3. Evite que el símbolo $ contamine el complemento jQuery. Muchas bibliotecas js utilizan el símbolo $. Aunque jQuery puede ceder el uso del símbolo $ usando el método jQuery.noConflict(), si el complemento se define usando un objeto $.fn, el uso del complemento se verá afectado por otras bibliotecas js que usan la variable $. En este caso, podemos usar una función inmediata para empaquetar el complemento pasando parámetros. El formulario es el siguiente:
(function($){
$.fn.changeStyle = function(colorStr){
this.css("color ",colorStr );
return this;
}
}(jQuery)); dado que se utiliza una función de ejecución inmediata, $ en este momento solo pertenece al alcance de la función de ejecución inmediata, evitando así la contaminación del símbolo $.
4. Complemento jQuery que acepta parámetros Continuando con el ejemplo anterior, si también quiero agregar una función cuyo contenido sea tamaño de texto al elemento de etiqueta en el complemento, entonces puedo hacer esto. :
(función ($){
$.fn.changeStyle = función ( colorStr, fontSize){
this.css("color",colorStr ).css( "fontSize",fontSize+"px");
devuelve esto;
}
}(jQuery)); El método de paso es adecuado para parámetros. En casos excepcionales, si es necesario pasar más parámetros dentro del complemento, podemos definir un objeto de parámetro y luego colocar los parámetros que deben pasarse al complemento en el objeto de parámetro.
El complemento se define de la siguiente manera:
(function($){
$.fn.changeStyle = function(option){
this.css ("color", option.colorStr).css("fontSize", option.fontSize+"px"
devuelve esto;
}
} (jQuery)); Uso:
$("p").changeStyle({colorStr: "red",fontSize:14}); otro beneficio de pasar parámetros al complemento en forma de objetos Sí, podemos definir valores predeterminados para algunos parámetros dentro del complemento, por ejemplo:
(function($){
$.fn .changeStyle = function(option){
var defaultSetting = { colorStr："green",fontSize:12};
var settings = $.extend(defaultSetting,option);
this.css( "color",setting. colorStr).css("fontSize",setting.fontSize+"px");
devuelve esto;
}
}( jQuery)); El código anterior usa el método $.extend, que se usa para fusionar dos objetos. Este método se utiliza para fusionar dos objetos, es decir, asignar los valores de atributo existentes en el último objeto al objeto anterior. Para un uso específico, consulte aquí. El método $.extend también se utiliza para extender el propio objeto jQuery.
Cuando definimos un complemento de esta manera, si no pasamos fontSize, el contenido de la etiqueta del objeto jQuery que usa el complemento se establecerá en el valor predeterminado de 12 píxeles.
Uso:
$("p").changeStyle({colorStr: "red"});
Nota: Al definir el complemento para el objeto jQuery $("p").changeStyle({colorStr: "red"}) no se utiliza. p>Nota: Al definir los parámetros predeterminados para un complemento, asegúrese de escribir los parámetros predeterminados dentro del método del complemento para que los parámetros predeterminados tengan alcance dentro del complemento.
Resumen Además de usar $.fn para definir complementos como se mencionó anteriormente, existe otra forma de definir complementos, es decir, usar el método $.fn.extend.
Similar a lo siguiente:
// Tenga en cuenta el punto y coma antes del comienzo para mejorar la compatibilidad;(function($){
$.fn.extend({
cambiarEstilo:función(opción){
var configuración predeterminada = { colorStr："verde",fontSize:12}
configuración var = $.extend(configuración predeterminada, opción) <; /p>
this.css("color",setting.colorStr).fontSize",setting.fontSize+"px".fontSize+"px");
devuelve esto;
}
});
}(jQuery));//Aquí, Jquery se pasa como un parámetro real a la función anónima PS: método $.extend y ambos El método $.fn.extend se puede utilizar para extender jQuery. El método extend se puede utilizar para ampliar las funciones de jQuery. Al leer el código fuente de jQuery, podemos encontrar la diferencia esencial entre los dos métodos, es decir, el método $. El método extend extiende el objeto global jQuery. El método $.fn.extend es un método que extiende el objeto jQuery seleccionado por $selector. Por lo tanto, el método $.extend se usa generalmente para extender el método **** público de jQuery. generalmente se utiliza el método $.fn.extend. Definir complemento
.