首页 > 代码库 > 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>&nbsp<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>&nbsp<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>&nbsp<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操作