jQuery---事件、动画

事件(return false阻止冒泡)

• 鼠标

• click 单击对象(按下松开) //单击事件：//鼠标按下的时刻鼠标指针在被选区域内 鼠标松开鼠标指针也在被选区域内
• dblclick 双击对象 //双击事件：//鼠标第一次按下的时候和第二次松开的时候在同一被选区域
• mousedown 在对象上按下时 //按下事件：//鼠标按下时，鼠标指针在被选区域内
• mouseup 按下,在对象上松开时 //松开事件://鼠标按下再松开时，鼠标指针在被选区域内
• mousemove 鼠标在对象上移动时 //鼠标移动事件//由像素和时间一起决定
• mouseover 鼠标指针穿过被选元素区域触发,穿过其子元素区域也触发 //若在父元素触发了 又进入子元素 子元素仍然会触发
• mouseout 鼠标指针离开被选元素或者子元素区域
• mouseenter 鼠标指针穿过被选元素区域 /若在父元素触发了 则进入子元素不会再触发 即若父元素触发了再进入子元素不会再冒泡//不管怎样 只触发一次 即子元素不会再冒泡
• mouseleave 鼠标指针离开被选元素区域

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

• keypress 键盘按键被按下并松开。
• keydown 键盘按键被按下。
• keyup 键盘按键被松开。

• 表单

• focus节点获得焦点后触发
• blur节点失去焦点后触发

• focusin将要获得焦点时触发，发生在focus事件之前
• focusout将要失去焦点时触发，发生在blur事件之前
• change内容改变时//光标失去后 内容改变 change事件触发

• reset 表单重置时
• submit 表单提交时
• dom节点中的oninput事件

<script>

$("#text")[0].oninput= function (e) {

if($("#box").children().length<this.value.length){

var p= $("<p></p>");

p.text(this.value);

$("#box").append(p);

}

if($("#box").children().length>this.value.length){

$("#box").children().last().remove();

}

}

</script>

• 加载(图片文档等)

• //dom里的window.onload jq:$(function) $(document).ready $(document).load(funcition)
• load 完成加载 //当对象加载了才进行执行后面的代码
• abort 加载被中断
• error 加载发生错误

• 悬浮

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

<script>

var timer1= null,timer2=null;

$("#btn").hover(function() {

clearInterval(timer1);

if($("#left-box").width()>=50){

clearInterval(timer1);

}

timer1 = setInterval(function () {

$("#left-box").css("width",function(index,old) {

return $(this).width()+10+"px";

})

},50)

},function () {

// clearInterval(timer2);

if($("#left-box").width()<=0){

clearInterval(timer2);

}

timer2 = setInterval(function () {

$("#left-box").css("width",function(index,old) {

return $(this).width()-10+"px";

})

},50)

})

</script>

事件对象

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

• 鼠标

• 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都绑定了一个事件

jq(“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事件的对象.

<script>

//多事件方法相同

$("div").bind("click mousedown mouseleave",function() {

console.log(111);

});

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

$('div').bind(

{ "click":function() {},

"mousedown":function() {}

});

//只触发一次之后就不再触发了

$("div").one("dblclick",function() {

});

//多元素绑定事件

$("li").bind("click",function () {

console.log(this.innerHTML);

});

//delegate 绑定父亲的点击事件 事件由儿子来执行

$("ul").delegate("li","click",function() {

console.log(this.innerHTML);

})

//on（事件，选择器，方法）

$("ul").on("click","li",function() {

console.log(this.innerHTML);

})

</script>

<script>

$("body").on("mouseover","div",function() {

this.style.border="5px solid black"

})

$("body").on("mouseleave","div",function() {

this.style.border="0px solid black"

})

</script>

事件解绑

对应的unbind undelegate off

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

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

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

事件触发

事件的触发有两种方式

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

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

①事件名调用时不传参数(不传回调函数):

$(‘#div’).click()//相当于用户已经点击了一次

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

动画

• 隐藏

• hide(sd,fn)隐藏元素
• show(sd,fn)显示元素
• toggle(sd,fn)隐藏显示开关(来回掉用)
• //参数都是可选的,sd是速度可填slow fast normal 或数字(ms),fn是回调函数
• //jq(“p”).hide(2000,function(){alert(666)})
• 淡入淡出

• fadeIn(sd,fn)//淡入已经隐藏的元素
• fadeOut(sd,fn)//淡出已经显示的元素
• fadeToggle(sd,fn)//淡出入开关
• fadeTo(sd,alpha,fn)//自定义透明度

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

• 滑动隐藏

• slideUp(sd,fn)//向上滑动隐藏
• slideDown(sd,fn)//向下滑动显示
• slideToggle(sd,fn)//上下滑动隐藏显示开关
• //参数都是可选的,sd是速度可填slow fast normal 或数字(ms) fn是回调函数
• 自定义//帧动画（资源）,补间动画（样式）

• 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
• })
• <script>

$("button").hover(hide,show)

function hide() {

$("#div1").hide(2000,function() {

console.log(111)

})

}

function show() {

$("#div1").show(2000,function() {

console.log(2222);

})

}

$("button").hover(function() {

$("#div1").toggle(2000,function() {

console.log(666)

})

})

//滑动隐藏

$("button").hover(slideUp,slideDown);

function slideUp() {

//向上滑动隐藏

$("#div1").slideUp(1000,function() {

console.log(111);

})

}

function slideDown() {

//想下滑动显示

$("#div1").slideDown(1000,function() {

console.log(122);

})

}

//上下滑动隐藏、显示开关

$("button").hover(slideToggle);

function slideToggle() {

$("#div1").slideToggle(1000,function() {

console.log(123)

})

}

//自定义//帧动画，补间动画

//元素的属性在事件段内动态改变的过程

//一个动画队列

$("div").animate({width:"200px"});

$("div").animate({width:"200px"});

</script>

• 停止属性改变

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