学习目标
1.能够使用jQuery对象的遍历方法
2.能够使用jQuery全局的遍历方法
3.能够使用jQuery3.0的for-of遍历方法
4.能够使用jQuery的绑定与解绑方法
jquery数组的遍历
- 1: 原始遍历（普通for）将指定的代码重复执行指定的次数
- 2:jquery对象函数遍历（对象.each）
$("div").each(function(index,element){ }); - 3:jquery全局函数遍历（$.each） 重点!!!
$.each(数组的对象,function(index,elemen){})
4:jquery3.0新特性(增强for) 重点!!!
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>
jquery事件绑定和解绑
事件的绑定和解绑
<input id="btnId" type="button" onclick="clickFn()" value="点我,弹框"/>
- 方式1：在标签中写死
function clickFn(){} - 方式2：在程序中动态绑定，但是不能解绑
$("#btnId").click(function(){}); - 方式3：在程序中动态绑定，可以解绑
$("#btnId").on("click",function(){});
$("#btnId").on("mouseover",function(){});
这种绑定事件的方式可以解绑
$("#btnId").off("click");
$("#btnId").off("mouseover"); - jQuery元素对象.off(事件名称);//如果off不加参数，表示解除所有事件
<!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>
jquery事件切换(了解)
（1）逐个添加事件
需要几个事件，就天添加几次，每次是对象调用函数on
jquery对象.on("事件名"，函数)
jquery对象.on("事件名"，函数)
（2）链接方式
方法返回当前对象
jquery对象.on("事件名"，函数).on("事件名"，函数)
（3）切换方式
hover函数等于同时绑定鼠标移入，与移出函数
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>