jQuery学习笔记（三）

清疚 2021-12-20 11:19 365阅读 0赞

**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()** 可代替所有动画方法

转载于:https://www.cnblogs.com/BBeyes/p/7424413.html

jQuery学习笔记（三）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery整理笔记三----jQuery过滤函数

相关学习笔记（jQuery）

相关 jQuery-mobile 学习笔记之三（事件监听）

相关 JQuery学习笔记

相关 JQuery学习笔记

相关 jQuery基础学习（三）

相关 JQuery（学习笔记三）JQuery HTML操作

相关 jQuery学习笔记（三）

相关【jQuery】学习笔记（三）

相关【jQuery】学习笔记（二）