contenido
3. iteración implícita de jQuery
6. Caso del menú desplegable de Sina
7. Enfoque exclusivo de jQuery
8. Estuche boutique de ropa Taobao
9. Programación en cadena jQuery
1. Selector básico de jQuery
$( "选择器" ) //里面选择器直接写CSS选择器即可，但是要加引号| nombre | uso | describir |
| selector de identificación | $("#id") | Obtener el elemento con el ID especificado |
| selector de clase completa | ps | unir todos los elementos |
| seleccionador de clase | $(".clase") | Obtener elementos de la misma clase |
| Selector de etiquetas | $("div") | Obtener todos los elementos de la misma etiqueta de clase |
| selector de unión | $("div,p,li") | seleccione varios elementos |
| selector de intersección | $("li.actual") | elemento de intersección |
<body>
<div class="nav"></div>
<script>
$(function() {
$(".nav");
})
</script>
</body>Obtener un elemento con jQuery es así de simple
2. Selector de nivel
| nombre | uso | describir |
| selector de descendencia | $("ul>li"); | Use el signo > para obtener elementos en el nivel padre-hijo; tenga en cuenta que los elementos en el nivel nieto no se obtendrán |
| selector de descendientes | $("ul li"); | Use espacios, que representan selectores descendientes, para obtener todos los elementos Ii debajo de uI, incluidos los nietos, etc. |
3. iteración implícita de jQuery
Hablemos de cómo establecer estilos con jquery:
$('div').css('属性','值')
Ahora que tenemos cuatro cuadros div azul cielo, ¿qué debemos hacer para que el color de fondo sea rojo?
Métodos anteriores de manipulación de elementos DOM:
var div = document.querySelectorAll('div');
for(var i = 0;i<div.length;i++)
{
div[i].style.backgroundColor = 'red';
}práctica de jquery:
$(function() {
$('div').css("backgroundColor","red");
})Después de aprender la oración directa, jquery es realmente fragante, incluso se guarda el bucle for, debido a la iteración implícita
Entonces, ¿qué es exactamente la iteración implícita?
El proceso de atravesar elementos DOM internos (almacenados en forma de pseudoarreglo) se denomina iteración implícita.
Comprensión simple: recorrer todos los elementos coincidentes y ejecutar el método correspondiente, en lugar de volver a repetir, simplificando nuestras operaciones y facilitándonos las llamadas.
4. Selector de filtros jQuery
| gramática | uso | describir |
| :primero | $('li:primero') | obtener el primer elemento li |
| :ultimo | $('li:último') | obtener el último elemento i |
| :eq(índice) | $("li:eq(2)") | Entre los elementos li obtenidos, seleccione el elemento con número de índice 2, y el número de índice comienza desde 0. |
| :impar | $("li: impar") | Entre los t elementos, seleccione el elemento con un número de índice impar |
| :incluso | $("li:par") | Entre los elementos Ii obtenidos, seleccione el elemento con un número de índice par |
5. método de filtro jQuery
| gramática | uso | ilustrar |
| padre() | $("li").padre(); | Buscar padre (padre de nivel más cercano) |
| niños (selector) | $("ul").niños("li") | Equivalente a $("ul>li"), el nivel más cercano (pro-son) |
| encontrar (selector) | $("ul").find("li"); | Equivalente a $("ul li"), selector de descendientes |
| hermanos (selector) | $(".primero").hermanos("li"); | Encuentra nodos hermanos, excluyéndose a sí mismo |
| nextAll([expr]) | $(".primero").siguienteTodo() | Encuentra todos los elementos hermanos después del elemento actual |
| prevtAll([expr]) | $(".último").prevTodo() | Encuentra todos los elementos hermanos antes del elemento actual |
| tieneClase(clase) | $('div').hasClass("protegido") | Comprueba si el elemento actual contiene una clase específica, si es así, devuelve verdadero |
| eq(índice) | $("li").eq(2); | Equivalente a $("li:eq(2)"), el índice comienza desde 0 |
6. Caso del menú desplegable de Sina
Código de muestra:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
// 鼠标经过
$(".nav>li").mouseover(function() {
// $(this) jQuery 当前元素 this不要加引号
// show() 显示元素 hide() 隐藏元素
$(this).children("ul").show();
});
// 鼠标离开
$(".nav>li").mouseout(function() {
$(this).children("ul").hide();
})
})
</script>
</body>
</html>7. Enfoque exclusivo de jQuery
Si hay cuatro cuadros div negros ahora, y queremos darnos cuenta de en qué cuadro se hace clic, qué cuadro se volverá rojo, ¿qué debemos hacer?
En nuestro js nativo, si un ciclo for agrega un evento de clic a cada cuadro, y luego un ciclo for primero borrará todos los estilos, es decir, exclusivos, y luego cambiará el color del cuadro actual a rojo.
Luego, echemos un vistazo a cómo lo hace js, que se puede implementar de manera muy simple a través de la iteración implícita:
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("div").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "red");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("div").css("background", "");
});
})8. Estuche boutique de ropa Taobao
Darse cuenta del efecto:
analisis de CASO:
- 核心原理:鼠标经过左侧盒子某个小li ,就让内容区盒子相对应图片际,其余的图片隐藏。
- 需要得到当前小li的索引号,就可以显示对应索引号的图片
- jQuery得到当前元素索引号$(this).index()
- 中间对应的图片,可以通过eq(index)方法去选择
- 显元素show() 隐藏元素hide()
$(function() {
// 1. 鼠标经过左侧的小li
$("#left li").mouseover(function() {
// 2. 得到当前小li 的索引号
var index = $(this).index();
console.log(index);
// 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
$("#content div").eq(index).show();
// 4. 让其余的图片（就是其他的兄弟）隐藏起来
$("#content div").eq(index).siblings().hide();
})
})9.jQuery链式编程
在我们的第七小节里有这样一段代码:
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("div").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "red");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("div").css("background", "");
});
})第二步是让当前元素变化背景颜色
第三步是让当前元素的兄弟去掉背景颜色
那我们可不可以简写呢？
链式编程是为了节省代码量，看起来更优雅:
$(this).css('background','red').siblings().css('background','');这样代码是不是优雅多了