Jquery对事件的绑定
().bind(“事件类型”,事件处理);给jquery绑定一个事件
(
)
.
b
i
n
d
(
“
事
件
类
型
”
,
事
件
处
理
)
;
给
j
q
u
e
r
y
绑
定
一
个
事
件
().bind(“事件类型1 事件类型2 事件类型3..”, 事件处理)
绑定多个事件类型并且使用同一个处理程序。
$().bind({
事件类型1:处理程序,
事件类型2:处理程序,
事件类型3:处理程序…
});
$(function () {
$("div").mouseout(function () {
$(this).css("background-color", "");
});
// bind("事件类型", 处理程序)
$("div").bind("mouseover", function () {
$(this).css("background-color", "lightgreen");
});
// bind("事件类型1 事件类型2 ...", 处理程序) 使用不多, 事件类型之间只能是一个空格
$("div").bind("mouseover mouseout click", function () {
alert("Hello World");
});
})
$(function () {
// $().bind(json对象) {key: value, key:value}
$("div").bind({
mouseover: function () {
$(this).css("background-color", "lightgreen");
},
mouseout: function () {
$(this).css("background-color", "pink");
},
click: function () {
$(this).css("color", "white");
}
});
});
Jquery取消事件绑定
$().unbind();
取消jquery对象的所有绑定事件
$().unbind(“事件类型”);
取消jquery对象的某种绑定事件
$().unbind(“事件类型”, 处理程序的有名函数);
取消某个单独的事件
function fa(){
alert("aaaa");
}
function fb(){
alert("bbbb");
}
function fc(){
alert("cccc");
}
$(function(){
//$().bind(json对象) {key:value,key:value}
$("div").bind({
mouseover:function(){
$(this).css("background-color","lightblue");
},
mouseout:function(){
$(this).css("background-color","pink");
},
click:function(){
$(this).css("color","white");
}
});
$("div").bind("click",fa);
$("div").bind("click",fb);
$("div").bind("click",fc);
});
//给button绑定点击事件
$("button").click(function(){
//取消div的所有事件
//$("div").unbind();
//取消div的单击事件
//$("div").unbind("click");
//取消 处理程序为fc函数的单击事件
$("div").unbind("click",fc);
});
Jquery中的简单的动画效果
基本的显示和隐藏:
show(speed,callBack)
hide(speed,callBack)
toggle(speed,callback); 如果是隐藏就显示,反之 则隐藏
//给button绑定点击事件
$("#btn1").click(function(){
$("div").show(1000,function(){
alert("我又回来啦");
});
});
$("#btn2").click(function(){
//hide(speed,callback) speed:毫秒值
$("div").hide(1000,function(){
alert("我消失了");
});
});
function aa(){
//hide(speed,callback) speed:毫秒值
$("div").toggle(1000,function(){
});
}
$("#btn3").click(aa);
//定时器执行
window.setInterval(aa, 1000);
Jquery对于节点的操作
父子关系添加节点
().append();主动添加在末尾
(
)
.
a
p
p
e
n
d
(
)
;
主
动
添
加
在
末
尾
().appendTo(): 被动添加在末尾
().prepend()主动添加在开头
(
)
.
p
r
e
p
e
n
d
(
)
主
动
添
加
在
开
头
().prependTo() 被动添加在开头
兄弟关系添加节点
after() 在后面添加
before() 在前面添加
insertAfter() 被动在后面添加
insertBefore() 被动在前面添加
替换节点
replaceAll() 主动替换
replaceWith() 被动替换
删除节点
empty() 清除某个节点下的所有子节点
remove() 清除某些节点
复制节点
clone() 该方法只会复制节点的内容 而不会复制事件
clone(true) 该方法不光复制节点的内容 还复制事件
完整代码地址
https://github.com/menglanyingfei/front-end-Learning/tree/master/jquery/jquery-day03