• jQuery操作dom对象


    SlideToggle()的滑入的介绍:

    只是改变高度的方法

    
    事件bind和on  和live和delegate的用法以及他们相应的取消使事件。
     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src = "js/jquery-migrate-1.2.0.js"></script>
    <script type="text/javascript" src = "js/jQuery1.11.1.js"></script>
    <style type="text/css">
    ul>li{
    list-style:none;
    }
    
    </style>
    <script type="text/javascript">
    
    $(function(){
        /* on(events,[selector],[data],fn) 
        参数:events,[selector],[data],fn)* 
        events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。 
        selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它> 到达选定的元素,事件总是触发。 
        data:当一个事件被触发时要传递event.data给事件处理函数。 
        fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。 */
        on事件
    /*     $("li").on("click",function(){
            alert("我是on的触发事件");
    });
        //与on相对应的是off的事件:取消事件
        $(function(){
            $("li").off("click");    
        });
        
      //bind的事件:
        $("button").bind("click",function(){
            $("ul").toggle();
        }); 
      //bind的事件相反的是unbind事件
        $(function(){
            $("button").unbind("click");    
        }); */
      Live事件
         //----------------live--------------
        //live与bind区别于live只实现一个事件
        /* $("button").live("click",function(){
            $("ul").slideToggle();
        });
          $(function(){     
             $("button").die("click");
         }); 
           */
        //delegate
             $("button").delegate("button","click",function(){
             $("ul").slideToggle();
         })
    
             /*  $(function(){     
                 $("button").undelegate("button","click");
             });  */
          
    });
    </script>
    </head>
    <body>
    <div>
    <button>求点点我吧</button>
    <ul id = "myul">
    <li>hello</li>
    <li>word</li>
    <li>你好</li>
    <li>世界</li>
    </ul>
    </div>
    </body>
    </html>
    
    
    删除,替换,克隆节点。
    
    //删除节点
        //$("ul li:first").remove();
        
        //替换节点
    
        /* var myfirst = $("<li>(。・∀・)ノ゙嗨</li>");
        $("#myul li:first").replaceWith(myfirst); */
    
         //hover()的光棒效果
        $("li").hover(function(){
            $(this).css("background","pink");
        },
        function(){
            $(this).css("background","");
    
        });
        
        //克隆节点
        var myclone = $("#myul li:first").clone();
        $("ul").append(myclone);
    
    ToggleClass()的介绍:
     如果存在(不存在)就删除(添加)一个类。
  • 相关阅读:
    JavaScript实现上传图片预览[js前端实现]
    Java内存Happen-Before
    《干净架构读书笔记》——业务驱动编程
    《干净架构读书笔记》——编程范式
    Scrum中的冲刺和迭代
    Spring Cloud中通过Kafka传递自定义Header
    领域驱动开发(DDD)Web开发中的典型分层
    给开发团队减减负
    业务实体和用例
    什么是好的代码-代码Review要点
  • 原文地址:https://www.cnblogs.com/www-yang-com/p/9285739.html
Copyright © 2020-2023  润新知