美文网首页
JS插件晋升

JS插件晋升

作者: f4c03c046d4b | 来源:发表于2017-03-03 18:27 被阅读0次

    javascript变量规范

    • 私用变量前加前缀“_”比如:var _pub = this.pub;
    • 常量请大写比如:this.COLOR="red";
    • jquery对象变量前加前缀“$”比如:this.$obj = $("layout");
    • object,array变量前加前缀“o”,“a”

    data()方法的使用

    向元素附加数据

    $("div").data("key","value");
    

    取出数据

    $("div").data("key");
    

    使用对象向元素附加数据

    var obj = {"a":1,"b":{"c":2}};
    $("p").data(obj);
    console.log($("p".data("a")));
    console.log($("p").data("b").c);
    

    bind()方法

    描述:向已存在的匹配元素添加一个或多个事件处理器。

    $(selector).bind(event,data,function)
    

    参数详解:

    参数名     是否必须      说明
    ---------------------------------------------------------------------------------------------------------------
    event       必须              添加到元素的一个或多个事件,例如click,dblclick等
    data         可选              需要传递的参数
    function    必须              当绑定事件发生时,需要执行的函数                 
    

    单个事件处理

    //简单的处理
    $(".btn").bind("click",function(){
      //  todo
    })
    //封装过的
    function hehe(event){
      console.log(event.data.foo);
    }
    $(".btn").bind("click",{foo:'abc'},hehe);
    

    多个事件处理

    ···
    //空格相隔
    $(".btn").bind("click mouseout",function(){
    // todo
    })
    //大括号替代方式
    $(".btn-test").bind({
    "mouseout": function () {
    alert("这是mouseout事件!");
    },
    "click": function () {
    $(".container").slideToggle();
    }
    });

    //删除事件处理
    $(".btn").unbind("click");
    ···

    on()方法

    描述:支持未来新添加元素的事件设置,childselector,data可选

    //单事件处理
    $(selector).on("click",childselector,data,function);
    //多事件处理
    //空额分隔多事件
    $(selector).on("click dbclick",childselector,data,function);
    //大括号定义
    $(selector).on({event1:function,event2:function,...},childselector);
    //删除事件
    $(selector).off("event","childselector");
    

    typeof 的使用

    相关文章

      网友评论

          本文标题:JS插件晋升

          本文链接:https://www.haomeiwen.com/subject/fnylgttx.html