learning target
1. Able to use jQuery object traversal method
2. Able to use jQuery global traversal method
3. Able to use jQuery3.0 for-of traversal method
4. Able to use jQuery binding and unbinding methods
traversal of jquery array
- 1: The original traversal (normal for) repeats the specified code for the specified number of times
- 2: jquery object function traversal (object.each)
$("div").each(function(index,element){ }); - 3: jQuery global function traversal ($.each) Important!!!
$.each(数组的对象,function(index,elemen){})
4: jquery3.0 new features (enhanced for) 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>
jquery event binding and unbinding
Event binding and unbinding
<input id="btnId" type="button" onclick="clickFn()" value="点我,弹框"/>
- Method 1: Write dead in the label
function clickFn(){} - Method 2: Dynamically bind in the program, but cannot unbind
$("#btnId").click(function(){}); - Method 3: Dynamic binding in the program, you can unbind
$("#btnId").on("click",function(){});
$("#btnId").on("mouseover",function(){});
this way of binding events can be unbound
$("#btnId").off("click");
$("#btnId").off("mouseover"); - jQuery element object.off(event name);//If off does not add parameters, it means to cancel all events
<!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 event switch (understand)
(1) Add events one by one. If
several events are needed, add several times a day, each time the object calls the function on
jquery对象.on("事件名"，函数)
jquery对象.on("事件名"，函数)
(2) Link method
method returns the current object
jquery对象.on("事件名"，函数).on("事件名"，函数)
(3) The switching method
hover function is equal to binding the mouse in and out function at the same time
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>