文档章节

jQuery 04 事件和动画

fokYaland
 fokYaland
发布于 2015/06/04 17:27
字数 1941
阅读 8
收藏 0
加载DOM,在常规的JS中,通常使用window.onload方法。在jQuery中,使用 $(document).ready(function(){  }) ,在DOM加载完时就执行,不必等到相关资源加载。 如果需要等所有内容都加载完毕再执行可以用:   $(window).load(function(){})       

事件绑定,在文档加载完成后,可以用bind方法对匹配元素进行特定时间的绑定:
bind(type,data,fn);
data为可选参数,作为event.data属性值传递给事件对象
$(function(){
    $("#panel h5.head") .bind("click",function(){
          $(this).next().show();
     })

})
this  引用的是相应动作的当前DOM元素,使用 $(this)  转换为jQuery对象。
使用is(), 判断元素是否显示
$(function(){
    $("#panel h5.head").bind("click",function(){
         var $content = $(this).next();
         if( $content.is(":visible")){
               $content. hide();
          }else{
               $content. show();
          }
     })
})


$(function(){
    $("#panel h5.head"). bind("mouseover",function(){
          $(this).next().show();
     }). bind("mouseout",function(){
          $(this).next().hide();
     })
})

bind可以绑定所有的js事件,click,mouseover,mouseout这类事件,jQuery提供一套简写的方法。
$(function(){
    $("#panel h5.head"). mouseover(function(){
         $(this).next().show();
     }). mouseout(function(){
         $(this).next().hide();
     })
})

jQuery有2个合成方法 hover()和toggle().

hover用于模拟光标悬停,当光标移动到元素上时,触发第1个函数,移出时触发第2个函数
$(function(){
    $("#panel h5.head"). hover(function(){
         $(this).next().show();
     },function(){
         $(this).next().hide();  
     })
})
toggle用于模拟鼠标连续单击事件。第一次单击执行第一个函数,第2次执行第2个函数
$(function(){
    $("#panel h5.head"). toggle(function(){
               $(this).next().show();
     },function(){
               $(this).next().hide();
     })
})
toggle还有另一个作用:切换元素的可见状态
$(function(){
    $("#panel h5.head"). toggle(function(){
               $(this).next(). toggle();
     },function(){
               $(this).next(). toggle();
     })
})

事件冒泡,事件会按照DOM的层次结构不断向上直到顶端。事件冒泡可能会引起问题,有必要对事件的作用范围进行限制。

事件对象event:
$('span').bind("click", function(event){
          var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
          $('#msg').html(txt);
            event.stopPropagation();    //  阻止事件冒泡
     });

默认行为,有时需要阻止链接跳转或表单提交。
$(function(){
   $("#sub").bind("click",function( event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
               $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
                 event.preventDefault();  //阻止默认行为 ( 表单提交 )
          }
   })
})
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回 false.
$(function(){
   $("#sub").bind("click",function( event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
               $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
                 return false;
          }
   })
})

事件对象 Event的属性
$(function(){
     $("a").click(function(event) {
       alert(event.type);//获取事件类型
       return false;//阻止链接跳转
     });
})
获取事件类型
$(function(){
     $("a[href='http://google.com']").click(function(event) {
       var tg = event.target;  //获取事件对象
       alert( tg.href ) ;
       return false;//阻止链接跳转
     });
})
获取事件对象
event.relatedTarget 相关对象
$(function(){
     $("a").click(function(event) {
       alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
       return false;//阻止链接跳转
     });
})
获取鼠标当前相对于页面的坐标
$(function(){
     $("a").mousedown(function(e){
          alert(e.which)  // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键
         return false;//阻止链接跳转
     })
})
获得鼠标按键
$(function(){
     $("input").keyup(function(e){
          alert(e.which);
     })
})
获得键盘按键
$(function(){
     $("input").keyup(function(e){
          alert( e.metaKey +" "+e.ctrlKey );
          $(this).blur();
     })
})
 

重复绑定事件
<script type="text/javascript">
     $(function(){
        $('#btn').bind(" click", function(){
                         $('#test').append("<p>我的绑定函数1</p>");
                 }).bind(" click", function(){
                         $('#test').append("<p>我的绑定函数2</p>");
                 }).bind(" click", function(){
                           $('#test').append("<p>我的绑定函数3</p>");
                });
     })
</script>

移除事件
<script type="text/javascript">
     $(function(){
        $('#btn').bind("click", function(){
                         $('#test').append("<p>我的绑定函数1</p>");
                 }).bind("click", function(){
                         $('#test').append("<p>我的绑定函数2</p>");
                 }).bind("click", function(){
                           $('#test').append("<p>我的绑定函数3</p>");
                });
        $('#delAll').click(function(){
                 $('#btn'). unbind("click");
        });
     })
