on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
在JQuery中on的使用方法多样，在这里简单列举一些比较常见的使用方法
1：在使用on方法绑定单个事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src = '../js/jquery-1.10.1.min.js'></script>
<style>
div{
height:100px;
width:100px;
background:red;
}
</style>
<script>
$(function(){
//第一种方法 on（）传的两个参数
//第一个参数 绑定的事件
// 第二个参数 函数方法
$("button").on("click",function(){
$("#div").css("background","pink");
})
})
</script>
</head>
<body>
<div id = "div"></div>
<button>点击</button>
</body>
</html>
这里将html代码也列出，当下次使用on方法时，只改变js中的代码，html代码和css代码不再列出
未点击button原效果图
当点击button效果图
这里将背景颜色有红色换成了粉色
第二种方法：
on方法中，调用函数
<script>
$(function(){
function resize(){
//先设置好一个参数 在on()中进行调用
$("#div").css("width",200);
}
$("button").on("click",resize)//调用resize函数
})
</script>
点击button后的效果
原div宽度发生了变化
第三种
on()方法 绑定多个事件
<script>
$(function(){
$("button").on({
click : function(){ $("#div").css("background","yellow") }, //绑定点击事件
mouseover : function(){ $("#div").css("height",200)}//绑定鼠标划入事件
})
})
</script>
点击button和鼠标划入div后的效果图
背景颜色和div的高度都发生了变化
第四中：
运用on()方法，实现委托事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src = '../js/jquery-1.10.1.min.js'></script>
<style>
</style>
<script>
$(function(){
//on()中传入了三个参数
//第二个事件为当点击ul点中为li时 li背景颜色发生改变
//**JQuery和js可以同时使用，但不能混合使用**
$("ul").on("click","li",function(){
this.style.background = "red";
})
})
</script>
</head>
<body>
<ul>
<li>委托事件</li>
<li>委托事件</li>
</ul>
</body>
</html>
原效果图
当点击ul上的li后，效果图
注意：JQuery和js可以同时使用，但不能混合使用
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
