Jquery对事件的绑定
$().bind(“事件类型”, 事件处理); 给jquery绑定一个事件
$().bind(“事件类型1 事件类型2 事件类型3..”, 事件处理)
绑定多个事件类型并且使用同一个处理程序。
$().bind({
事件类型1:处理程序,
事件类型2:处理程序,
事件类型3:处理程序...
});
image.png
image.png
$(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(); 主动添加在末尾
$().appendTo(): 被动添加在末尾
$().prepend() 主动添加在开头
$().prependTo() 被动添加在开头
image.png
兄弟关系添加节点
after() 在后面添加
before() 在前面添加
insertAfter() 被动在后面添加
insertBefore() 被动在前面添加
image.png
替换节点
replaceAll() 主动替换
replaceWith() 被动替换
image.png
删除节点
empty() 清除某个节点下的所有子节点
remove() 清除某些节点
image.png
复制节点
clone() 该方法只会复制节点的内容 而不会复制事件
clone(true) 该方法不光复制节点的内容 还复制事件
image.png
完整代码地址
image.png
https://github.com/menglanyingfei/front-end-Learning/tree/master/jquery/jquery-day03
