jQuery_04 快速入门事件&动画

//内部调用：         
                        window.onload = function(){

                        alert("第一种");

                                        }

通过onload调用方法：

// 给定一个函数
                            funciton myall(){
                                            alert();
                                                     }
//调用
                            window.onload = myall();

特点：当整个页面加载完毕后执行，该形式一个网页只能出现一次，

如果出现多次，后面的会覆盖掉前面的。

第二种：

语法：window.addEventiListener('load',function(){});

//添加事件监听的方式
                    window.addEventListener('load',function(){
                                    alert(567);
                                                    });

特点：一个网页可以出现多次。（原生态JS）

2.jQueyr的DOM加载事件

2.1.完整版：

语法： $(document).ready(function(){});

                        $(document).ready(function(){

                                    alert(123);

                                             });

2.2.简写版：

语法： $(function(){});

                            $(function(){

                                    alert(456);

                                    });

特点：jQuery的加载函数可以写无数个。

3.JavaScrpt与jQuer同时执行，谁的优先级别最高

答：版本不同，先后后执行的顺序不同。3.0版本以前--jQuery先，

3.0版本以后原生态JavaScript先。

4.绑定事件的两种方式[eg.:点击、悬停事件等等]

41.元素. on/bind()；

//例：
        //on绑定
                            $("#oBtn1").on('click',function(){
                                alert(123);
                                            });
        
        //bind绑定
                            $("#oBtn1").bind('click',function(){
                                alert(123);
                                            });

4.2建议写法：元素.事件名

//例：
		                    $("#oBtn1").click(function(){
//click为jQuery的点击事件
			                        alert(123);
		                                    });

5.鼠标移入移除事件

5.1.mouseover(); 移入

//例：
                            $("#oBtn1").mouseover(function(){
                                    alert("移入");
                                    });

5.2.mouseout(); 移出

//例：             
                            $("#oBtn1").mouseout(function(){
                                    alert("移出");
                                        });

6.合成事件/事件切换

6.1.hover()悬停控制元素[div]的显示和隐藏

//例：
                         $("#oDiv").hover(function(){
//移入显示
                                $(this).addClass("over");   //over为在style属性中设置样式名
                                        },function(){
// 移出隐藏    
                                $(this).removeClass("over");
                                    });

6.2.toggle()点击控制元素[div]的显示和隐藏[注意版本问题]

//例：
                        $("#oBtn2").click(function(){
                            //没有传递参数        调用后立即隐藏于显示
                            // 有参数（毫秒）        调用后    有延时效果
                            $("#oDiv").toggle(function(){
                            alert("隐藏");
                                },function(){
                            //运行结果，前面的被覆盖掉
                                alert("出现");
                                });
                                    });

7.事件的传播（事件冒泡）小p->中div->大body

//例：
                        $("body").click(function(){
                            alert(123);
                                            });
                        $("#oBtn2").click(function(){
                                alert(456);
                        //return false; 防止事件的传播
                                return false;
                                    });

注意：当大的和小的标签同时被设置同一事件，小的被触发，大的也会跟着被传递触发。

8.事件event的坐标[pageX,pageY]

8.1.鼠标

pageX 横坐标 pageY 纵坐标（包含间隙）

8.2left和top body有默认的margin和padding值
offsetX 横坐标 offsetY 纵坐标（不包含间隙）

8.2.窗口

clientX 横坐标 clientY 纵坐标

//例：
                $("body").click(function(){
                    console.log(event.pageX,event.pageY);
                    console.log(event.offsetX,event.offsetY);
                    console.log(event.clientX,event.clientY);
                                    });

9.事件移除（解绑事件）

off(); one();

  //例子： 按钮只能点击一次
     // 1.
        $("#oBtn3").click(function(){
            alert(123);
             $(this).off();
            
     // 2.
            $(this).unbind();//解绑事件
        }); */
        
     // 3.
         var flag =true;
         $("#oBtn3").click(function(){
             if(flag === true){
                alert(123);
                 flag = false;
            }
         });

     // 4.
        //jQuery中提供一个方法    one
         $("#oBtn3").one('click',function(){
             alert(123);
         });

