js题库-3{留言板的制作？jQuery}

给大家展示一下jQuery方法的留言板制作:

基本框架

<div class="liuyan">
	<span>请留言：</span>
	<textarea cols="30" rows="10"></textarea>
	<button>发布</button>
	<ul></ul>
</div>

参考样式：

<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			.liuyan {
				width: 600px;
				margin: 100px auto;
				border: 1px solid #000;
				padding: 20px;
			}

			textarea {
				width: 450px;
				height: 160px;
				outline: none;
				resize: none;
			}

			ul {
				width: 450px;
				padding-left: 80px;
			}

			ul li {
				line-height: 25px;
				border-bottom: 1px dashed #cccccc;
			}

			input {
				float: right;
			}
		</style>

方法：

<script>
	$("button").click(function(){
		var li = $("<li></li>").text($("textarea").val());
		$("ul").prepend(li);
	})
</script>

原理:点击button按钮，将textarea框里的val()值赋给,新生命的对象
li中，通过jquery中的prepend()方法，将li值插入ul开头。实现留言板。

prepend()方法：它是在某个选中元素的开头插入内容

---

若有疑问，及时提出哦

---

小作者在持续更新中…