admin
管理员
管理员
  • UID1
  • 粉丝2
  • 关注2
  • 发帖数339
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:4506回复:0

jquery教程(二) jquery事件和特效制作

楼主#
更多 发布于:2013-10-25 13:04
分享到:
一. Jquery中的事件
  • 页面载入
  • 基本事件
  • 事件切换
  • 事件处理

1.1 页面载入事件(load)
以前的写法:window.onload=function(){} 在这个方法里完成一些初始化操作
jquery的写法:ready(fn);
$(document).ready(function(){
//初始化
});
1.2这两种写法有何不同???
第1:window.onload这个事件必须要等所有关联文件加载完毕后才会执行,如js、css、img这些文件都属于关联文件,必须等这些文件加载完毕!
第2:$(document).ready()这个事件只要等html 的dom加载完毕时就可以执行
$(document).ready()执行的较快
第3:我们尝试为window.onload事件指定多个事件处理程序,那么页面加载后会执行最后一个事件处理程序,也就是说,为window.onload设置多个处理程序,会覆盖之前的处理程序
第4:我们尝试为$(document).ready()事件指定多个事件处理程序,那么页面加载之后会顺序执行所有事件处理程序,也就是说,指定多个,是可以顺序添加的


2 . 基本事件
  • blur(fn) :指定失去焦点时所触发的事件处理程序
  • change(fn) :内容改变时  <select>
  • click(fn) :点击时 button
  • dblclick(fn) :双击时  
  • focus(fn) :获得焦点时
  • keydown(fn) :键盘按下
  • keyup(fn) :键盘抬起
  • keypress(fn) :键盘点击
  • load(fn) :加载事件
  • unload(fn) :卸载事件
  • mousedown(fn) :鼠标按下
  • mouseup(fn) :鼠标抬起
  • mousemove(fn) :鼠标移动时
  • mouseover(fn) :鼠标经过时
  • mouseout(fn) :鼠标离开时
  • resize(fn) :当尺寸改变时
  • scroll(fn) :滚动时
  • select(fn) :当内容选中时
  • submit(fn) :表单提交时



2.1 事件切换
  • hover(over,out)

当鼠标经过和离开时所触发的事件处理程序
Over:鼠标经过时所触发的事件处理程序
Out:鼠标离开时所触发的事件处理程序
  • toggle(fn,fn)

当鼠标点击时所触发的事件处理程序
在这个方法中,可以添充任意数目的事件处理程序,那么,它会顺序触发

 toggle 事件会按顺序进行 触发

2.3 事件处理
  • bind(type,[data],fn) 是对元素进行事件绑定

Type:事件名
[data]:触发时所传递的参数
Fn:事件处理程序
  • bind({type:fn,type:fn}) 是对元素进行多个事件绑定
  • one(type,[data],fn) 绑定的事件只触发一次
  • unbind([type]) 删除绑定的事件处理程序


jquery 可以同时绑定多个事件


删除 事件

2.4 事件冒泡
什么是事件冒泡?
之所以称之为冒泡,是因为事件会按照dom层次结构向水泡一样上升至最顶端
<body>
<div>
<img />
</div>
</body>

事件冒泡有时可能会引起一些错误,有时需要禁止冒泡,如何禁止?
  • 取消事件冒泡

function display(event)
{
event.stopPropagation();
}


3.0 修改默认行为
  • 什么是默认行为

有些html元素会有自己的行为,如:点击按钮时提交表单
<form>
<input type=“text”>
<input type=“submit”>
</form>
点击按钮表单会自动提交,这个属于submit的默认行为
<a href=’index.php’>ok</a>
点击链接时会自动实现跳转,这个也属于默认行为
  • 阻止默认行为

function display(event)
{
event.preventDefault();
}

jquery教程-jquery特效


一.效果
  • 基本 效果
  • 滑动 效果
  • 淡入淡出 效果

1.1基本
基本效果就是指对象的隐藏和显示
  • show() :显示
  • show(speed,[callback]) :以动画效果显示
  • hide() :隐藏
  • hide(speed,[callback]) :以动画效果隐藏
  • toggle() :效果切换 (如果显示,则隐藏,如果隐藏,则显示)
  • toggle(switch) :true 显示   false 隐藏
  • toggle(speed,[callback]) :以动画效果进行切换
  • speed:"slow", "normal", "fast"

同时这个参数可以设置一个数字,表示毫秒数,表示这个动画在多少毫秒内完成
  • callback:当动画执行完毕时所触发的回调函数



1.2滑动效果
  • slideDown(speed,[callback]) 向下滑动
  • slideUp(speed,[callback]) 向上滑动
  • slideToggle(speed,[callback]) 切换滑动

Speed:速度  取值和上题相同
Callback:回调函数

1.3淡入淡出
  • fadeIn(speed,[callback]) 淡入
  • fadeOut(speed,[callback]) 淡出
  • fadeTo(speed,opacity,[callback]) 淡入淡出到指定效果

Opacity:透明度  0-1之间   1:清晰    0:消失
Speed:速度
Callback:回调函数

习题:制作一组图片的淡入淡出效果
一.文档处理
  • 内部插入
  • 外部插入
  • 删除
  • 复制
  • 替换

1.1 内部插入
<div>商品名</div>
  • append(content) 追加
  • appendTo(content) 将匹配的元素追加至指定内容的最后
  • prepend(content) 将内容添加至最前面
  • prependTo(content) 将匹配的元素添加至指定内容的最前面


1.2外部插入
  • after(content) 在后面插入数据
  • before(content) 在前面插入数据
  • insertAfter(content) 将匹配的元素插入到指定的内容的最后
  • insertBefore(content) 将匹配的元素插入到指定的内容之前

  asdfasdf<div>商品</div>asdfasfd

 1.3删除
  • empty() :清空内容
  • remove() :删除指定的内容

区别:empty是表示将选择器中间的内容清空,remove是表示将元素从dom结构删除

1.4 复制
clone(true) 复制某个元素
True:表示复制这个对象本身以及它的事件

1.5 替换
  • replaceWith()

游客

返回顶部