zoukankan      html  css  js  c++  java
  • jQuery的事件与 动画

    什么是事件:
    事件的本质是委托。
    Jquery的 方法:
    $().css();
    $().click();
    等等。
        鼠标的事件:
    区别在于:mouseover与mouseout再进入或离开后会执行这两个事件;
     mouseenter与mouseleave在进入或离开后代元素不会执行这两个事件
        //鼠标的事件:
        //mouseover和mouseout与mouseenter和mouseleave的区别
        
        //$(".nav").mouseover(function(){
        /*     console.log("mouseover");
        }).mouseout(function(){
            console.log("mouseout");
        }); */
        
            /* $(".nav").mouseenter(function(){
                console.log("mouseenter");
                
                
            }).mouseleave(function(){
                console.log("mouseleave");
                
            }); */
            
        //键盘事件:
        $("input").keyup(function(event){
            alert(event.KeyCole);
        });
    
    //浏览器大小事件resize
            $/* (window).resize(function(){
                            if ($(window).width()>=1024) {
                                $('body').css("background","pink");
                            }else{
                                $('body').css("background","red");
                            }
                             
                         }); */
    
            //复合事件:hover用于模拟鼠标指针移入和移除事件。
            /* $("li").hover(function() {
                $(this).css("background", "pink");
            }, function() {
                $(this).css("background", "");
            }); */
    
            //toggle()的方法。带参数用于模拟鼠标连续的click
    
    事件。
            /* $('body').toggle(function() {
                //alert(1);
                $(this).css("background","pink");
            }, function() {
                $(this).css("background","red");
            }, function() {
                 $(this).css("background","blue");
            }); */
            
            //toggle()不带参数和hide(),show()方法一样。
            /* $("#btn").bind("click", function() {
                $("ul").toggle();
            }); */
    
    //自定义动画函数animate
        /* $(function() {
            $('#book').animate({
            //透明度0.25
                opacity: 0.25,
                left: '+=50',
                height: 'toggle'
              }, 5000, function() {
                  
              });     */
    
        $("#book").animate({"height":"500px"},{queue:true,duration:2000})
        .animate({"width":"50px"},{queue:true,duration:2000})
        .animate({"font-size":"30px"},{queue:false,duration:2000});
        });
  • 相关阅读:
    controller中返回值是string
    String jsonstr =new Gson().toJson(object) 什么意思
    The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path jsp开始页面有红叉
    ubuntu 安装配置JDK
    检查元素状态
    检查页面元素是否存在
    智能等待页面元素(显示的等待同步测试)
    implicitly_wait()隐式等待
    多选框处理
    单选按钮处理
  • 原文地址:https://www.cnblogs.com/www-yang-com/p/9285711.html
Copyright © 2011-2022 走看看