一、jQuery添加事件的方式-1
重点：
jQuery事件处理方式-1
语法：jQuery对象.事件函数名([数据对象],callback);
[数据对象]：可选择参数，是一个对象数据。可以在事件处理函数中访问该数据。
补充：jQuery添加事件不会产生覆盖。
<div>hello</div>
<script>
var $div = $("div");
//没有数据实参的写法。
$div.click(function (e) {
//都获得了div中的内容。e是事件对象。
console.log (this.innerHTML);
console.log (e.currentTarget.innerHTML);
console.log (e.target.innerHTML);
console.log ($(this).html());
});
var obj = {
name:"empty",
age:20
};
//带有数据的写法
$div.click({
name:"empty",
age:20
},function (e) {
//都获得了div中的内容。e是事件对象。
// 获得实参数据。
console.log (e.data);
console.log (e.data.name);
console.log (e.data["age"]);
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
二、jQuery添加事件的方式-2
jQuery事件添加方式-2
使用函数：bind 。对当前对象绑定指定的事件和事件处理函数。
1：给一个事件绑定一个事件处理函数。
语法：jQuery对象.bind(eventName，callback);
2: 给多个事件绑定一个事件处理函数。
语法：jQuery对象.bind(“eventName1 eventName2”，callback);
3: 多个事件绑定多个事件处理函数。
语法：jQuery对象.bind(对象);
对象：事件名和事件处理函数的集合。
<script src="js/jquery-1.12."></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div>
hello
</div>
<script>
//bind - 1
$("div").bind("click",{a:"a",b:"b"},function (e) {
console.log (e.data);
console.log ("你点击了我！");
});
//bind - 2
$("div").bind("mouseover mouseout" ,function (e) {
console.log ("你进入了我的世界，然后又离开了我的世界，我允许你进入我的世界，但是不能再我的世界进进出出！");
});
//bind - 3
$("div").bind({
mouseover:function () {
console.log ("正如我轻轻的来！");
},
mouseout:function () {
console.log ("轻轻的我走了！");
}
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
三、jQuery添加事件的方式-3
jQuery事件添加方式-3
事件代理：delegate
语法：jQuery对象.delegate(被代理的元素,事件名称，数据，callback)
<ul>
<li>11111</li>
<li>22222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<script>
$("ul").delegate("li","click",{a:"a",b:"b"},function (e) {
console.log (e.data);
console.log (e.target.innerHTML);
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
四、jQuery添加事件的方式-4(重点)
***重点：
on方法添加
1：一个事件绑定一个函数
语法：jQuery对象.on(eventName,[selector，data,] callback)
2：多个事件绑定一个函数。
语法：jQuery对象.on(eventNames,[selector，data,] callback)
3: 多个事件绑定多个函数。
语法：jQuery对象.on(对象)
参数：事件名称和事件处理函数的集合。
4: 替代代理事件。
语法：jQuery对象.on(eventNames,selector，[data,] callback)
<script src="js/jquery-1.12."></script>
<style>
div{
width: 200px;
height: 200px;
border: solid 1px;
}
</style>
</head>
<body>
<div>hello</div>
<ul>
<li>11111</li>
<li>22222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<script>
//方法-1
$("div").on("click",{a:"a",b:"b"},function (e) {
console.log ($(this).html());
console.log (e.data);
})
//方法-2
$("div").on("mouseover mouseout",function (e) {
console.log (e.type);//mouseover and mouseout
})
//方法-3
$("div").on({
mouseover:function () {
console.log ("轻轻的我又来了！");
},
mouseout:function () {
console.log ("轻轻的我离开了！");
}
});
//替代代理
$("ul").on("click","li",function (e) {
console.log (e.target.innerHTML);
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
五、jQuery添加事件的方式-5
事件添加方式：hover方法。
作用：专门用于mouseenter和mouseleave事件添加的函数。
语法：jQuery对象.hover(callback1,callback2);
callback1: 给mouseenter事件绑定的函数。
callback2：给mouseleave 事件绑定的函数。
<script src="js/jquery-1.12."></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>
</div>
<script>
$("div").hover(function () {
console.log ("over");
},function () {
console.log ("out");
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
六、jQuery添加事件的方式-6
添加事件方法：one
作用：用于给元素对象添加单次响应事件的函数。
事件触发响应一次之后就被删除了。
语法：jQuery对象.one(eventName,[selector,data ],callback)
<script src="js/jquery-1.12."></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>
hello
</div>
<script>
$("div").one("click",{a:"a",b:"b"},function (e) {
console.log (e.data);
console.log ("touch me");
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
七、删除事件的方式-unbind
删除事件方法：unbind() 方法
1: jQuery对象.unbind(); 删除对象上的所有的事件。
2：jQuery对象.unbind(eventNames)；//针对某些添加的方式不能删除。
参考下面的代码注释。
<script src="js/jquery-1.12."></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div><span>hello</span></div>
<button>删除事件</button>
<script>
var $div = $("div");
//单独删除可以。
// $(function (e) {
// ("事件方式-1");
// });
//单独删除可以。
// $("mouseenter",{a:"a",b:"b"},function (e) {
// ("事件方式-bind");
// });
//单独删除可以。
// $("span","click",function (e) {
// ("事件方式-delegate");
// });
// 单独删除可以。
// $("click",function (e) {
// ("事件方式-on");
// });
//删除成功了
$div.hover(function () {
console.log ("over");
},function () {
console.log ("out");
});
$("button").click(function () {
//删除全部测试 ok
// $();
//删除指定的事件。
$div.unbind("mouseenter mouseleave");
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
八、 删除事件方法-undelegate()方法
删除事件方法：undelegate();
用于删除代理事件的方法。
语法：代理jQuery对象.undelegate();
<ul>
<li>11111</li>
<li>22222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<button>删除</button>
<script src="js/jquery-1.12."></script>
<script>
$("ul").delegate("li","click",{a:"a",b:"b"},function (e) {
// ();
console.log (e.type);
});
$("ul").delegate("li","mouseover mouseout",{a:"a",b:"b"},function (e) {
console.log (e.type);
});
$("button").click(function () {
//删除所有 ok
// $("ul").undelegate();
//删除部分 ok
$("ul").undelegate("click mouseover");
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
九、 删除事件方法-off()方法(重点)
重点：
删除事件方法：off() 方法
1: jQuery对象.off(); 删除对象上的所有的事件。
2：jQuery对象.off(eventNames)；
<script src="js/jquery-1.12."></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div><span>hello</span></div>
<button>删除事件</button>
<script>
var $div = $("div");
//单独删除可以。
// $(function (e) {
// ("事件方式-1");
// });
//单独删除可以。
// $("mouseenter",{a:"a",b:"b"},function (e) {
// ("事件方式-bind");
// });
// //单独删除可以。
// $("span","click",function (e) {
// ("事件方式-delegate");
// });
// // 单独删除可以。
// $("mouseenter",function (e) {
// ("事件方式-on");
// });
//可以删除
$div.hover(function () {
console.log ("over");
},function () {
console.log ("out");
});
$("button").click(function () {
//测试删除所有的事件 OK
// $();
//单独测试
$div.off("mouseenter mouseleave");
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
十、 jQuery的事件对象
jQuery的事件对象的捕获。
1:jQuery的事件对象以事件绑定的处理函数的形参方式获得。
而且已经解决了兼容问题。
2:jQuery的事件对象的属性和js原生的事件对象的属性一致。
jQuery的事件对象的属性和js原生的事件对象的属性的使用也一致。
3: 关于在事件处理函数中直接使用的this。是一个js对象。代表当前元素。
- 1
<script src="js/jquery-1.12."></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>hello</div>
<a href="">百度</a>
<script>
//原生js的事件对象的捕获。
// = function (e) {
// e = e || ;
// (e);
// }
//jQuery的事件对象的捕获。
$ ("div").click (function (e) {
console.log (e.currentTarget);
console.log (e.target);
});
$ (document).keydown (function (e) {
console.log (e.keyCode);
});
//默认行为阻止的原生js处理
// var link = ("a");
// = function (e) {
// ? () : = false;
// }
//jQuery阻止默认行为的兼容处理。
$("a").click(function (e) {
e.preventDefault();
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
十一、动画函数-显示和隐藏元素
动画函数：
hide：隐藏当前元素
jQuery对象.hide(time,callback);
time: 动画执行的时间，毫秒。
注意：完全隐藏之后，元素不占位。
show：显式当前元素
jQuery对象.show(time,callback);
toggle：，切换状态的函数。
jQuery对象.toggle(time,callback);
补充：参数可以省略。
time：省略，瞬间完成。
callback：省略，动画完毕之后，什么都不做。
<script src="js/jquery-1.12."></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border: solid 1px;
}
</style>
</head>
<body>
<div>hello</div>
<button>hide</button>
<button>show</button>
<button>toggle</button>
<script>
const TIME = 3000;
//给三个btn添加单击事件
$("button").eq(0).click(function () {
var timer = setInterval(function () {
console.log ($("div")[0]);
},100);
$("div").hide(TIME,function () {
clearInterval(timer);
});
});
$("button").eq(1).click(function () {
var timer = setInterval(function () {
console.log ($("div")[0]);
},100);
$("div").show(TIME,function () {
clearInterval(timer);
});
});
$("button").eq(2).click(function () {
var timer = setInterval(function () {
console.log ($("div")[0]);
},100);
$("div").toggle(TIME,function () {
clearInterval(timer);
});
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
十二、动画函数-滑动方法
动画函数：
slideDown：元素下滑动，到最大的高度。完全展示。
jQuery对象.slideDown(time,callback);
time: 动画执行的时间，毫秒。
slideUp：元素上滑动，直到高度为0。
jQuery对象.slideUp(time,callback);
slideToggle：元素上滑动和下滑动的切换
jQuery对象.slideToggle(time,callback);
<script src="js/jquery-1.12."></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border: solid 1px;
}
</style>
</head>
<body>
<div>hello</div>
<button>slideDown</button>
<button>slideUp</button>
<button>slideToggle</button>
<button>连续的动画</button>
<script>
const TIME = 3000;
//给三个btn添加单击事件
$("button").eq(0).click(function () {
$("div").slideDown(TIME,function () {
$("div").slideUp(TIME);
})
});
$("button").eq(1).click(function () {
$("div").slideUp(TIME);
});
$("button").eq(2).click(function () {
$("div").slideToggle(TIME);
});
//连续动画
$("button").eq(3).click(function () {
$("div").hide(TIME).show(TIME).slideUp(TIME).slideDown(TIME);
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
十三、动画函数-淡入淡出
动画函数：
fadeIn：淡入函数。
语法：jQuery对象.fadeIn(time,callback);
fadeOut: 淡出函数。
fadeToggle：切换淡入淡出的。
fadeTo: 在指定的事件内，将透明度变换为指定的值。
语法: jQuery对象.fadeTo(time,toOpacity,callback);
该方法设置的透明度会影响其他的三个函数。
注意：fadeOut执行完毕之后，不占位。
<script src="js/jquery-1.12."></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border: solid 1px;
}
</style>
</head>
<body>
<div>hello</div>
<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeToggle</button>
<button>fadeTo</button>
<script>
const TIME = 1500;
//给三个btn添加单击事件
$("button").eq(0).click(function () {
$("div").fadeIn(TIME,function () {
console.log ("over");
});
});
$("button").eq(1).click(function () {
$("div").fadeOut(TIME,function () {
console.log ("over");
});
});
$("button").eq(2).click(function () {
$("div").fadeToggle(TIME,function () {
console.log ("over");
});
});
$("button").eq(3).click(function () {
$("div").fadeTo(TIME,0.5,function () {
console.log ("over");
});
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
十四、动画函数-自定义动画
animate方法
作用：用来创建自定义动画的方法。
格式：jQuery对象.animate(参数1，参数2，参数3，参数4)；
参数说明：
参数1：通常是一个对象，使用键值对封装了一些css的样式信息。
说明：animate修改样式值对数值型的敏感。对于颜色类似的不能操作。
参数2：动画执行需要的时间，单位是毫秒。
该参数也可以使用一些特殊的字符串：
fast(200ms) normal(400ms),slow(600ms).如果使用了其他的非法的字符串
就代表使用了normal。
参数3：表示执行的过程中的状态：
只支持两个值。linear（匀速的）、swing（慢-快-慢 默认的）
参数4：回调函数，动画执行完毕之后执行的函数。
<script src="js/jquery-1.12."></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid;
position: fixed;
left: 0px;
top: 0px;
text-align: center;
line-height: 200px;
}
button{
width: 50px;
position: fixed;
right: 100px;
bottom: 60px;
}
</style>
</head>
<body>
<div>hello</div>
<button>start</button>
<script>
$("button").click(function () {
$("div")
.animate(//1 down
{
top:"300px",
borderRadius:"50%",
backgroundColor:"blue",
fontSize:"50px"
},
3000,
"linear",
function () {
console.log ("over");
}
).animate(//2 right
{
left:"300px",
borderRadius:"25%",
backgroundColor:"green",
fontSize:"10px"
},
3000,
"swing",
function () {
console.log ("over");
}
).animate(//3 up
{
top:"0px",
borderRadius:"50%",
backgroundColor:"blue",
fontSize:"60px"
},
3000,
"linear",
function () {
console.log ("over");
}
).animate(//4 left
{
left:"0px",
borderRadius:"0%",
backgroundColor:"blue",
fontSize:"20px"
},
3000,
"linear",
function () {
console.log ("over");
}
)
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
十五、动画函数-stop
stop 方法：
作用：停止动画的
格式：jQuery对象.stop(参数1，参数2)
参数说明：
参数1：是一个布尔值，默认值为false。
false：立即停止当前动画，进行下次动画。
true：立即结束当前动画，清空动画队列。
参数2：是一个布尔值。默认值为false。
false：立即停止当前动画，开始执行下一次动画。
true：立即完成当前动画，并完成队列中的其他的动画。
<script src="js/jquery-1.12."></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid;
position: fixed;
left: 0px;
top: 0px;
text-align: center;
line-height: 200px;
}
#start{
width: 50px;
position: fixed;
right: 100px;
bottom: 100px;
}
#stop{
width: 50px;
position: fixed;
right: 100px;
bottom: 70px;
}
</style>
</head>
<body>
<div>hello</div>
<button id="start">start</button>
<button id="stop">stop</button>
<script>
$("#start").click(function () {
$("div")
.animate(//1 down
{
top:"300px",
borderRadius:"50%",
backgroundColor:"blue",
fontSize:"50px"
},
3000,
"linear",
function () {
console.log ("over");
}
).animate(//2 right
{
left:"300px",
borderRadius:"25%",
backgroundColor:"green",
fontSize:"10px"
},
3000,
"swing",
function () {
console.log ("over");
}
)
});
// * false：立即停止当前动画，进行下次动画。
// * true：立即结束当前动画，清空动画队列。
// *
// * 参数2：是一个布尔值。默认值为false。
// * false：立即停止当前动画，开始执行下一次动画。
// * true：立即完成当前动画，并完成队列中的其他的动画
$("#stop").click(function () {
//瞬间完成了第一个动画，动画结束，不再执行后续的动画。
// $ ("div").stop(true,true);
//直接以当前状态结束动画，不再执行后续的动画。
// $ ("div").stop(true,false);
//瞬间完成第一个动画，继续执行后续的动画。
// $ ("div").stop(false,true);
//停止当前动画，进行下一个动画
$ ("div").stop(false,false);
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
十六、动画函数-stop
1：jQuery对象的方法：each方法。
作用：对当前元素中的内容进行遍历。
语法：jQuery对象的方法.each(function(index,ele){})
index: 元素下标，从0开始。
ele：是每个下标对应的元素。js对象。
2：each方法。是对象 $ 的静态方法。
作用：用来遍历指定的对象。
语法：$.each(obj,function(index,ele){});
obj: 被遍历的对象。可以是js或者是jQuery对象。
<ul>
<li>111111111</li>
<li>222222222</li>
<li>3333333333</li>
<li>444444</li>
<li>5555555</li>
</ul>
<script src="js/jquery-1.12."></script>
<script>
//1
$("li").each(function (index,ele) {
console.log (index);
//获得每个li元素中的内容。
console.log (ele.innerHTML);
});
//2
console.log ("-----------");
var lis = document.querySelectorAll("li");
//实参可以是js或者是jQuery对象。
$.each($(lis),function (index,ele) {
console.log (index);
//获得每个li元素中的内容。
console.log (ele.innerHTML);
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27