第三章，jQuery事件与特效

第三章，jQuery事件与特效

一，jQuery事件

• 在网页中的交互是需要事件来实现的，jQuery事件是对JavaScript事件的封装,常用的事件可以分为基础事件以及复合事件

• 基础事件

  • 鼠标事件：是当用户在文档上移动或单击鼠标时产生的事件

  方法	描述	执行时机
  click()	触发或将函数绑定到指定元素的click事件	鼠标单击时
  mouseover()	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
  mouseout()	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
  mouseenter()	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
  mouseleave()	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

  鼠标事件方法的区别：

  相同点：

  mouseover()和mouseenter()都是鼠标进入被选元素时会触发，mouseout()和mouseleave()都是鼠标离开被选元素时会触发

  不同点：

  1.鼠标在其被选元素的子元素上来回进入时，触发mouseover(),不触发mouseenter()

  2.鼠标在其被选元素的子元素上来回离开时，触发mouseout(),不触发mouseleave()

  • 键盘事件：用户每次按下或者释放键盘上的键时都会产生事件

  方法	描述	执行时机
  keydown()	触发或将函数绑定到指定元素的keydown()事件	按下键盘时
  keyup()	触发或将函数绑定到指定元素的keyup()事件	释放按键时
  keypress()	触发或将函数绑定到指定元素的keypress()事件	按下产生可打印字符的按键时

  • 浏览器事件：调整窗口大小时，完成页面特效

  //语法：
  $(selector).resize();
  

• 复合事件

  • hover（）方法：相当于mouseover()与mouseout()事件的组合

  //语法：
  hover(enter,leave);
  //enter为鼠标移入时的执行函数
  //leave为鼠标移出时的执行函数
  $(".top-m .on").hover(function{
  	$(".topDown").show();
  	},
  	function(){
  	$(".topDown").hide();
  	}
  );
  

  • toggle（）方法:用于模拟鼠标连续click事件

  //语法：
  toggle(fn1,fn2,...,fnN);
  //toggle()方法不带参数，与show()和hide()方法作用一样
  $("input").toggle(
    function(){$("body").css("backgroundcolor","red");},
    function(){$("body").css("backgroundcolor","green");}
  )
  

  • toggleClass（）方法:可以对样式进行切换

  toggleClass(className);
  

  • toggle（）与toggleClass（）区别

    1.toggle(fn1,fn2…)实现单击事件的切换，无须额外绑定click事件

    2.toggle()实现事件触发对象在显示和隐藏状态之间切换

    3.toggleClass()实现事件触发对象在加载某个样式和移除某个样式之间切换

• 绑定事件

  //语法：
  bind(type,[data],fn);
  //type为事件类型，主要包括click、mouseover、mouseout等基础事件，也可以是自定义事件
  //[data]为可选函数
  //fn为处理函数
  //可以绑定单个事件，也可以同时绑定多个事件
  $(".top-m .on").bind({
  		mouseover:function(){
  				$(".topDown").show();
  		},
  		mouseout:function(){
  				$(".topDown").hide();
  		}
  })
  

• 移除事件

  //语法:
  unbind([type],[fn]);
  //当unbind不带参数时，表示移除所绑定的全部事件
  

二，jQuery特效

• 控制元素显示与隐藏

  //通过show()控制元素的显示，hide()控制元素的隐藏
  $(selector).show([speed],[callback]);
  $(selector).hide([speed],[callback]);
  //speed表示速度，默认为"0",可能值：毫秒（如1000）、slow、normal、fast
  //callback为show或hide函数执行完后要执行的回调函数
  $(".top-m .on").hover(function{
  	$(".topDown").show("slow");
  	},
  	function(){
  	$(".topDown").hide("fast");
  	}
  );
  

• 改变元素的透明度

  //fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
  $(selector).fadeIn([speed],[callback])
  $(selector).fadeOut([speed],[callback])
  

• 改变元素高度

  //slideDown()可以使元素逐渐延伸显示
  //slideUp()可以使元素逐步缩短直至隐藏
  $(selector).slideUp([speed],[callback])
  $(selector).slideDown([speed],[callback])
  $("h2").click(function(){
  	$(".txt").slideUp("slow");
  	$(".txt").slideDown("slow");
  });
  

• 自定义动画

  //语法:
  $(selector).animate({params},speed,callback)
  //params为定义形成动画的CSS属性