jquery事件和动画

事件编程

页面载入

在原生的javascript中页面载入通过window.onload方法去实现的，jQuery中是通过ready方法实现页面载入事件，写法：

$(document).ready(function(){

alert('jQuery页面载入事件');

});

在实际开发中，jQuery页面载入事件还有另外一种写法：

$(function(){

alert('简化的jQuery页面载入事件');

});

原生的javascript页面载入事件是在dom和外部资源全部加载完毕之后，才会触发

jQuery的页面载入事件是在dom加载完毕之后就会触发

基本事件

在jQuery中对象没有事件一说，jQuery事件是通过对象的方法来实现，语法：dom对象.方法（事件处理程序）

• $(selector).blur(fn)表示失去交点时候触发

• $(selector).change(fn)表示改变时触发

• $(selector).click(fn)鼠标单击时触发

• $(selector).dblclick(fn) 鼠标双击时触发 类GUI

• $(selector).focus(fn) 获得交点时触发

• $(selector).keydown(fn)键盘按下时触发  返回键盘的值，最终是要通过translateMessage函数来转换他成为ascii

• $(selector).keyup(fn)键盘弹起时触发

• $(selector).keypress(fn) 键盘按下时触发 直接返回ascii

• $(selector).load(fn) 与ready方法相同，表示页面加载时触发

• $(selector).unload(fn)页面关闭时触发

• $(selector).mousedown(fn) 鼠标单击（左键）是触发

• $(selector).mouseup(fn) 鼠标弹起时触发（左键）

• $(selector).mousemove(fn)鼠标移动时触发

• $(selector).mouseover(fn)鼠标悬浮时触发

• $(selector).mouseout(fn)鼠标离开时触发

• $(selector).resize(fn) 浏览器窗口大小改变时触发

• $(selector).scroll(fn) 滚动条滚动时触发

• $(selector).select(fn) 文字选中时触发

• $(selector).submit(fn)表单提交时触发

• $(selector).blur(fn)表示失去交点时候触发

• $(selector).change(fn)表示改变时触发

• $(selector).click(fn)鼠标单击时触发

• $(selector).dblclick(fn) 鼠标双击时触发 类GUI

• $(selector).focus(fn) 获得交点时触发

• $(selector).keydown(fn)键盘按下时触发  返回键盘的值，最终是要通过translateMessage函数来转换他成为ascii

• $(selector).keyup(fn)键盘弹起时触发

• $(selector).keypress(fn) 键盘按下时触发 直接返回ascii

• $(selector).load(fn) 与ready方法相同，表示页面加载时触发

• $(selector).unload(fn)页面关闭时触发

• $(selector).mousedown(fn) 鼠标单击（左键）是触发

• $(selector).mouseup(fn) 鼠标弹起时触发（左键）

• $(selector).mousemove(fn)鼠标移动时触发

• $(selector).mouseover(fn)鼠标悬浮时触发

• $(selector).mouseout(fn)鼠标离开时触发

• $(selector).resize(fn) 浏览器窗口大小改变时触发

• $(selector).scroll(fn) 滚动条滚动时触发

• $(selector).select(fn) 文字选中时触发

• $(selector).submit(fn)表单提交时触发

绑定click事件

实现鼠标的悬浮和离开效果

事件切换（重点）

• hover(over,out) 鼠标切换事件，第一个参数表示鼠标悬浮的时候触发，第二个参数表示鼠标离开时触发

• toggle(fn,fn…) 单击事件切换

以2个参数为例：

第一个参数表示：第一次单击时触发

第二个参数表示：第二次单击时触发

第三次点击的时候触发第一个事件处理程序

第四次点击的时候触发第二个事件处理程序

事件绑定中的this（重点）

阻止form表单提交

关于绑定时间的一些注意事项：

Delegate

.delegate是另一种绑定事件的方式。它将事件处理函数绑定在指定的根元素上， 由于事件会冒泡，它用来处理指定的子元素上的事件。

         <script> $('#root').delegate('a', 'click', function(){ console.log('clicked'); }); </script>

  

On

事实上，.on()才是jQuery事件的提供者。其他的事件绑定方法都是通过.on()来实现的

既然.on是最通用的jQuery事件机制，那么上述的所有例子都可以用.on()来实现：