</script>

<script type="text/javascript">
     $(function(){
        $('#btn').bind("click",   myFun1 =  function(){
                         $('#test').append("<p>我的绑定函数1</p>");
                 }).bind("click",   myFun2 =  function(){
                         $('#test').append("<p>我的绑定函数2</p>");
                 }).bind("click", myFun3 = function(){
                           $('#test').append("<p>我的绑定函数3</p>");
                });
        $('#delTwo').click(function(){
                   $('#btn').unbind("click",myFun2);
        });
     })
</script>

对于只运行一次的事件可以用one()
<script type="text/javascript">
     $(function(){
        $('#btn'). one("click", function(){
                         $('#test').append("<p>我的绑定函数1</p>");
                 }). one("click", function(){
                         $('#test').append("<p>我的绑定函数2</p>");
                 }). one("click", function(){
                           $('#test').append("<p>我的绑定函数3</p>");
                });
     })
</script>

模拟操作,可以用trigger()完成模拟操作。

<script type="text/javascript">
     $(function(){
        $('#btn').bind("click", function(){
                         $('#test').append("<p>我的绑定函数1</p>");
                 }).bind("click", function(){
                         $('#test').append("<p>我的绑定函数2</p>");
                 }).bind("click", function(){
                           $('#test').append("<p>我的绑定函数3</p>");
                });
          $('#btn').trigger("click");
     })
</script>

<script type="text/javascript">
     $(function(){
        $('#btn').bind("myClick",   function(event, message1, message2){
               $('#test').append( "<p>"+message1 + message2 +"</p>");
          });
        $('#btn').click(function(){
               $(this).trigger("myClick",["我的自定义","事件"]);
        }) .trigger("myClick",["我的自定义","事件"]);
     })
</script>
trigger()方法触发事件后,会执行默认操作,如果不想执行默认操作可以用

<script type="text/javascript">
     $(function(){
         $('#old').bind("click", function(){
               $("input").trigger("focus");
          });
          $('#new').bind("click", function(){
              $("input"). triggerHandler("focus");
          });
          $("input").focus(function(){
            $("body"). append("<p>focus.</p>");
        })
     })
</script>

一次绑定多个事件
 <script type="text/javascript">
  $(function(){
     $("div"). bind("mouseover mouseout", function(){
        $(this).toggleClass("over");
     });
  })
  </script>

增加事件命名空间
<script type="text/javascript">
  $(function(){
     $("div"). bind("click.plugin",function(){
            $("body").append("<p>click事件</p>");
     });
     $("div"). bind("mouseover.plugin", function(){
            $("body").append("<p>mouseover事件</p>");
     });
     $("div").bind("dblclick", function(){
             $("body").append("<p>dblclick事件</p>");
     });
     $("button").click(function() {
          $("div"). unbind(".plugin")
     })
     /*
          click,mouseover 事件被删除,
     */
  })
  </script>

show和hide
<script type="text/javascript">
          $(function(){
          $("#panel h5.head").toggle(function(){
               $(this).next(). hide();
               },function(){
               $(this).next(). show();
               })
          })
          </script>

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
          $(this).next(). hide(600);
     },function(){
          $(this).next(). show(600);
     })
})
</script>

<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
          $(this).next(). toggle();
     })
})
</script>

fade
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
          $(this).next(). fadeOut();
     },function(){
          $(this).next(). fadeIn();
     })
})
</script>

<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
          $(this).next(). fadeTo(600, 0.2);
     })
})
</script>

<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
          $(this).next(). fadeToggle();
     })
})
</script>

slide 改变元素的高度
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
          $(this).next(). slideUp();
     },function(){
          $(this).next(). slideDown();
     })
})
</script>

<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
          $(this).next(). slideToggle();
     })
})
</script>

自定义动画方法animate
语法结构:animate(params,speed,callback);
<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
        $(this). animate({left: "500px"}, 3000);
     })
})
</script>
在使用 animate 之前,为了能影响该元素的top,left,bottom,right样式属性,必须先把元素的position样式设置为 relative或absolute.
  #panel { position: relative;  width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}

累加/累减,如果在500px前加上 +=或-= 表示在当前位置累加或累减

同时执行多个变化
<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
         $(this). animate({left: "500px",height:"200px"}, 3000);
     })
})
</script>

按顺序执行
<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
          $(this). animate({left: "500px"}, 3000)
                   . animate({height: "200px"}, 3000);
     })
})
</script>

<script type="text/javascript">
    $(function(){
        $("#panel"). css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this). animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                         . animate({top: "200px" , width :"200px"}, 3000 )
                         . fadeOut("slow");
        });
    });
