其他分享
首页 > 其他分享> > jquery的基础

jquery的基础

作者：互联网

今天学到了ajax，回头发现自己的jq忘得一干二净，吓得我赶快回去开始复习一遍。

1：常见的DOM事件；其中load  和 unload已经被废弃；具体的在http://www.runoob.com/jquery/jquery-events.html

2：显示隐藏；显示show（），隐藏hide（），toggle（）；

例子：在show（）；里面可以有参数时间，效果 （jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

toggle（）例子：toggle可以把显示和隐藏整合到一起（）里面也有参数

<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>

3：淡入淡出；

四种用法基本一样：

$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>

<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  

 

标签：jquery,function,淡入,show,基础,fadeToggle,toggle,click
来源： https://www.cnblogs.com/yinziqiang0909/p/10521089.html