事件绑定：bind

使用javascript绑定一个事件很简单，只需要在HTML中设置onxxx属性， 并且在javascript中定义相关的处理函数便可以完成。

  click() 等效于 .bind('click', ) 。另外还可以通过 unbind 来解绑事件

JQuery的动画效果

基本的动画效果

• show()   显示

• show(speed,[callback])

• hide()    隐藏

• hide(speed,[callback])

• toggle()   切换显示和隐藏

• toggle(switch)   显示和隐藏，true表示显示，false表示隐藏

• toggle(speed,[callback])  speed表示动画持续的事件，单位是毫秒，callback是执行完成时候触发的回调函数

speed:"slow", "normal", "fast"

通过运行结果发现：show、hide以及toggle方法显示以div的左上角为原点。

滑动效果

• $(selector).slideDown(speed,[callback]) 向下滑动

• $(selector).slideUp(speed,[callback]) 向上滑动

• $(selector).slideToggle(speed,[callback]) 切换效果

参数说明：

Speed：动画持续时间，单位是毫秒

Callback：动画效果完成后触发的回调函数

淡入淡出效果

• $(selector).fadeIn(speed,[callback])   淡入

• $(selector).fadeOut(speed,[callback]) 淡出

• $(selector).fadeTo(speed,opacity,[callback]) 介于淡入和淡出中间的一个静止状态

• $(selector).fadeToggle(speed,[callback]); 切换

参数说明：

Speed：动画的持续事件，单位是毫秒

Callback：动画执行完成后执行的回调函数

Opacity：透明度，取值范围是0-1之间，0表示完全的透明，1表示不透明

自定义动画

• $(selector).animate(parameters,speed,[callback])

Parameters：json对象

Speed：动画持续事件

Callback：可选，回调函数

实现360安全导航左侧的收缩/展开效果

文档处理

插入操作（重点）

• $(selector).append(content或函数的返回值)    表示在当前选择器后追加内容

• $(content).appendTo(selector)  表示将内容追加到指定的选择器元素中

区别：

首先，他们两个顺序不一样；

Append所追加的内容可以是函数的返回值，而appendTo不行。

• $(selector).prepend(content)  在当前选择器元素前追加内容

• $(content).prependTo(selector)  将内容添加到当前选择器元素之前

区别：

首先，他们两个顺序不一样；

prepend所追加的内容可以是函数的返回值，而prependTo不行。

在p标签内容后追加一段文字。

外部插入：

• $(selector).after(content或者函数的返回值)  在当前选择器元素之后（标签结束之后）插入

• $(selector).before(content或者函数的返回值) 在当前选择器元素之前（开始标签之前）插入

• $(content).insertAfter(selector) 将内容添加到当前选择器元素之后（结束标签之后）

• $(content).insertBefore(selector) 将内容添加到当前选择器元素之前（开始标签之前）

主被动的关系：顺序不一致，主动的方式可以将内容设置为函数的返回值。

新加的h1标签在span的外部，所以上面的操作叫外部插入。

删除操作（重点）

• $(selector).empty() 表示清空当前选择器元素中的内容

• $(selector).remove() 表示移除当前元素

Empty只清除了内容，而没有删除标签，这个是一个假删除，等价于$(‘p’).html(‘’)；

点击按钮删除p标签

复制操作（克隆操作）

• $(selector).clone()   表示复制指定的选择器元素

 

栗子：复制当前文档中全部的p标签，并且追加到当前文档中。

替换操作

• $(selector).replaceWith(content)   使用指定的content替换当前选择器中的内容

替换网页中p标签为h1标题。

包裹操作

• $(selector).wrap()    包裹（外）包裹了整个选择器元素

• $(selector).wrapInner() 包裹（内）只包裹了当前选择器元素中的文字部分

• $(selector).wrapAll()   全部包裹

内包裹：

查找操作

• $(selector).eq(index)    表示选择当前选择器（多个匹配结果）第index个

• $(selector).filter(selector)  表示过滤出指定选择器

• $(selector).not(selector)  表示当前选择器（多个）之外（选择器）的元素

• $(selector).find(childSelector)  表示查找当前选择器的后代元素中指定的选择器

not()的用法

查找body标签下的后代元素span，改变其背景色为绿色