</script>

动画的回调函数
<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this). animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                         . animate({top: "200px" , width :"200px"}, 3000 , function(){
                              $(this).css("border","5px solid blue");
                         }
)
                        
        });
    });
</script>
<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this). animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                         . animate({top: "200px" , width :"200px"}, 3000 )
                     . queue(function(next){
                         $(this).css("border","5px solid blue");
                         next(); //继续下一个动画
                    })

                    .slideUp("slow");
                        
        });
    });
</script>

停止动画,可以用stop()方法:stop(clearQueue,gotoEnd)
clearQueue表示是否清空未执行的动画队列,gotoEnd表示是否直接到当前动画的最后状态。
<script type="text/javascript">
$(function(){
       $("#panel").hover(function() {
            $(this). stop().animate({height : "150",width : "300"} , 200 );
       },function() {
            $(this). stop().animate({height : "22",width : "60" } , 300 );
       });
});
</script>
<script type="text/javascript">
$(function(){
     $("#panel").hover(function() {
                    $(this). stop(true)
                         .animate({height : "150" } , 200 )
                         .animate({width : "300" } , 300 )
     },function() {
                    $(this). stop(true)
                         .animate({height : "22" } , 200 )
                         .animate({width : "60" } , 300 )
     });
});
</script>

判断动画状态
<script type="text/javascript">
    $(function(){
          //给id为mover的元素添加动画.
          function animateIt() {
               $("#mover").slideToggle("slow", animateIt);
          }
          function animateIt2() {
               $("#mover").fadeToggle("slow", animateIt2);
          }
          animateIt();


          $("button").click(function(){
               if(!$('#mover'). is(":animated")){          //判断元素是否正处于动画状态
                    //如果当前没有进行动画,则添加新动画
                    $('#mover'). fadeToggle("slow", animateIt2);
               }else{
                    $('#mover'). stop();
               }
          });

    });
</script>

延迟动画
<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this). animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                         . delay(1000)
                         . animate({top: "200px" , width :"200px"}, 3000 )
                         . delay(2000)
                         . fadeOut("slow");
        });
    });
</script>


本文转载自:http://blog.csdn.net/yanliang1/article/details/9498273

fokYaland
粉丝 4
博文 68
码字总数 3062
作品 0
东城
私信 提问
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
python前端jQuery入门

知识点预习 1.jQuery的加载2.jQuery选择器 3.jQuery的click事件 4.jQuery的样式操作 5.jQuery动画 01- 封闭函数 作用:避免在修改他人代码时出现 方法同名替换的情况想让一个函数直接执行用封...

czbkzmj
2018/12/07
0
0
网站如何做到完全不需要 jQuery ?

来源:阮一峰 jQuery 是现在最流行的 JavaScript 工具库。 据统计,目前全世界 57.3% 的网站使用它。也就是说,10 个网站里面,有 6 个使用 jQuery。如果只考察使用工具库的网站,这个比例就...

红薯
2013/05/12
21K
110
jQuery PlugIn - Switch Tab 滑动门插件

作者:山顶洞羊 jQuery 是继prototype之后又一个优秀的JavaScript框架.有多优秀? 这个就不介绍了, 搜索去吧! jQuery 的 UI 插件也不错. 但用了下, 没有想像中的好用. 于是, 很久以前就一直想...

江苏-柏灵
2011/09/15
0
0
jquery合集--从零开始学习jQuery系列- 转载

从零开始学习jQuery系列 作者: ziqiu.zhang 来源: 博客园 发布时间: 2009-12-22 11:37 阅读: 3452 次 [收藏] 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二...

nkbai
2010/04/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

抽象同步队列AQS——AbstractQueuedSynchronizer锁详解

AQS——锁的底层支持 谈到并发,不得不谈ReentrantLock;而谈到ReentrantLock,不得不谈AbstractQueuedSynchronizer(AQS)! 类如其名,抽象的队列式的同步器,AQS定义了一套多线程访问共享资...

须臾之余
今天
3
0
springboot配置百度UEditor 富文本详解

富文本简介 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 准备工作 ueditor需要单独文...

wotrd
昨天
4
0
mysql 5.7之my.cnf配置大全

[client]port = 3306socket = /tmp/mysql.sock[mysqld]###############################基础设置######################################Mysql服务的唯一编号 每个mysql服务...

Online_Reus
昨天
3
0
MAVEN打包时引入外部链接的包

1.项目引入了ORACLE的jar包,MAVEN配置如下 2.打jar包的时候需要指定下main入口函数mainClass <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> ......

Cobbage
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部