php jquery点击事件,JQuery中的事件

Jquery中的事件

注意在头部引入Jquery

涉及到 事件的添加，删除：on();off();

/*  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('点我试试看').on('click',function () {

$(this).toggle(2000)

})

$('div').css({

'display':'none'

}).show(3000)

//删除事件用off()无参数则表示删除该对象上面的所有事件

//$('div').off();

$('img').off('mouseenter')//删除指定事件

$('img').off('mouseleave')

})

刘亦菲

周慧敏

高圆圆