其他分享
首页 > 其他分享> > 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