jquery教程(二)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) ：内容改变时  
  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层次结构向水泡一样上升至最顶端

  

  事件冒泡有时可能会引起一些错误，有时需要禁止冒泡，如何禁止？

  • 取消事件冒泡

  function display(event)

  {

  event.stopPropagation();

  }

  
  

  3.0 修改默认行为

  • 什么是默认行为

  有些html元素会有自己的行为，如：点击按钮时提交表单

  点击按钮表单会自动提交，这个属于submit的默认行为

  ok

  点击链接时会自动实现跳转，这个也属于默认行为

  • 阻止默认行为

  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 内部插入

  商品名
  • append(content) 追加
  • appendTo(content) 将匹配的元素追加至指定内容的最后
  • prepend(content) 将内容添加至最前面
  • prependTo(content) 将匹配的元素添加至指定内容的最前面
  

  1.2外部插入

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

    asdfasdf

  商品
  asdfasfd
  

   1.3删除

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

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

  

  1.4 复制

  clone(true) 复制某个元素

  True：表示复制这个对象本身以及它的事件

  

  1.5 替换

  • replaceWith() 
  
  
  
  • jquery
  • css
  • html
  写下你的评论吧 !

  吐个槽吧,看都看了

  会员登录 | 用户注册