jQuery基础知识02

一，jQuery事件处理
	1，使用jQuery实现事件处理
		1）实现事件绑定
		-$obj.bind(事件类型，事件处理函数)  如：$button.bind('click',func);
		 简写形式：$button.click(func)
		2）获得事件对象event
		-为事件处理函数传递任一参数   如：$button.click(function(e){})
		 e就是事件对象，但经过jQuery对底层事件对象的封装，封装后的事件对象可以方便地兼容各浏览器
		3）事件对象的常用属性
		-获取事件源      e.target  返回DOM对象
		-获取鼠标点击点  e.pageX,e.pageY
	2，使用jQuery实现事件冒泡
		1）事件冒泡
			a，事件冒泡：子节点产生的事件会以此向上抛给父节点
			b，取消事件冒泡：e.stopPropagation()----组织事件向父节点上传
	3，使用jQuery实现合成事件
		-hover(mouseenter,mouseleave)  传入两个函数，实现鼠标悬停和离开的方法
			$("img").hover(
			  function(){$(this).css("width","500px")},//鼠标悬停时调用
			  function(){$(this).css("width","400px")} //鼠标离开时调用
			);
		-toggle()  一般是切换对象的可见/隐藏属性
			$("#chg").click(
			  function(){
				//将图片在显示与隐藏状态之间切换
				$("img").toggle();
			  }
			);
	4，使用jQuery实现模拟操作
		语法：
		$obj.trigger(事件类型)  如：$button.trigger("focus");模拟光标切换，简写：$obj.focus()
			var id = setInterval(function(){
			  //执行$("").length次结束
			  if(i==$texts.length){
				clearInterval(id);
			  }
			  //随机算出一个值
			  var rp = Math.round(Math.random()*100);
			  //设置给当前（第i个）文本框，模拟光标切入事件
			  //然后给这个框设置值
			  $texts.eq(i++).trigger("focus").val(rp);
			},1000);

二，jQuery动画
	1，显示、隐藏动画
		show()/hide()
		$obj.show(执行时间，回调函数); 回调函数--动画执行完毕后要执行的函数
	2，上下滑动式动画实现
		slideDown()/slideUp()
		slideDown(执行时间，回调函数)
	3，淡入、淡出式动画效果
		fadeIn()/fadeOut()
		fadaIn(执行事件，回调函数)
	4，自定义动画效果
		animate(偏移位置，执行时间，回调函数)
		$obj.animate({'left','400px'},1000)

转载于:https://my.oschina.net/u/1393072/blog/516060