JS插件晋升
2017-03-03 本文已影响0人
f4c03c046d4b
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");