zoukankan      html  css  js  c++  java
  • jQuery中.bind() .live() .delegate() .on()的区别

    live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的

    $("a").live("click",function(){alert("ok");});

    delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

    $("#container").delegate("a","click",function(){alert("ok");})

    on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

    差别:

    .bind()是直接绑定在元素上

    .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。

    .delegate()则是更精确的小范围使用事件代理,性能优于.live()

    .on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

    用三种方式写光棒效果

    一:js批量注册this的说法

           当通过循环的方式注册事件的时候,在匿名函数的方法体中,必须使用this代表当前对象,不能使用数组名[i](对象名)。

    js设置样式的两种方案:

    1.this.style.属性名=“属性值”;

    如果属性名:

     background-color--------->backgroundColor

    font-size---------->fontSize

    2.this.style.cssText="属性名:属性值;font-size:50px"

    eg:

    复制代码
    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
        <script type="text/javascript">
     //用js的光棒效果
            /*  $(function(){
                 var hu=document.getElementsByTagName("li");
                 for(var i=0;i<hu.length;i++){
                     hu[i].onmouseover=function(){
                         //js方式设计样式  方式一 this.style.属性名=属性值。
                         //this.style.background="red";
                        // this.style.fontSize="40px";
                         //方式二:this.style.cssText="属性名:属性值"
                         this.style.cssText="background:pink;font-size:50px;";
                     };
                     
                     hu[i].onmouseout=function(){
                         //方式一:
                         this.style.background="";
                         this.style.fontSize="20px";
                         //方式二:
                        // this.style.cssText="background:;font-size:20px;";
                     };
                 }
    复制代码
    复制代码
    //用jq的光棒效果  1.锁定li元素
    $(function(){
        var hu=$("li");
       hu.mouseover(function(){
              $(this).css({"background":"pink","font-size":"50px"}); 
           }).mouseout(function(){
               this.style.background="";
                 this.style.fontSize="20px";
           });
         });
    复制代码
    复制代码
    //hover的光棒效果
          ji.hover(
          function(){
              $(this).css({"background":"pink","font-size":"50px"}); 
          },function(){
              this.style.background="";
                 this.style.fontSize="20px";
     });
    复制代码
    复制代码
    //复杂动画
               $(function(){
                   $("img").animate({"90%"},5000)
                   .animate({height:"90%"},{queue:false,duration:5000})
                   .animate({borderWidth:5},{queue:false,duration:5000});
               });
    
        </script>
      </head>    
      
      <body>
         <img src="img/1.jpg" style="100px; height:100px;display:none;"></img>
      </body>
    复制代码
  • 相关阅读:
    HyperV应用指南之4虚拟机管理[转]
    Windows Server 2003文件夹不能共享的解决办法【转】
    彻底了解DVD:从入门到精通(二)[转]
    HyperV应用指南之2--安装HyperV Server 2008 R2并配置远程管理[转]
    HyperV应用指南之HyperV应用基础[转]
    IIS7.5由于权限不足而无法读取配置文件的解决办法
    C# 十六进制字符串与数值类型之间转换(转)
    分享一个Winform下的分页控件[转]
    mysql的replace函数替换字符串功能简介
    聊聊.net程序设计——浅谈使用VS2010建模拓展(下)[转]
  • 原文地址:https://www.cnblogs.com/zfx123--/p/6440096.html
Copyright © 2011-2022 走看看