<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>隐藏显示</title> <style> .header{ 302px; height:40px; background:green; font-size:20px; margin-bottom: 0px; } .content{ 300px; border:1px solid #333; background:#CCC; display: none; margin-top:0px; } .aa{ height: 200px; 200px; border:1px solid #ccc; } </style> </head> <script type="text/javascript" src="js/jquery-1.12.1.js"></script> <script type="text/javascript"> // $(function (){ // 模仿发送短信(事件委托) $(document).on('click','.img',function(){ if ($(this).attr('src')==='img/img1.png') { $(this).attr('src','img/img2.png') } else { $(this).attr('src','img/img1.png'); } }) $(document).on('click','.submit',function(){ var tval = $('.con').val(); var imgsrc = $('.img').attr('src'); var cc = '<img src='+imgsrc+'>' $('.aa').append(cc + tval + '<br>'); }) // 按钮 </script> <body> <div class="aa"></div> <img class="img" src="img/img1.png" onclick=""><input class="con" type="text" name=""> <input class="submit" type="button" name="" value="提交"> <!-- <h5 class="header" align="center">什么是jQuery?</h5> <div class="content"> Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 , 它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), jQuery2.0及后续版本将不再支持IE6/7/8浏览器。 jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果, 并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全, 而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页面保持代码和html内容分离,也就是说, 不用再在html里面插入一堆js来调用命令了,只需要定义id即可。 </div> --> </body> </html>