zoukankan      html  css  js  c++  java
  • 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()方法
  • 相关阅读:
    Android -- junit测试框架,logcat获取log信息
    【Android】ADB常用指令与logcat日志
    Android -- UI布局管理,相对布局,线性布局,表格布局,绝对布局,帧布局
    Unicode的解救方案
    第一个程序
    Windows程序设计第五版
    愉快的开始
    图形用户界面入门:EasyGui
    丰富的else语句及简洁的with语句
    异常处理:你不可能总是对的2
  • 原文地址:https://www.cnblogs.com/yangshuaigg/p/3484523.html
Copyright © 2011-2022 走看看