JQuery DOM操作
Posted 胡了个凡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="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="width: 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 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操作的主要内容，如果未能解决你的问题，请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段