首页 > 代码库 > JQuery DOM操作
JQuery DOM操作
DOM操作 发说说小功能例子
页面部分
1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title></title> 4 <link href=http://www.mamicode.com/"css/Defaultcss.css" rel="stylesheet" /> 5 <script src=http://www.mamicode.com/"js/jquery-1.7.2.min.js"></script> 6 </head> 7 <body> 8 <form id="form1" runat="server"> 9 <%--发表--%> 10 <div id="publist"> 11 用户：<input type="text" id="nick" /> 12 <textarea style="width: 99%; height: 130px;" id="text"></textarea> 13 <input type="button" value=http://www.mamicode.com/"发表" id="btn1" /> 14 15 </div> 16 </form> 17 </body>
CSS样式表
1 * { 2 margin: 0px; 3 padding: 0px; 4 } 5 6 #publist { 7 width: 30%; 8 margin: 0 auto; 9 background-color: #dee6f7; 10 position: relative; 11 } 12 13 14 #context { 15 width: 100%; 16 height: 500px; 17 background-color: #a4cac3; 18 margin: 10px auto; 19 } 20 21 .hf { 22 width: 90%; 23 margin-top: 10px; 24 margin-left: 5%; 25 background-color: white; 26 } 27 28 .fb_name { 29 width: 80%; 30 height: 30px; 31 line-height: 30px; 32 margin-left: 10%; 33 } 34 35 .fb_text { 36 width: 80%; 37 background-color: #AEEEEE; 38 border-bottom: 1px solid #000; 39 border-top: 1px solid #000; 40 margin-left: 10%; 41 } 42 43 .fb_cz { 44 width: 80%; 45 height: 30px; 46 margin-left: 10%; 47 text-align: right; 48 line-height: 30px; 49 } 50 .hf-txt { 51 width:90%; 52 margin-left:5%; 53 margin-top:5px; 54 background-color:LightGray; 55 } 56 .hf-cz { 57 height:20px; 58 width:90%; 59 line-height:20px; 60 font-size:12px; 61 margin-left:5%; 62 text-align:right; 63 } 64 .hf-hf { 65 position:absolute; 66 height: 40px; 67 width: 90%; 68 margin-left: 5%; 69 margin-top: 5px; 70 background-color:#dee6f7; 71 visibility:hidden; 72 73 } 74 .h-h-name { 75 height: 20px; 76 width: 90%; 77 margin-left: 5%; 78 79 } 80 .h-h-txt {height: 20px; 81 width: 90%; 82 margin-left: 5%; 83 84 } 85 .minhf-hf { 86 position:absolute; 87 height: 40px; 88 width: 90%; 89 margin-left: 5%; 90 margin-top: 5px; 91 background-color:#dee6f7; 92 visibility:hidden; 93 94 } 95 .minh-h-name { 96 height: 20px; 97 width: 90%; 98 margin-left: 5%; 99 100 } 101 .minh-h-txt {height: 20px; 102 width: 90%; 103 margin-left: 5%; 104 105 } 106 #hnick { 107 width:80px; 108 } 109 #htxt { 110 width:220px;} 111 .del { 112 cursor: pointer; 113 } 114 .huifu { 115 cursor: pointer; 116 } 117 .hf { 118 cursor: pointer; 119 } 120 .delhf { 121 cursor: pointer; 122 }
js功能代码
1 <script> 2 //发表 3 $("#btn1").click(function () { 4 var str = " <div class=\"hf\">"; 5 str += " <div class=\"fb_name\">" + $("#nick").val() + "</div>"; 6 str += "<div class=\"fb_text\">" + $("#text").val() + "</div>"; 7 str += "<div class=\"fb_cz\"><a class=\"huifu\">回复</a> <a class=\"del\">删除</a></div>"; 8 str += " <div class=\"hf-hf\">"; 9 str += " <div class=\"h-h-name\">用户名:<input type=\"text\" id=\"hnick\" /></div>"; 10 str += " <div class=\"h-h-txt\"><input type=\"text\" id=\"htxt\" /><a class=\"fs\">发送</a></div>"; 11 str += " </div>"; 12 str += " </div>"; 13 $(this).after(str); 14 }); 15 //删除发表 16 $(".del").live("click", function () { 17 $(this).parent().parent().remove(); 18 }); 19 //回复 20 $(".huifu").live("click", function () { 21 $(this).parents(".hf").find(".hf-hf").css("visibility", "visible"); 22 }); 23 //发送 24 $(".fs").live("click", function () { 25 var str = "<div class=\"hf-txt\">" + $("#hnick").val() + ":" + $("#htxt").val() + "</div>"; 26 str += "<div class=\"hf-cz\"> <a class=\"hf\">回复</a> <a class=\"delhf\">删除</a></div>"; 27 str += " <div class=\"minhf-hf\">"; 28 str += " <div class=\"minh-h-name\">用户名:<input type=\"text\" id=\"minhnick\" /></div>"; 29 str += " <div class=\"minh-h-txt\"><input type=\"text\" id=\"minhtxt\" /><a class=\"minfs\">发送</a></div>"; 30 $(this).parent().parent().before(str); 31 $(this).parent().parent().css("visibility", "hidden"); 32 }); 33 //小回复 34 $(".hf").live("click", function () { 35 $(this).parents(".hf").find(".minhf-hf:eq(0)").css("visibility", "visible"); 36 }); 37 //小删除 38 $(".delhf").live("click", function () { 39 $(this).parent().prev().remove(); 40 $(this).parent().remove(); 41 }); 42 //小回复发表 43 $(".minfs").live("click", function () { 44 var str = "<div class=\"hf-txt\" style=\"background-color:white;font-size:10px;\">" + $("#minhnick").val() + ":" + $("#minhtxt").val() + "</div>"; 45 str += "<div class=\"hf-cz\" style=\"font-size:8px;\"> <a class=\"hf\">回复</a> <a class=\"delhf\">删除</a></div>"; 46 str += " <div class=\"minhf-hf\">"; 47 str += " <div class=\"minh-h-name\">用户名:<input type=\"text\" id=\"minhnick\" /></div>"; 48 str += " <div class=\"minh-h-txt\"><input type=\"text\" id=\"minhtxt\" /><a class=\"minfs\">发送</a></div>"; 49 $(this).parent().parent().before(str); 50 $(this).parent().parent().css("visibility", "hidden"); 51 }); 52 </script>
页面显示如下
JQuery DOM操作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。