jQuery显示-隐藏图片的小案例,适合入门
Posted 恵玩科技
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery显示-隐藏图片的小案例,适合入门相关的知识，希望对你有一定的参考价值。
这个案例代码很少,主要讲解jQuery这个框架的用法,初学者一定要注意,jQuery第一个字母是小写的,一旦大小,不会报错,但是会出不来效果.
这是一个显示和隐藏图片的小案例.
点击显示,就会显示图片:
点击隐藏,就会隐藏图片
这样的功能一旦配合时间函数用起来就能够达到很多很厉害的效果了,所以不要小看了这个功能.
这个功能用到了两个函数,一个是show(),另一个是hidden();
函数方法和java语言非常类似,直接.方法名就行
在使用jQuery框架之前,需要先引入jQury,然后创建一个关于jQuery的实例.
语法是:
var person=new jQuery();
完整源码:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>显示隐藏案例</title>
<script src=”js/jquery-1.0.js”></script>
<link rel=”stylesheet” href=”css/showHidden_test.css”>
</head>
<body>
<div class=”myClass”>
<img src=”images/zgl.jpg” height=”220″ width=”200″/></div>
<div class=”myClass1″>
<input type=”button” value=”显示” id=”showID”>
<input type=”button” value=”隐藏” id=”hiddenID”>
</div>
<script type=”text/javascript”>
//创建对象
var person=new jQuery();//这里是小写的j 一定要注意
//单击显示按钮
$(“showID”).onclick=function () {
//调用方法
person.show();
}
//单击隐藏按钮
$(“hiddenID”).onclick=function () {
//调用方法
person.hidden();
}
</script>
</body>
</html>
以上是关于jQuery显示-隐藏图片的小案例,适合入门的主要内容，如果未能解决你的问题，请参考以下文章