• jQuery中的事件与动画


    jQuery中的事件与动画

    1、window.onload方法和$(document).ready()方法区别:

             a、window.onload:在网页中所有的元素(包括元素所有的关联文件)完全加载到浏览器后才执行,即javascript此时才可以访问网页中的任何元素

             b、$(document).ready():通过$(document).ready处理,DOM完全就绪后可以被任意调用

    2、Bind()的调用格式:Bind( type [,data] , fn);

             a、type:事件类型,类型包括:blur、focus 、load 、resize 、scroll 、unloand 、click 、dblclick 、mousedown 、mouseup 、mousemove 、mouseover 、mouseout 、mouseenter 、mouseleave 、change 、select 、submit 、keydown 、keypress 、keyup 和error等,也可以是自定义名称

             b、date:可选参数,作为event.data属性值传递给事件对象的额外数据对象

             c、是用来绑定的处理函数

    3、jQuery中的合成方法:Hover() 和 toggle()

    4、冒泡:在页面上有多个事件,也可以有多个元素响应同一个事件。

    5、Hover()方法:模拟光标悬停事件。也就是当光标移动到元素上时,会触发指定的第一个函数(enter);移除时触发第二个函数(leave)。

    $(function(){
    
             $("#panel h5.head").hover(function(){
    
                       $(this).next("div.content").show();
    
                 },function(){
    
                           $(this).next("div.content").hide();
    
                 });
    
             });

    6、toggle(fn1,fn2,fn3……fnN):模拟鼠标连续单击事件,第一次单击触发函数fn1,第二次fn2…….

    $(funcion){                                                   
    
    $("#panel h5.head").toggle(function(){
    
                       $(this).addclass("highlight").show();
    
    },function(){
    
             $(this).remove("highlight");
    
                           $(this).next("div.content").hide();
    
                 });
    
    });

    7、事件冒泡:

    a、在程序中使用对象非常简单,只需要为函数添加一个参数

    $(“element”).bind(“click”,function(event){

    //event:事件对象

    b、停止事件冒泡是为了阻止事件中的其他对象的事件处理函数被执行

    $("span").bind("click", function(even) {
    
                    var txt = $('#msg').html() ;
    
                    $('#msg').html(txt);
    
       even.stopPropagation();//停止
    
                });

    c、阻止默认行为:事件对象.preventDefault();或 return false;

    d、事件捕获:事件捕获和事件冒泡是两个相反的过程。从最外层元素开始,最里层结束

    8、. Event.type()方法:该方法的作用是可以获取到事件的类型

           

      $(“a”).click (function(event){
    
               alert(event.type);//获取事件类型
    
                return false;//阻止连接跳转
    
           });

    9、. Event.pageX()方法/event.pageY()方法:该方法的作用是获取的光标相对于页面的 x 坐标和 y 坐标。如果没有使用jQuery时,那么IE浏览器中是用event.x()/event.y ()方法 而在Firefox浏览器中是用event.pageX()/event.pageY()方法。

           

      $(“a”).click (function (event){
    
       alert(“Current mouse position:” + event.pageX + “ , ” + event.pageY);
    
                    //获取鼠标当前相对于页面的坐标
    
       return false;  // 阻止连接跳转
    
    });

    10,show()和hide()方法:

    $(function(){
        $(“#panel h5.head”).toggle(function(){
            $(this).next(“div.content”).hide()    },function(){
        $(this).next(“div.content”).show();
                      });                           
    });
    $(“#panle h5.head”).toggle(function(){
    $(this).next(“div.content”).hide(600);
    },function(){
    $(this).next(“div.content”).show(600);
    });

    11:show()方法和hide)方法会同时修改元素的多个样式属性,即高度、宽度和不 透明度;fadeOut()方法和fadeIn()方法只会修改元素的不透明度 ;slideDown()方法和slideUp()方法只会u改变元素的高度。

    12,jQuery的事件:

    1事件绑定、
    2合成事件、
    3事件对象的属性、
    4事件冒泡、
    5移除事件、
    6模式事件操作,
    7其他事件用法
    13,jQuery的动画方法:
    •Hide()和show()  说明:同时修改多个样式属性即高度、宽度和不透明度
    •Fadeln()和fadeOut()说明:只改变不透明度
    •slideUp()和slideDown()说明:只改变高度
    •fadeTo()说明:只改变不透明度
    •Totggle()说明:用来代替hide()方法和show()方法,所以会同时修改多个样式即高度、宽度和不透明度。
    •slideToggle()说明:用来代替slideUp()方法,所以只能改变高度
    •Animate()说明:属于自定义动画方法。以上各种动画方法实质内部都调用来animate()方法
     
  • 相关阅读:
    December 23rd 2016 Week 52nd Friday
    December 22nd 2016 Week 52nd Thursday
    December 21st 2016 Week 52nd Wednesday
    December 20th 2016 Week 52nd Tuesday
    December 19th 2016 Week 52nd Sunday
    December 18th 2016 Week 52nd Sunday
    uva294(唯一分解定理)
    uva11624Fire!(bfs)
    fzu2150Fire Game(双起点bfs)
    poj3276Face The Right Way
  • 原文地址:https://www.cnblogs.com/dclcc/p/3430768.html
Copyright © 2020-2023  润新知