El artículo de hoy es el tercer artículo de jQuery API. Estoy de buen humor hoy, porque he superado los 300 fans. Espero que todos los codificadores front-end puedan navegar sin problemas en el camino de la programación y la escritura, y que todos obtengan la certificación como tan pronto como sea posible. Bien, pongámonos manos a la obra, este artículo lo llevará al mundo de la programación en cadena, que también es una gran ventaja de jQuery, que puede mejorar aún más la legibilidad y la simplicidad del código, permitiéndole ingresar a un código Realm de nivel superior. mundo.
Otro es la descripción adicional de la modificación del estilo. Ya no es solo un método css. Nos pondremos en contacto con la clase de operación de estilo y más métodos de operación de estilo en este artículo.
------- A continuación, entremos en el mundo del código -------
Directorio de artículos:
¿Qué es la programación en cadena? :
El principio de realización de la programación en cadena:
Ejemplo de programación en cadena:
Dos: la operación de modificación de estilo.
1. El parámetro solo escribe el nombre del atributo
2. El parámetro es el valor del atributo y el nombre del atributo, separados por comas
Dos: clase de operación para modificar el estilo.
Tiene tres métodos principales de clase de estilo:
2.removeClass('nombre de clase')
3. toggleClass('nombre de clase')
Tres: La diferencia entre la operación de clase de jQuery y la operación nativa de nombre de clase:
Uno: programación en cadena
¿Qué es la programación en cadena? :
La programación en cadena y la iteración implícita son las dos características principales de jQuery. De hecho, la programación en cadena se puede imaginar literalmente. Está encadenada como una cadena. En el campo de la programación, es para separar varios códigos. ¿Qué quiere decir escribir juntos? ? Sí, así es, recuerde nuestro caso de pensamiento exclusivo, lo que hicimos en ese momento fue que el primer css estableció el elemento en el que se hizo clic en sí mismo, y el segundo css estableció el elemento hermano del elemento en el que se hizo clic. De hecho, podemos usar la idea de programación en cadena aquí Al conectar dos líneas de código, se puede ver que la ventaja de la programación en cadena es reducir la redundancia de código y aumentar la simplicidad.
El principio de realización de la programación en cadena:
Después de que el objeto actual llame al primer método, devolverá un objeto jQuery, que puede continuar llamando a otros métodos, que es el principio básico de implementación de la programación en cadena.
Ejemplo de programación en cadena:
Tomemos el botón de pensamiento exclusivo como ejemplo y comparemos la cantidad de redundancia de código sin programación en cadena:
//不使用链式编程
<script>
$('button').click(function(){
$(this).css('background','red')
$(this).siblings('button').css('background','')
})
</script>
//使用链式编程
<script>
$('button').click(function(){
$(this).css('background','red').siblings('button').css('background','')
})
</script>Dos: la operación de modificación de estilo.
Uno: método de operación css
Hay varias formas de operar css:
- El parámetro escribe solo el nombre del atributo: el resultado devuelto es el valor del atributo
- El parámetro es el valor del atributo y el nombre del atributo, separados por comas.
- Los parámetros están en forma de objetos, escritos entre corchetes, en forma de pares clave-valor, para facilitar la configuración de múltiples conjuntos de estilos.
1. El parámetro solo escribe el nombre del atributo
El resultado devuelto es el valor de la propiedad.
<div></div>
<script>
$('div').click(function(){
console.log($(this).css('backgroundColor'));
})
</script>
2. El parámetro es el valor del atributo y el nombre del atributo, separados por comas
El resultado es producir el efecto de estilo que desea modificar (aquí está rojo antes de hacer clic)
<body>
<div></div>
<script>
$('div').click(function(){
$(this).css('backgroundColor','pink');
})
</script>
</body>
3. Los parámetros tienen forma de objetos para facilitar la configuración de múltiples conjuntos de estilos.
Tenga en cuenta que el estilo está descargado entre llaves, escrito en forma de pares clave-valor, y los atributos compuestos deben usar nombres de mayúsculas y minúsculas.
<body>
<div></div>
<script>
$('div').click(function(){
$(this).css({'backgroundColor':'pink',
'border':'2px solid'});
})
</script>
</body>
Dos: clase de operación para modificar el estilo.
Equivalente a classList y className de js nativo
Tiene tres métodos principales de clase de estilo:
- addClass('nombre de la clase'): agrega el nombre de la clase
- removeClass('classname'): elimina el nombre de la clase
- toggleClass('classname'): cambiar el nombre de la clase
1.addClass('nombre de clase')
La función es agregar el nombre de la clase, aquí se agrega la clase actual después de hacer clic
<style>
div{
width: 300px;
height: 300px;
background-color: rgb(255, 146, 146);
}
.current{
background-color: rgb(0, 160, 246);
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div></div>
<script>
$('div').click(function(){
$(this).addClass('current')
})
</script>Después de hacer clic, el div tiene más nombres de clase actuales
2. removeClass('nombre de la clase')
La función es borrar el nombre de la clase. Haga clic aquí para borrar el nombre de la clase original.
<style>
.current{
width: 300px;
height: 300px;
background-color: rgb(0, 160, 246);
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div class="current"></div>
<script>
$('div').click(function(){
$(this).removeClass('current')
})
</script>
</body>Se eliminó el nombre de clase actual del div después de hacer clic
3. toggleClass('nombre de clase')
Este método en realidad puede lograr un efecto de cambio de nombre de clase. De hecho, determina si existe tal nombre de clase, lo elimina si existe y lo agrega si no existe.
div{
width: 300px;
height: 300px;
background-color: rgb(255, 146, 146);
}
.current{
width: 300px;
height: 300px;
background-color: rgb(0, 160, 246);
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div class="current"></div>
<script>
$('div').click(function(){
$(this).toggleClass('current')
})
</script>
</body>Después de hacer clic, alternará entre las dos clases. Si hay una actual, se eliminará. Si no, se agregará el nombre de la clase.
Tres: La diferencia entre la operación de clase de jQuery y la operación nativa de nombre de clase:
El className original sobrescribe el nombre de la clase original, mientras que el método de clase de jQuery (addClass, etc.) agrega el nombre de la clase a la clase original.