jQuery学习笔记

Posted 2020-10-04

jQuery中的事件和动画

 

jquery中的事件

• 加载DOM

两者等价但有细微区别

 $(document).ready(function(){//编写代码}) 在DOM完全就绪时就可以被调用。可重复使用

简写  $(function(){//...｝) 或者 $().ready(function(){//...}) 

$(window).load(function(){//编写代码}) 是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行，即javascript此时才可以访问网页中的任何元素。会自动覆盖。

• 事件绑定

 bind(type[.data].fn); 调用格式

type事件类型参数：blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error或者自定义事件

data:可选参数 ：作为event.data属性值传递给事件对象的额外数据对象

fn参数：用来绑定的处理函数

• 合成事件

1.hover()方法 用于模拟光标悬停事件，代替bind("mouseenter")和bind("mouseleave")

 $("selector").hover(enter,leave) 

2..toggle()方法 用于模拟鼠标连续点击事件，特殊用法：切换元素可见状态

 $("selector").toggle(fn1,fn2,...,fnN) 

3.高亮样式

 .highlight{background:#ff3300;} 

• 事件冒泡

事件对象 ： $("element").bind("click",function(event){//event:事件对象...}) 

当单击element元素时，事件对象被创建，这个对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁了。

停止事件冒泡：event.stopPropagation()

阻止默认行为：event.preventDefault()

同时对事件对象停止冒泡和默认行为：return false；

• 事件对象的属性

even.type 获取事件类型

event.stopPropagation() 停止事件冒泡

event.preventDefault() 阻止默认行为

even.target 获取到触发事件的元素

event.relatedTarget 访问事件相关元素

event.pageX / event.pageY 获取光标相对于页面的x坐标和y坐标

event.which 在鼠标单击事件中获取鼠标的左、中、右键；在键盘事件中获取键盘的按键（返回值1=鼠标左键；2=鼠标中键；3=鼠标右键）

event.metaKey 键盘事件中获取<ctrl>按键

• 移除事件

1.unbind()方法  $("selector").unbind(type.[data])

type 事件类型

data 要移除的函数

a）如果没有参数，则删除所有绑定的事件

b）如果提供了事件类型参数，则只删除该类型的绑定事件

c）如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除

2.one()方法  $("selector").one(type,[data].fn) 

当处理函数触发一次后，立即被删除。

• 模拟操作

1. 常用模拟  $("#btn").trigger("click");  当页面装载完毕后，就会立刻输出想要的效果

2.触发自定义事件  $("#btn").trigger(“myClick”) 

3.传递数据  $("#btn").trigger(type，[data]) 

• 其他用法

1.绑定多个事件类型  ("selector").bind("type1 type2",function(){//...}) 

2.添加事件命名空间  $("selector").bind("type.命名空间",function(){//...}) 

3.匹配所有不包含在命名空间内的click方法  $("selector").trigger("type!") 

---

 

jQuery中的动画

• show()方法和hide()方法

 $("selector").show()   $("selector").hide() 

1.没有参数时等同于通过设置display的样式

2.传入参数后，.show()和.hide()方法同时动画改变元素的width,height和透明属性

3.传入参数控制显隐速度，单位毫秒，如.show(600)，也可传入fast,normal,slow，fast为200毫秒，normal为400毫秒，slow为600毫秒）

•  fadeIn()方法和fadeOut()方法

 $("selector").fadeIn()  $("selector").fadeOut() 

只改变元素的不透明度

• slideUp()方法和sliDown()方法

 $("selector").slideUp()   $("selector").slideDown() 

只改变元素高度

• 自定义动画方法animate()

 $("selector").animate(params,speed,callback); 

a）params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}

b）speed:速度参数，可选

c）callback:在动画完成时执行的参数（即回调函数），可选

• 动画回调函数

因css()方法不会加入动画队列中，则会马上执行。如若要在动画最后改变selector的css，需要利用回调函数，回调函数适用于jQuery所有的动画效果方法。

• 停止动画和判断是否处于动画状态

1.停止元素的动画 结束当前动画，如队列中存在下一个动画则立即执行下一个动画

 $("selector").stop([clearQueue][,gotoEnd]) 

clearQueue参数为Boolean值（true or false），是否清空当前元素接下来尚未执行完的动画队列

gotoEnd参数为Boolean值（true or false），是否将正在执行的动画直接到达末状态

2.判断元素是否处于动画状态

if(!$("element").is(":animated")){ //判断元素是否正处于动画状态
 //如果当前没有进行动画，则添加新动画
}

• 其他动画方法

 toggle(speed,[callback]); 切换元素的可见状态，如元素隐藏则切换为可见，反之亦然

 slideToggle(speed,[callback]); 通过高度变化来切换元素的可见性

 fadeTo(speed,opacity,[callback])  把元素的不透明度以渐进方式调整到指定的值，如$("selector").fadeTo(600,0.2);以600毫秒速度将内容调整到20%透明度

• 动画方法概括

toggle() 用来代替hide()和show()
slideToggle() 用来代替slideUp()和slideDown()
animate() 可代替所有动画方法