<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head><title>Jquery中的事件</title>
注意在头部引入Jquery
<script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
涉及到 事件的添加，删除：on();off();
<script>
/* ready()事件
1，页面dom结构创建完成后自动注册并调用
2，该事件可以在一个脚本可调用多次，其注册的事件一次执行
*/
// $(document).ready(function () {
//
// }；
/*1,事件绑定方法
绑定事件 ：on(event,function(){})
删除事件：off(event,function(){})
*/
//可以添加多个事件
$(document).ready(function(){
$('img').on('click',function(){//点击事件
$(this).css({
'border':'1px solid #333',
'box-shadow':'5px 5px 10px #888',
'border-radius':'100px'
})
}).on('mouseenter',function(){//鼠标移入事件
$(this).css({
'opacity':'0.5'
})
}).on('mouseleave',function(){//鼠标移出事件
$(this).css('opacity','0.9')
})
//2,绑定一次性方法：one()给jQuery对象绑定只执行一次的事件,用得不多
$('div').one('click',function(){
$(this).css({'background':'blue',
'width':'300px'
}).on('click','h3',function(){//将事件作用到 div 子元素h3 上面
$(this).css({
'font-size':'10px',
'color':'yellow',
'font-weight':'bold'
})
})
})
//事件切换toggle：切换：当前可见则变成隐藏，当前隐藏变为可见
/* $('div').css({
'width':'300px',
'height':'300px',
'background':'yellow'
}).toggle(5000)*/ //如果改为false则是隐藏 ，传入时间可控制小时速度
$('div').css({
width: '300px',
height:'300px',
background: 'yellow'
}).prepend('<button>点我试试看</button>').on('click',function () {
$(this).toggle(2000)
})
$('div').css({
'display':'none'
}).show(3000)
//删除事件用off()无参数则表示删除该对象上面的所有事件
//$('div').off();
$('img').off('mouseenter')//删除指定事件
$('img').off('mouseleave')
})
</script></head> <body> <div><img src="http://s8.sinaimg.cn/mw690/001lsdknzy6YIsvAuPR57&690" width="200" height="200"><h3>刘亦菲</h3></div> <div><img src="http://www.hinews.cn/pic/0/16/67/19/16671947_162736.jpg" width="200" height="200"><h3>周慧敏</h3></div> <div><img src="http://h.hiphotos.baidu.com/image/pic/item/2cf5e0fe9925bc318327857154df8db1ca1370e5.jpg" width="200" height="200"><h3>高圆圆</h3></div> </body> </html>