二、动画 (参数Time:延时效果）

1.opacity 透明属性（范围：0~1）

<!--例：-->
                <div id="oDiv" class="" style="width:100px; height:50px;
                 background-color: blue; opacity: 0.2;></div>

2.hide(Time); 隐藏

//例：   
             $("#btn2").click(function(){
		            	$(div).hide();	//没有参数，立刻隐藏
		            	$("div").hide(5000);	//延时效果
	            	});

3.show(Time); 显示

//例：                     
                           $("#btn1").click(function(){
			                     $("div").show();
			 	                $("div").show(1000);
	                                    });

4.toggle(Time); 显示与隐藏

//例：
                           $("#btn3").click(function(){
                               $("div").toggle(1000);
                               });

5.slideUp(Time); 滑动上

//例：
                           $("#btn4").click(function(){
                               $("div").slideUp(1000);
                           });

6.sildeDown(Time); 滑动下

//例：            
                            $("#btn5").click(function(){
	   			            $("div").slideDown(1000);
	                           });

7.sildeToggle(Time); 滑动上下

//例：
                             $("#btn6").click(function(){
	   			                $("div").slideToggle(1000);
	                               });

8.fadeOut(Time); 淡入

//例：
                            $("#btn7").click(function(){
	   		            	$("div").fadeOut(1000);
	                                   });

9.fadeIn(Time); 淡出

//例：
                             $("#btn8").click(function(){
	   			                $("div").fadeIn(1000);
	                               });

10.fadeToggle(Time); 淡入|淡出

//例：
                             $("#btn9").click(function(){
	   		                	$("div").fadeToggle(1000);
	                               });

11. animate 上下左右及宽度高度变化

                11.1宽度和高度变化
                                  语法：animate({
                                                      width:"参数",
                                                      height:"参数"
                                                              },Time);

//例：
                         $("#btn10").click(function(){
		                   $("div"). animate({
		                           width:"500px",
		                           height:"500px"
	                           },3000);
	                           });

                11.2上下和左右变化
                                   语法：animate({
                                                         left:"参数",
                                                         top:"参数"
                                                           },Time);

 //例：
                        $("#btn11").click(function(){
	   		                       $("div"). animate({
				                   left:"+=50px",
				                   top:"+=3px"
	                                   },3000);
	                              });

四.样式代码：

1.第一部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件案例</title>
		<!-- css代码 -->
		<style type="text/css">
		*{
			//间隙全部调为0
			margin: 0px; padding:0px;
		}
			.over{
				//设置样式
				border: 100px solid red;
			}
		</style>
		<!-- 导入jQuery插件 -->
		<script src="js/jquery-3.3.1.min.js" type="text/javascript">
		</script>
		<!-- 编写jQuery代码 -->
		<script type="text/javascript">
		//加载函数
            $(funciton(){
                //代码编写区域
                });
		</script>
	</head>
	<!-- 将onload作为body的事件属性 -->
	<!-- <body onload="alert(123);"> -->
		<body>
		<h3>1.绑定事件的两种方式		<on>	元素.事件</on></h3>
		<button type="button" id="oBtn1">点击获取</button>
		<h3>2.合成|切换事件		hover()		toggle()</h3>
		<div id="oDiv" class="" style="width:100px; height:50px; background-color: blue;">
		</div>
		<button type="button" id="oBtn2">隐藏与显示</button>
		<button type="button" id="oBtn3">点击一次</button>
	</body>
</html>

2.第二部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画案例</title>
		<!-- 导入jQuery插件 -->
		<script src="js/jquery-3.3.1.min.js" type="text/javascript">
		</script>
		<!-- 编写jQuery代码 -->
		<script type="text/javascript">
		//加载函数
	   $(function(){
		//代码编写
		</script>
	</head>
	<!-- 将onload作为body的事件属性 -->
	<!-- <body onload="alert(123);"> -->
		<body>
		<!-- opacity   透明属性 -->
		<button type="button" id="btn1">显示</button>
		<button type="button" id="btn2">隐藏</button>
		<button type="button" id="btn3">显示|隐藏（toggle）</button>
		<button type="button" id="btn4">滑动上</button>
		<button type="button" id="btn5">滑动下</button>
		<button type="button" id="btn6">滑动上下(Slidetoggle)</button>
		
		<button type="button" id="btn7">淡入</button>
		<button type="button" id="btn8">淡出</button>
		<button type="button" id="btn9">淡入淡出(Fadeggle)</button>
		<hr >
		<button type="button" id="btn10">点击变化 （宽度和高度）</button>
		<button type="button" id="btn11">点击变化 （左右移动）</button>
		<div id="oDiv" class="" style="width:100px; height:50px; background-color: blue; opacity: 0.2; position: absolute; left:0px ; top: 150px;">
		</div>
	</body>
</html>

五、思维导图

£轻描～淡写°

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_04 快速入门事件&动画

目录一、事件1.加载事件（JS和jQ加载事件的区别）第一种：第二种：2.jQueyr的DOM加载事件2.1.完整版：2.2.简写版：3.JavaScrpt与jQuer同时执行，谁的优先级别最高4.绑定事件的两种方式[eg.:点击、悬停事件等等] 41.元素. on/bind()； 4.2建议写法：元素.事件名5.鼠标移入移除事件 ............
复制链接

扫一扫