学习笔记jquery中的事件和动画

Posted 2020-06-25

---恢复内容开始---

jquery中的事件

• jquery用$(document).ready()方法来代替传统javascript的window.onload方法。

        window.onload方法在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后执行，通过 $(document).ready()方法注册的事件处理程序的DOM完全就绪时就可以被调用。此时，网页中的所有元素对jquery都是可以访问的。

•      load()方法会在元素的onload事件中绑定一个处理函数，若绑定给window对象，则会在所有内容（包括窗口、框架、对象和图像等）加载完毕后触发，若绑定给元素，则会在元素的内容加载完毕后触发。但根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

             例如

$(window).load(function(){
//编写代码
})

             等价于javascript中的以下代码

window.onload=function(){
//编写代码
}

• $(document).ready(function(){//代码})  可简写为  $(function(){//代码})  或  $().ready(function(){//代码})

事件绑定

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

语法：$(selector).bind(event,data,function)

         

替代语法：$(selector).bind({event:function, event:function, ...})

               

自 jQuery 版本 1.7 起，on()方法是向被选元素添加事件处理程序的首选方法。

 

合成事件

hover() 方法

规定当鼠标指针悬停在被选元素上时要运行的两个函数。jQuery 1.7 版本前该方法触发 mouseenter和mouseleave 事件。jQuery 1.8 版本后该方法触发mouseover和mouseout事件。

语法：$(selector).hover(inFunction,outFunction)

$( selector ).hover( handlerIn, handlerOut )；等于

$( selector ).mouseover( handlerIn ).mouseout( handlerOut );

如果只规定了一个函数，则它将会在 mouseover 和 mouseout 事件上运行。

$(selector).hover(handlerInOut)等于$( selector ).on( "mouseover mouseout", handlerInOut );

toggle()方法

当指定元素被点击时，在两个或多个函数之间轮流切换。

如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。

语法：$(selector).toggle(function1(),function2(),functionN(),...)

         toggle() 方法在 jQuery 版本 1.8 中被废弃，在版本 1.9 中被移除。

 

还存在一个名为 toggle() 的jquery效果方法。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

 

事件冒泡

在程序中使用事件对象，jquery代码如下

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

当单击“element”元素时，事件对象就被创建。事件处理函数执行完毕后，事件对象就被销毁。

 

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行

event.stopPropagation()方法：阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

event.preventDefault() 方法：阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。

                                              使用event.isDefaultPrevented()方法来检查指定的事件上是否调用了 preventDefault() 方法。

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false(return false;)。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。

 

事件对象的属性

event.type 属性返回哪种事件类型被触发。

event.target 属性返回哪个 DOM 元素触发了事件。这对比较 event.target 和 this 是非常有用的，以便判断事件是否因事件冒泡被处理。

event.relatedTarget 属性返回当鼠标移动时哪个元素进入或退出。

event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘。

event.pageY 属性返回鼠标指针的位置，相对于文档的上边缘。

event.which 属性返回指定事件上哪个键盘键或鼠标按钮被按下。

 

移除事件

unbind() 方法：移除被选元素的事件处理程序。

                        该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。

                        该方法也可以通过 event 对象取消绑定的事件处理程序。

                        该方法也用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。

                        unbind() 方法适用于任意由 jQuery 添加的事件处理程序。

          自 jQuery 版本 1.7 起，on()和 0ff()方法是在元素上添加和移除事件处理程序的首选方法。

          语法：$(selector).unbind(event,function,eventObj)

one() 方法：为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。

                  当使用 one() 方法时，每个元素只能运行一次事件处理程序函数。

 

模拟操作

trigger() 方法：触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。

                       该方法与triggerHandler()方法类似，不同的是 triggerHandler() 不触发事件的默认行为。

                语法：$(selector).trigger(event,eventObj,param1,param2,...)

                        

 

trigger(type，[data])方法：第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。

 

 

jquery中的动画

show() 方法：显示隐藏的被选元素。

                     适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）

             语法：$(selector).show(speed,easing,callback)

                      

hide() 方法：隐藏被选元素。

fadeIn() 方法：逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）。

               语法：$(selector).fadeIn(speed,easing,callback)

fadeOut() 方法：逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。

slideUp() 方法：以滑动方式隐藏被选元素。

                语法：$(selector).slideUp(speed,easing,callback)

slideDown() 方法：以滑动方式显示被选元素。

animate() 方法：执行 CSS 属性集的自定义动画。

                          通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

                          只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）

                         使用 "+=" 或 "-=" 来创建相对动画。

               语法：(selector).animate({styles},speed,easing,callback)

stop() 方法：为被选元素停止当前正在运行的动画。

delay() 方法：对队列中的下一项的执行设置延迟。

                     语法：$(selector).delay(speed,queueName)

                     

 

 

以上内容参考自《锋利的jquery》一书，以及网站http://www.runoob.com/jquery/jquery-tutorial.html

                                                                  http://www.w3school.com.cn/jquery/index.asp

                  

---恢复内容结束---