jQuery2

84 阅读2分钟

1、事件:用户触发 或 浏览器自动触发:

绑定:$("xx").bind("事件名",callback);

简化:$("xx").事件名(callback);

面试题: 原生JS中 window.onload 和 JQ中$(document).ready(callback) 有什么区别

  1. window.onload:等待所有的资源(html、css、js、图片、视频、音频)加载完毕后,最后执行,而且一个页面只能使用一次
  2. (document).ready(callback):等待DOM树加载完毕就会执行,理论上比上者效率更高,而且一个页面可以反复使用简写:1(document).ready(callback):等待DOM树加载完毕就会执行,理论上比上者效率更高,而且一个页面可以反复使用 简写:1、(document).ready(()=>{}) 2、().ready(()=>)3().ready(()=>{}) 3、(()=>{})

原来学过的事件: click、dblclick、mouseover/mouseenter(移入,不会触发冒泡)、mouseout/mouseleave(移出,不会触发冒泡)、mousemove、change、blur、focus、submit、input(只要用户输入就会触发)、 contextmenu、resize、keydown

未学过的事件:

1.1、mousedown(鼠标按下)、mouseup(鼠标松开)

1.2、keydown、keypress、keyup - 键盘事件:

	$(window).键盘事件(callback);
	keydown:按下和按住都会触发,任何按键都支持 - 最适合用于做(游戏开发) 
	keypress:按下和按住都会触发,支持数字+字母+回车+空格
	keyup:松开时才触发,任何按键都支持 - 劲舞、炫舞、QQ音速,比手速

	event事件对象:jQuery没有任何的简化操作
		键盘键码:e.keyCode;
1.3、***scroll - 滚动监听事件:
	绑定事件:$(window).scroll(()=>{
			1、$(window).scrollTop();//获取当前滚动条距离页面顶部有多远

			2、$("xx").offset().top;//获取某个元素距离页面顶部有多远

			3、越往下滚,出现数据越多
		  })

2、JQ动画:

2.1、预定义动画:3组:9个

2.1.1、隐藏和显示:

   隐藏:$("xx").hide(执行时间,callback)
   显示:$("xx").show(执行时间,callback)
   特殊:1、如果没有传递任何参数,瞬间的隐藏和显示
	    如果传递了时间参数,会具有动画(同时修改宽高度、透明度)
	 2、callback是动画执行完毕才会执行的代码操作
	 3、组合用法:自带判断操作:
		$("xx").toggle(执行时间,callback) === show+hide

2.1.2、滑动效果:

   隐藏:$("xx").slideUp(执行时间,callback)
   显示:$("xx").slideDown(执行时间,callback)
   特殊:1、哪怕不加时间也具有动画,只不过动画比较快(修改高度)
	 2、callback是动画执行完毕才会执行的代码操作
	 3、组合用法:自带判断操作:
	$("xx").slideToggle(执行时间,callback) === slideDown+slideUp

2.1.3、淡入淡出:

   淡出/隐藏:$("xx").fadeOut(执行时间,callback)
   淡入/显示:$("xx").fadeIn(执行时间,callback)
   特殊:1、哪怕不加时间也具有动画,只不过动画比较快(修改透明度)
	 2、callback是动画执行完毕才会执行的代码操作
	 3、组合用法:自带判断操作:
	$("xx").fadeToggle(执行时间,callback) === fadeIn+fadeOut

2、自定义动画:

1、并发动画:所有的动画一起执行

	$("xx").animate({
		"css属性名":"css属性值",
		...
	},执行时间,callback)

2、排队动画:一个动画做完在做下一个

	$("xx").animate({
		"css属性名":"css属性值",
	},执行时间,callback).animate({
		"css属性名":"css属性值",
	},执行时间,callback).animate({
		"css属性名":"css属性值",
	},执行时间,callback).animate({
		"css属性名":"css属性值",
	},执行时间,callback).animate({
		"css属性名":"css属性值",
	},执行时间,callback).animate({
		"css属性名":"css属性值",
	},执行时间,callback)

特殊:

  1、animate方法不支持颜色、transform转换的动画 - 明天就有jQuery.ui.js提供增强animate方法
  2、动画会排队,如果快速的触发动画,怎么排队上很多很多的动画慢慢执行,不希望看到这个效果:
	stop();

扩展:

1、如何判断某个元素的有没有动画
	 if(!$("xx").is(":animated")){没有动画的元素才执行}

2if(!$("xx").is(":hidden")){没有隐藏的元素才执行}