0
点赞
收藏
分享

微信扫一扫

Day10JavaWeb【Jquery进阶】each函数 ***


学习目标

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>


举报

相关推荐

0 条评论