标签：padding app 浏览器 min jquery java har 第一个 size
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery 学习5 添加元素</title> <!--使用jQuery一定不要忘记引用jQuery文件--> <script src="../js/jquery-1.12.2.min.js"></script> <style> #div1 { margin: auto; width: 750px; border: 1px solid #dedede; padding:15px; } #div1-1 img{ width: 75px; } .div1-2{ margin-top:30px; } .div1-2 img{ width: 75px; } .y{ float: right; } .content{ background-color: #dedede; padding: 10px; margin-top:20px; } #div2{ margin: auto; width: 750px; margin-top:20px; } #div2 input{ width: 80%; height: 30px; } </style> </head> <body> <!--给一个最外层的div，做父级管理--> <div id="div1"> <!--这层div是管理楼主的--> <div id="div1-1"> <!--这是楼主的头像--> <img src="../img/3.jpg" alt="头像"/> <span>楼主的名字</span> <!--给时间一个右浮动，跑到右边去--> <span class="y">2017-09-20 11:00:00</span> <!--这个div是管理楼主发表的内容的--> <div class="content"> 说出你的名字，我好记住。。。。 </div> </div> <!--这下面的div是路人评论的--> <div class="div1-2"> <!--路人的头像--> <img src="../img/4.png" alt="路人头像"/> <span>路人的名字</span> <!--给时间一个右浮动，跑到右边去--> <span class="y">2017-09-20 11:01:00</span> <!--这个div是管理路人发表的内容的--> <div class="content"> 我是路人甲，我是第一个评论的。 </div> </div> </div> <!--这个div放在下面，给一个输入框和发送--> <div id="div2"> <p>请在下方输入评论内容并发送</p> <!--给input表单元素一个id，jQuery里调用--> <input id="neirong" type="text"/> <!--给a标签一个点击事件--> <a onclick="fasong()" href="javascript:;">发送</a> </div> <script> function fasong(){ //判断发送的内容 if($("#neirong").val() == ‘‘){ //如果发送的内容为空，则给出提示，并返回false 结束代码运行 alert(‘内容不能为空‘); return false; } //找到id为div1的元素，然后用after()方法，在它所有元素的最后面添加以下的内容 $("#div1").append( ‘<div class="div1-2">‘ + ‘<img src="../img/4.png" alt="路人头像"/>‘ + ‘<span style="margin-left: 8px;">路人的名字</span>‘ + ‘<span class="y">2017-09-20 11:01:00</span>‘ + ‘<div class="content">‘ + $("#neirong").val() + ‘</div>‘ ); //内容发表成功后，就设置成没有内容 $("#neirong").val(‘‘); } </script> </body> </html>
标签：padding app 浏览器 min jquery java har 第一个 size
原文地址：http://www.cnblogs.com/longfeng995/p/7590466.html
