objetivo de aprendizaje
1. Capaz de usar el método transversal de objetos jQuery
2. Capaz de usar el método transversal global jQuery
3. Capaz de usar el método transversal jQuery3.0 para-of
4. Capaz de usar métodos de vinculación y desvinculación jQuery
recorrido de la matriz jquery
- 1: el recorrido original (normal para) repite el código especificado el número de veces especificado
- 2: recorrido de la función del objeto jquery (object.each)
$("div").each(function(index,element){ }); - 3: recorrido de la función global jQuery ($ .each) ¡¡¡Importante !!!
$.each(数组的对象,function(index,elemen){})
4: nuevas funciones de jquery3.0 (mejoradas para) focus !!!
for(li of liEles){
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
var liEles = $("#city li");
//1:-------------原始遍历（普通for）-----------------
/*
for(var i=0; i<liEles.length;i++){
alert($(liEles[i]).html());
}
*/
//2:-------------jquery对象函数遍历-----------------
//jquery对象.each(function(index,element){});
/*
function 函数时每一次遍历时都会执行
index:是每一次遍历的索引
element:是遍历时数组中的每一个元素对象 liEles[i]
*/
/*
liEles.each(function (i,element) {
alert(i + "----"+ $(element).html())
});
*/
//3:------------- jquery的全局函数遍历-----------------(重点)
// $.each(jquery对象,function(index,element){});
/*
$.each(liEles,function (index,element) {
alert(index + "----"+ $(element).html())
});
*/
//4:------------- jquery3.0新特性遍历(增强for)-----------------(重点)
// java中增强for: for( 数组中元素的类型 变量: 数组的名字){}
// jquery中增强for: for(变量 of 数组的名字){}
// for(element of liEles){
// alert($(element).html());
// }
for (element of liEles) {
alert($(element).html());
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
Enlace y desvinculación de eventos jquery
Vinculación y desvinculación de eventos
<input id="btnId" type="button" onclick="clickFn()" value="点我,弹框"/>
- Método 1: escriba muerto en la etiqueta
function clickFn(){} - Método 2: enlazar dinámicamente en el programa, pero no se puede desvincular
$("#btnId").click(function(){}); - Método 3: enlace dinámico en el programa, puede desvincular de
$("#btnId").on("click",function(){});
$("#btnId").on("mouseover",function(){});
esta manera los eventos vinculantes se pueden desvincular
$("#btnId").off("click");
$("#btnId").off("mouseover"); - jQuery element object.off (nombre del evento); // Si off no agrega parámetros, significa cancelar todos los eventos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btnId3").on("click",function () {
alert();
});
$("#btnId4").on("click",function () {
//解绑
/*
如果off加参数，表示解绑的是某一个事件，
如果off不加参数，表示解除所有事件
*/
$("#btnId3").off("click");
})
});
</script>
</head>
<body>
<input id="btnId3" type="button" value="点我-jquery绑定" />
<input id="btnId4" type="button" value="点我-解绑" />
</body>
</html>
cambio de evento jquery (entender)
(1) Agregue eventos uno por uno. Si se
necesitan varios eventos , agregue varias veces al día, cada vez que el objeto llame a la función en
jquery对象.on("事件名"，函数)
jquery对象.on("事件名"，函数)
(2) El método del
método de enlace devuelve el objeto actual
jquery对象.on("事件名"，函数).on("事件名"，函数)
(3) La
función de desplazamiento del método de conmutación es igual a vincular la función de entrada y salida del mouse al mismo tiempo
jquery对象.hover(函数,函数) 参1 处理移入 参2处理移出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1:----------------原始方式----------------
/*
$("#myDiv").on("mouseover",function () {
$(this).css("backgroundColor","green");
});
$("#myDiv").on("mouseout",function () {
$(this).css("backgroundColor","blue");
});
*/
//2:----------------链式方式----------------
$("#myDiv").on("mouseover",function () {
$(this).css("backgroundColor","green");
}).on("mouseout",function () {
$(this).css("backgroundColor","blue");
});
//3:----------------切换方式----------------
/*
$("#myDiv").hover(function () {
$(this).css("backgroundColor","green");
},function () {
$(this).css("backgroundColor","blue");
});
*/
});
</script>
</head>
<body>
<div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色，
移出回复红色</div>
</body>
</html>