jQuery的基本效果

最新推荐文章于 2022-12-13 13:43:21 发布

茶几poi

最新推荐文章于 2022-12-13 13:43:21 发布

阅读量142

点赞数

分类专栏：萌新文章标签： jQuery

本文链接：https://blog.csdn.net/qq_41603209/article/details/88621029

版权

萌新专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
这里推荐一个网站http://www.w3school.com.cn/jquery/index.asp，其中有很多的教程，从中可以学到很多知识，例如我们随意抽取jQuery效果中的淡入淡出和滑动说一下。
点击前

点击后

<!DOCTYPE html>
<html>
<head>
<script src="JS/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("button").click(function(){
	    $("#div1").fadeToggle();
	    $("#div2").fadeToggle("slow");
	    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>

<body>
<p>淡入淡出。。。</p>
<button>请点击</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:yellow;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:pink;"></div>
</body>

</html>

而另一个滑动就是我们平时十分常见的效果之一了

点击前
点击后会滑出
代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="JS/jquery-1.7.2.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:3px;
text-align:center;
background:#66CCFF;
border:solid 1px #66CCFF;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>First</p>
<p>Second</p>
</div>
 
<p class="flip">请点击</p>
 
</body>
</html>

这都是jQuery最为常见的用法，但能从中看出jQuery对于页面设计的帮助！