复合事件与显示效果
复合事件
hover(f1,f2):切换使用mouseover和mouseout()
toggle(f1,f2,f3,fn):版本问题(jquery1.9以前支持)
多个click()事件，toggle()还有其他含义（隐藏与显示)
$(function(){
$("#h1").mouseover(function(){
alert("悬浮");
});
});
$("#h1").hover(function(){alert("悬浮")},function(){alert("离开")});
/*$("body").toggle(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","yellow");
},function(){
$(this).css("background-color","green");
});*/
显示效果
形式：hide([速度],[回调函数])；
其中速度：可以是数字（毫秒），也可以是单词（fast normal slow，注意加双引号）
hide():隐藏
show:显示
toggle:切换隐藏与显示
淡入淡出 （透明度）
fadeIn():淡入 显示
fadeout:淡出 隐藏
控制高度
slideDown():下拉，显示
slideUp():上拉 隐藏
总结显示问题：
显示：show() fadeIn() slideDown()
隐藏：hide() dadeout() slideUp()
function myShow(){
// $("h3").show(3000,myCallBack);
//$("h3").slideDown(3000);//下拉
//$("h3").fadeIn(3000);//淡入
}
function myCallBack(){
// alert("显示完毕");
};
function myHide(){
// $("h3").hide(3000);
//$("h3").slideUp(3000);//上拉
//$("h3").fadeOut(3000);//淡出
}
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<h1 id="h1">我是h1</h1>
<h3>h3h3</h3>
<p id="color1">color1</p>
<p id=""></p>
<button onclick="myShow()">显示</button>
<button onclick="myHide()">隐藏</button>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#h1").mouseover(function(){
alert("悬浮");
});
});
$(document).ready(function(){
$("#h1").hover(function(){alert("悬浮")},function(){alert("离开")});
//hover:等效于mouseover与mouseout
//toggle循环单击事件click
/*$("body").toggle(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","yellow");
},function(){
$(this).css("background-color","green");
});*/
//toggle:还具备隐藏于显示
/*hide:隐藏
show:显示
toggle:隐藏于显示*/
$("#color1").css({"color":"red","font-size":"100px","background-color":"gray"})
});
// 显示与隐藏：
function myShow(){
// $("h3").show(3000,myCallBack);
//$("h3").slideDown(3000);//下拉
//$("h3").fadeIn(3000);//淡入
}
function myCallBack(){
// alert("显示完毕");
};
function myHide(){
// $("h3").hide(3000);
//$("h3").slideUp(3000);//上拉
//$("h3").fadeOut(3000);//淡出
}
//控制高度
/*slideDown:下拉 显示
slideUp:上拉 隐藏*/
//操作DOM
/* a.样式操作(设置css)
jquery对象.css("属性名","属性值");
jquery对象.css({"属性名":"属性值","属性名":"属性值",...,"属性名":"属性值"});
*/
/*ii.追加或移除样式class
addClass("x");
addClass("x x x");
removeClass("x);
removeClass("x x x"");
removeClass();移除全部样式*/
</script>
</body>
</html>