2018-04-10JQ中的事件

事件绑定与解绑    bind/   ubbind


2018-04-10JQ中的事件_第1张图片

鼠标悬停事件       进入mouseover        离开 mouseout

$("d1").mouseover(function(){ 

       $("#d2").show(1000) });

.mouseout(function(){

    $("#d2").hide(1000)   });


隐藏/显示.hide()隐藏          .show()显示.               toggle() 隐藏/显示 ,切换   

$(this).hide()                              .hide()函数,隐藏当前的HTML元素

$("p").hide().hide()函数,              隐藏所有p标记元素

#("#ID").hide()                            隐藏ID选择器的 元素


JQ事件:$(document).ready(function)将函数绑定到文档的就绪事件(当文档完成加载时)

$(selector).click(function)             触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)         触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)            触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件


淡入/淡出 /切换                   fadeIn()               fadeOut()                  fadeToggle()           fadeTo() 

   fadeIn()               淡入                                                    $(document).ready(function(){         

 fadeOut()             淡出                                                            $("button").click(function(){              

 fadeToggle()         淡入/淡出切换                                             $("#p1").fadeToggle();             

                                                                                                      $("#p2").fadeToggle("slow");                                     

                                                                                                           $("#p3").fadeToggle(3000);            });  });

fadeTo()            规定淡出时的透明度,并不是完全消失   0-1

                                            $("button").click(function(){                  

                                              $("#div1").fadeTo("slow",0.15);  

                                                    $("#div3").fadeTo("slow",0.7);});


创建滑动隐藏消失。   slideDown()  滑动向下,弹出   slideUp()    滑动向上,收回      slideToggle()滑动隐藏消失切换

                                                                            $(document).ready(function(){                       

                                                                                   $("button").click(function(){                   

                                                                                        $(".up").slideToggle("slow");           });  });                                      

                                                                                              滑动弹出,收回切换,  注意.up的DIV  的CSS设置为display:none;


动画效果      animate()动画效果            height:'toggle'      定义已经设置好的高度弹出隐藏

                                                                                      $(document).ready(function(){                           

                                                                                         $("button").click(function(){                                     

                                                                                              $(".up").animate({          定义动画         

                                                                                                       left:'250px',            定义动画距离                         

                                                                                                         height:'150px',              定义动画的大小          

                                                                                                          width:'150px' });  });  });      

                height/width:+=150px;        动画可以根据需要无限制+=150px; 点一下就放一次   但是相对于left:250px位置

注: .up需提前设置样式,并声明position:absolute

提示:animate() 方法几乎可以操作所有的CSS属性

不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。


jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。                                            $(document).ready(function(){  

                                                        $("button").click(function(){    var div=$("div");      

                                                            div.animate({left:'100px'},"slow"); 

                                                               div.animate({fontSize:'3em'},"slow");  

                                                                   div.animate({样式代码段'},"slow");  });});


滑动停止,动画停止.shop()        

                                            $(".sub").click(function(){                    

                                                $(".pop").slideDown(5000);   });                  定义.pop1向下5秒显示       

                                                     $("button").click(function(){                    定义.shop点击停止滑动    

                                                          $(".pop").stop();});});                          pop停止滑动点击停止


.shop延伸知识点:

                                 $(document).ready(function(){

                                   $("#start").click(function(){                                              选择开始按钮

                                               $("div").animate({left:'100px'},5000);                          选择div动画效果 左100px,5秒钟

                                                  $("div").animate({fontSize:'3em'},5000);  });                选择div动画效果  字体大小3em,5秒

                                   $("#stop").click(function(){                  选择停止按钮

                                         $("div").stop(); });                            div停止动画

                                    $("#stopsy").click(function(){                选择停止所有按钮

                                              $("div").stop(true);});                  div停止所有动画(加一个true)

                                       $("#stopwc").click(function(){                选择停止所有但要完成按钮

                                                $("div").stop(true,true); });             选的div停止(加2个true)          });


Callback函数  在当前动画100%完成之后执行

                                                $(document).ready(function(){  

                                                    $("button").click(function(){  

                                                        $("p").hide(1000,function(){  

                                                             alert("The paragraph is now hidden");    });  });});      

                                             当动画.hide百分百完成后  直接启用下一个函数弹出框                 


Chaining  链接技术,  就是可以吧几个JQ调用连在一个相同的元素上,共同使用

                                                $(document).ready(function()  {  

                                                     $("button").click(function(){  

                                                          $("#p1").css("color","red").slideUp(2000).slideDown(2000);  }); 

                                                 点击bun后  #p1的css字体红色,  向上收弹出框2秒钟后  ,接着向下2秒弹出});

前端小知识:孙鲁意博客网站

你可能感兴趣的:(2018-04-10JQ中的事件)