这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要介绍了 javascript 实现微博发布小功能的示例代码,具有一定的参考价值,下面跟着小编一起来看下吧
微博发布功能,可发布可删除。样式没设置忽略,主要知识点及注意点:
1、动态添加节点标签。
2、内容为空时不能发布。
3、新发布的内容要在上面。
4、内容删除要同时删除掉节点。
5、为保持样式输入框要设置为不可拖拽。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- * {margin: 0;padding: 0;}
- .box{
- border: 1px solid #000;
- width: 600px;
- height: auto;
- margin:100px auto;
- padding:30px 0;
- }
- textarea{
- width: 450px;
- resize:none;
- margin-left: 20px;
- }
- ul li{
- width: 450px;
- list-style: none;
- border-bottom: 1px dotted #ccc;
- margin-left:20px;
- line-height: 30px;
- color: #333;
- }
- ul li a{
- float: right;
- font-size: 12px;
- }
- </style>
- <script src="../jquery-1.11.1.min.js"></script>
- <script type="text/javascript">
- // 方法1
- window.onload = function () {
- var box = document.getElementById("box");
- var boys=box.children;
- var ul = document.createElement("ul");
- box.appendChild(ul);
- boys[2].onclick = function (){
- if(boys[1].value==""){
- alert("输入不能为空");
- return;
- }
- var newli= document.createElement("li");
- newli.innerHTML=boys[1].value+"<a href='javascript:;'>删除</a>";
- boys[1].value ="";
- var lis=ul.children;
- if(lis.length==0){ul.appendChild(newli);}else{
- ul.insertBefore(newli, lis[0]);
- }
- var as=document.getElementsByTagName("a");
- for (var i=0;i<as.length;i++){
- as[i].onclick=function(){
- ul.removeChild(this.parentNode);
- }
- }
- }
- }
- // 方法2 引用jQuery
- // $(function(){
- // $("<ul></ul>").appendTo("#box");
- // var $text = $("#box").find("textarea");
- // var $btn = $("#box").find("button");
- // $btn.on("click",function(){
- // if($text.val() ==""){
- // alert("请输入内容");
- // return;
- // }
- // $("ul").prepend("<li>"+$text.val()+"<a href='javascript:;'>删除</a></li>");
- // $text.val("");
- // $("a").on("click",function(){
- // $(this).parent("li").remove();
- // })
- // })
- // })
- </script>
- </head>
- <body>
- <div class="box" id="box">
- 微博发布:</br><textarea cols="30" rows="10"></textarea>
- <button>发布</button>
- </div>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0529/328573.html