事件编程
页面载入
在原生的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
是另一种绑定事件的方式。它将事件处理函数绑定在指定的根元素上, 由于事件会冒泡,它用来处理指定的子元素上的事件。
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,改变其背景色为绿色