jQuery(3)__jQuery基础<事件>

事件(returnfalse阻止冒泡)

鼠标//基础好的:123次点击,右键点击

click 单击对象(按下松开)

dblclick 双击对象

mousedown 在对象上按下时

mouseup 按下,在对象上松开时

mousemove 鼠标在对象上移动时

mouseover 鼠标指针穿过被选元素区域触发,穿过其子元素区域也触发

mouseout 鼠标指针离开被选元素或者子元素区域

mouseenter 鼠标指针穿过被选元素区域

mouseleave 鼠标指针离开被选元素区域

 

键盘:焦点在哪里哪个控件的键盘事件才触发

keypress  键盘按键被按下并松开。

keydown 键盘按键被按下。      

keyup        键盘按键被松开。

 

表单

focus节点获得焦点后触发

blur节点失去焦点后触发

 

focusin将要获得焦点时触发，发生在focus事件之前

focusout将要失去焦点时触发，发生在blur事件之前

change内容改变时

//input

      

reset 表单重置时

submit 表单提交时

 

加载(图片文档等)

load 完成加载  

abort加载被中断

error       加载发生错误

 

悬浮

hover//注:hover(fn1,fn2)  hover事件要求有两个回调函数,分别是移入和移除,只写一个回调函数时,两个状态都触发同一个函数

事件对象

事件触发时会传入回调函数一个事件对象,这个对象的属性包含了事件触发时的一些信息

鼠标

altKey 鼠标事件发生时，是否按下alt键,返回一个布尔

ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔

metaKey 鼠标事件发生时，是否按下windows/commond键,返回一个布尔

shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔

clientX，clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素

screenX，screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素

键盘

altKey，ctrlKey，metaKey，shiftKey返回一个布尔值，表示是否按下对应的键

key属性返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名。比如，按下Ctrl+a，则返回a。如果无法识别键名，则返回字符串Unidentified

绑定事件mouseleave(fn)

 

回调函数返回值为false时阻止冒泡

 

①

jq(“button”).click(fn)

jq(“button”).mouseenter(fn)

jq(“button”).

jq(“button”).click(fn).mouseenter(fn).mouseleave(fn)

 

②bind(“events”,fn);//多事件用空格隔开

jq(“button”).bind(“click  mouseenter mouseleave”,fn)

 

③不同的事件想触发不同的方法,传一个对象进去

jq(“button”).bind({“click”:fn,”mouseenter”:fm,”mouseleave”:fo})

 

④触发一次one(“event”,fn)

jq(“button”).one(“click”:fn)

多元素绑定事件

①原始的//每个li都绑定了一个事件

(“li”).bind(“click”,function(){alert(jq(this).html())})

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

 

②代理//只给ul(一定要绑父亲)绑定了事件(冒泡)

jq(“ul”).delegate(“li”,”click”,function(){alert(jq(this).html())})

 

③前面所有的方式都忘掉,用这种:on(“events”,”selector”,fn)

jq(“ul”).on(“click”,”li”,function(){alert(jq(this).html())})

//ul 是on方法第二个参数li的爸爸,on第一个参数是事件,第二个参数是选择器,第三个参数是回调,回调里面的this关键字是个指针,指向触发click事件的对象.

 

事件解绑

对应的unbind   undelegate     off

例子:jq(“ul”).on(“click  mouseenter”,”li”,function(){alert(jq(this).html())})

    jq(“ul”).off(“click”)

现象:鼠标移入触发,点击却不触发

事件触发

事件的触发有两种方式

1.真事件触发:真的用鼠标点了

2.假事件触发:用代码让事件触发(2种方式):

①事件名调用时不传参数(不传回调函数):$(‘#div’).click()

②$(‘#div’).trigger(‘click’)

动画

1.隐藏

hide(sd,fn)隐藏元素

show(sd,fn)显示元素

toggle(sd,fn)隐藏显示开关(来回掉用)

//参数都是可选的,sd是速度可填slow fastnormal 或数字(ms),fn是回调函数

//jq(“p”).hide(2000,function(){alert(666)})

2.淡入淡出

fadeIn(sd,fn)//淡入已经隐藏的元素

fadeOut(sd,fn)//淡出已经显示的元素

fadeToggle(sd,fn)//淡出入开关

fadeTo(sd,alpha,fn)//自定义透明度

//参数都是可选的,sd是速度可填slow fastnormal或数字(ms),alpha是透明度,fn是回调函数

3.滑动隐藏

 slideUp(sd,fn)//向上滑动隐藏

 slideDown(sd,fn)//向下滑动显示

 slideToggle(sd,fn)//上下滑动隐藏显示开关

//参数都是可选的,sd是速度可填slow fastnormal 或数字(ms) fn是回调函数

4.自定义//帧动画,补间动画

animate({属性},sd,fn)//动画

//要让元素实现动画,必须设置定位

//参数:{}必填,sd可选动画时间,fn可选,回调函数

//属性必须用驼峰命名法写,不能用原始的css属性:margin-left改为marginLeft

动画队列,队列按照顺序依次执行:

       jq("button").click(function(){

             jq(".div").animate({width:'200px'});//队列1

             jq(".div").animate({width:'2000px'});//队列2

             jq(".div").animate({width:'200px'});//队列3

            })

5.停止属性改变

jq(".div").stop(bool,bool)//停止动态改变属性的现象:比如动画 滑动(参数:都可选布尔值,第一个是否停止所有队列,第二个是否立即执行完所有效果)