DOM操作 发说说小功能例子
页面部分
1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title></title> 4 <link href="css/Defaultcss.css" rel="stylesheet" /> 5 <script src="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=" 99%; height: 130px;" id="text"></textarea> 13 <input type="button" value="发表" id="btn1" /> 14 15 </div> 16 </form> 17 </body>
CSS样式表
1 * { 2 margin: 0px; 3 padding: 0px; 4 } 5 6 #publist { 7 30%; 8 margin: 0 auto; 9 background-color: #dee6f7; 10 position: relative; 11 } 12 13 14 #context { 15 100%; 16 height: 500px; 17 background-color: #a4cac3; 18 margin: 10px auto; 19 } 20 21 .hf { 22 90%; 23 margin-top: 10px; 24 margin-left: 5%; 25 background-color: white; 26 } 27 28 .fb_name { 29 80%; 30 height: 30px; 31 line-height: 30px; 32 margin-left: 10%; 33 } 34 35 .fb_text { 36 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 80%; 45 height: 30px; 46 margin-left: 10%; 47 text-align: right; 48 line-height: 30px; 49 } 50 .hf-txt { 51 90%; 52 margin-left:5%; 53 margin-top:5px; 54 background-color:LightGray; 55 } 56 .hf-cz { 57 height:20px; 58 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 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 90%; 77 margin-left: 5%; 78 79 } 80 .h-h-txt {height: 20px; 81 90%; 82 margin-left: 5%; 83 84 } 85 .minhf-hf { 86 position:absolute; 87 height: 40px; 88 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 90%; 98 margin-left: 5%; 99 100 } 101 .minh-h-txt {height: 20px; 102 90%; 103 margin-left: 5%; 104 105 } 106 #hnick { 107 80px; 108 } 109 #htxt { 110 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>
页面显示如下
