jQuery显示-隐藏图片的小案例,适合入门

这个案例代码很少,主要讲解jQuery这个框架的用法,初学者一定要注意,jQuery第一个字母是小写的,一旦大小,不会报错,但是会出不来效果.

这是一个显示和隐藏图片的小案例.

点击显示,就会显示图片:

image

点击隐藏,就会隐藏图片

image

这样的功能一旦配合时间函数用起来就能够达到很多很厉害的效果了,所以不要小看了这个功能.

这个功能用到了两个函数,一个是show(),另一个是hidden();

函数方法和java语言非常类似,直接.方法名就行

在使用jQuery框架之前,需要先引入jQury,然后创建一个关于jQuery的实例.

语法是:

var person=new jQuery();

image

完整源码:

<!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>

张 大鹏

北京理想国惠玩科技有限公司CEO

发表评论

电子邮件地址不会被公开。 必填项已用*标注