JavaWeb--JQuery2

1. 动画
	1. 三种方式显示和隐藏元素
		1. 扩散显示和隐藏方式(默认)
			1. show([speed,[easing],[fn]])
				1. 参数:
					1. speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画
					时长的毫秒数值(如:1000)
					2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
						* swing:动画执行时效果是 先慢,中间快,最后又慢
						* linear:动画执行时速度是匀速的
					3. fn:在动画完成时执行的函数,每个元素执行一次。
					$("#div").show(5000,"linear");
			2. hide([speed,[easing],[fn]])
			3. toggle([speed],[easing],[fn])
		
		2. 滑动显示和隐藏方式
			1. slideDown([speed],[easing],[fn])
			2. slideUp([speed,[easing],[fn]])
			3. slideToggle([speed],[easing],[fn])

		3. 淡入淡出显示和隐藏方式
			1. fadeIn([speed],[easing],[fn])  //显示
			2. fadeOut([speed],[easing],[fn]) //隐藏
			3. fadeToggle([speed,[easing],[fn]])


2. 遍历
        1. js的遍历方式
            * for(初始化值;循环结束条件;步长)
        2. jq的遍历方式
         jq遍历出来的每一个元素对象都是js对象
            1. jq对象.each(callback)
                1. 语法:
                    jquery对象.each(function(index,element){});
                        $("div").each(function(index,element){
                            * index:就是元素在集合中的索引
                            * element:就是集合中的每一个元素js对象
                            * this:集合中的每一个元素js对象, this===element //true
                        });
                        index,element参数可有可无
                2. 回调函数遍历返回值:
                    * false: 如果当前function返回为false,则结束循环(break)。通常嵌套if使用
                    * true: 如果当前function返回为true,则结束本次循环,继续下次循环(continue)
            2. $.each(object, [callback]) 核心函数遍历,支持js和jq
            3. for..of: jquery 3.0 版本之后提供的方式,支持js和jq
                for(js元素对象 of 容器对象)
                for(user of users){
                    alert(user.innerHTML);
                }
                
             4.特殊: for...in 遍历json对象,u是字符串,所以user[u]不需要引号
             var user ={name:'zhangsan',age:23}
             for( u in user){
                 console.info( u + ":" + user[u]);
             }
	
3. 事件绑定
	1. jquery标准的绑定方式
		* jq对象.事件方法(回调函数);
		* 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
			* 输入框对象.focus();//空参,让输入框获得焦点
			* 表单对象.submit();//空参,让表单提交
	2. on绑定事件/off解除绑定
		* jq对象.on("事件名称",回调函数)
		* jq对象.off("事件名称")
			* 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
			$("#btn1").on("click",function(){}); //绑定事件
			$("#btn2").on("click",function( $("#btn1").of("click") ){});//解除绑定
		需要off解除绑定的原因:在jq中,对同一个对象的同一事件可以定义多次,则有可能一个事件触发多个
	监听器,所以需要解除绑定上一次的时间。在js中,只会覆盖上一个,不会多次定义
                $("#div").click(function(){alert(1);});
                $("#div").click(function(){alert(2);});
			触发事件会先弹出1,再弹出2
			document.getElementById("div").onclick=function(){alert(1);}
			document.getElementById("div").onclick=function(){alert(2);}
			触发事件只会弹出2
	3. 单击事件切换:toggle
		* jq对象.toggle(fn1,fn2...)
			* 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....
			
		 jq对象.toggle(fn1,fn2...)跟jq对象.toggle([speed],[easing],[fn])方法比较:
		如果是空参,表示的就是扩散动画的切换效果,只要带了[speed],[easing]任意一个,那就是扩散动画
,此时再定义多个回调函数就会报错。总结:要想绑定事件的重载形式,就只声明回调函数。要想要切换动画的效果,回调函数最多只能有一个。

		* 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
			 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

4. 插件:增强JQuery的功能
	1. 实现方式:
		1. $.fn.extend(object) 扩展jquery对象
			* 增强通过Jquery获取的对象的功能  $("#id")
		   $.fn.extend({
               max : function(a,b){
                   return a > b? a: b;
               },
                mix : function(a,b){
                   return a < b? a: b;
               },
		   });
		   $("div").max(1,2);
		2. $.extend(object)	  扩展jquery全局对象$
			* 增强JQeury对象自身的功能  $/jQuery
			$.extend({
                 max : function(a,b){
                   return a > b? a: b;
               },
                mix : function(a,b){
                   return a < b? a: b;
               },
			});
			$.max(1,2);

猜你喜欢

转载自blog.csdn.net/qq_42514129/article/details/83984161
今日推荐