jQuery事件

jQuery事件注册

element.事件（function(){}）
$(“div”).click(function(){事件处理程序})

1.2事件处理 on

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

• element.on(events,[selector],fn)
• events：一个或多个用空格分隔的事件类型
• selector：元素的子元素选择器
• fn:回调函数 即绑定在元素身上的监听函数

<script>
	//(1)事件处理 on
	$("div").on({
		mouseenter:function(){
			$(this).css("background","skyblue")
		},
		click:function(){
			$(this).css("background","purple")
		}	
	})
	$("div").on("mousenter mouseleave",function(){
		$(this).toggleClass("current");	
	});
	(2)on可以实现事件委托   click是绑定在ul身上，但是是li触发
	$("ul").on("click","li",function(){	
			
	})
	(3)on可以给未来动态创建的元素绑定事件
	$("ol").on("click","li",function(){
		alert(11);
	})
	var li = $("<li></li>");
	$("ol").append(li);
</script>

1.3微博发布案例

点击发布按钮，动态创建小li，放入文本框的内容和删除按钮，并且添加到ul中 点击删除按钮，可以删除当前微博留言

<div class="box" id="weibo">
	<span>微博发布</span>
	<textarea name="" class="txt" cols="30" rows="10"></textarea>
	<button class = "btn"></button>
	<ul></ul>
</div>
<script>
	$(function(){	
		//1.点击发布那妞，动态创建一个小li,放入文本框的内容和删除按钮，并且添加到ul中
		$(".btn").on("click",function(){	
			var li = $("<li></li>");
			li.html($(".txt").val() +"<a href='javascript:;'>删除</a>");
			$("ul").prepend(li);
			li.slideDown();
			$(".txt").val("");
		})	
		//2.点击删除按钮，可以删除当前的微博留言li
		$("ul").on("click","a",function(){	
			$("this").parent().slideUp(function(){
				$(this).remove(); 
			});
		})
	})
</script>

1.4事件处理off()解绑事件

<script>
	//1.off   事件解绑
	$("div").off();  //解除元素所有事件处理程序
	$("div").off("click");  //解绑元素上面点击事件 
	$("ul").off("click","li") ; //解绑事件委托
</script>

如果想要事件只触发一次，可以用one()
$(“p”).one(“click”,function(){ alert(11); })

1.5自动触发事件 trigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

<div></div>
<input type= "text">
<script>
//1.元素.事件()
$("div").trigger("focus");
//2.元素，trigger("clck");
$("div").trigger("focus");
//3.元素.triggerHandler("事件") 不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus",function(){
	$(this).val("你好吗");
})
</script>

阻止默认行为：event.preventDefault() 或者return false
阻止冒泡：event.stopPropagation()

<div></div>
<script>
	$(function(){
		$(document).on("click",function(){	
			console.log("点击了document");	
		})	
		$("div").on("click",function(event){
			console.log("点击了div");
			event.stopPropagation();
		
		})
	})
</script>

jQuery其他方法

jQuery对象拷贝

$.extend([deep],target,object,[objectN])
deep:如果设为true为深拷贝 ，默认为false浅拷贝
target:要拷贝的目标对象
object:待拷贝到第一个对象的对象

<script>
	$(function(){
		var targetObj = {};
		var obj ={
			id:1,
			name:"andy"	
		};	
		$.extend(targetObj,obj);
		console.log(targetObj);
		//原来对象有数据
		var targetObj = {
			id:0,
			
		};
		var obj ={
			id:1,
			name:"andy"	
		};	
		$.extend(targetObj,obj);
		console.log(targetObj);  //会覆盖原来的数据
		//
		var targetObj = {
			id:0,
			
		};
		var obj ={
			id:1,
			name:"andy"	
			msg:{	
				age:18
			}
		};	
		$.extend(targetObj,obj);
		console.log(targetObj);  //会覆盖原来的数据
		//1.浅拷贝 把原来复杂数据类型的地址拷贝给目标对象  修改目标对象会影响原对象
		targetObj.msg.age = 20;
		conssole.log(targetObj);	//20
		conssole.log(obj);    //20
		//2.深拷贝  完全拷贝(拷贝的是对象，而不是地址)，修改目标对象不会影响原对象   两个对象指向不同的空间地址
		var targetObj = {
			id:0,
			msg:{
				sex:"男"
			}
		};
		var obj ={
			id:1,
			name:"andy"	
			msg:{	
				age:18
			}
		};	
		$.extend(true,targetObj,obj);
		console.log(targetObj); //新开辟一个空间内存存储新对象msg:{sex:"男",age:18}
		console.log(obj);
		
	})

</script>

浅拷贝把原来对象里面的复杂数据类型中的地址拷贝个目标对象
浅拷贝 当修改目标对象的值时，原对象会受到影响
深拷贝 是把数据完全复制一份给目标对象 如果里面有不冲突的属性，会合并到一起
深拷贝 如果修改目标对象的值，对原对象没有影响，因为他们指向不同的地址

jQuery多可共存

jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用这$作为标识符，这样会引起冲突

<script>
	$(function(){
		function $(ele){
			return document.querySelector(ele);
		}
		console.log($("div"));
		//$.each()
		//jQuery.each();
		//如果$符号冲突  我们就使用jQuery
		jQuery.each();
		//jQuery  释放对$ 控制权让用户自己决定
		var suibian = jQuery.noConflict();
		console.log(suibian("span"));
	})	
</script>

jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助jQuery插件完成
注意：这些插件也是依赖于jQuery来完成的，所以必须要引入jQuery文件，因此也称为jQuery插件
jQuery插件库
jQuery之家
2.jQuery插件使用步骤
引入相关文件（jQuery文件和插件文件）
复制相关html，css，js(调用插件)
1.瀑布流
2.图片懒加载（图片使用延迟加载可以提高网页下载速度，它能够帮助减轻服务器负载）；当我们页面滑动到可视区域，再显示图片
3.全屏滚动（fullpage.js）
gitHub
中文翻译网站：http://www.dowebok.com/demo/2014/77/