模仿手机发送短信 

<!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{  
    width:302px;  
    height:40px;  
    background:green;  
    font-size:20px;  
    margin-bottom: 0px;  
}  
.content{  
    width:300px;  
    border:1px solid #333;  
    background:#CCC;  
    display: none;  
    margin-top:0px;  
}  
.aa{ height: 200px; width: 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>

　　

posted @ 2017-06-30 15:17  小毛驴--  阅读(209)  评论(0)    收藏  举报