使用JQuery制作简易留言板
作者：气氛组.
这篇文章主要为大家详细介绍了如何使用JavaScript和JQuery制作简易留言板功能，文中的示例代码讲解详细，有需要的小伙伴可以参考一下
运行效果
HTML代码
<textarea name="" id="text'"></textarea><span id="info"></span> <br> <button>发布</button> <ul> </ul>
css代码
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid gainsboro;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(198, 198, 198);
color: black;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
}
li a:hover {
color: red;
}
#info {
font-size: 10px;
color: red;
}
</style>
JS代码
$("button").on('click', function() {
if($('textarea').val() == ""){
$('span').html('asd')
return;
}
var li = $('<li></li>')
li.html($('textarea:first').val())
li.append('<a href="javascript:;">删除</a>')
$('ul').prepend(li)
$('textarea:first').val('')
})
$('ul').on('click', 'a', function() {
$(this).parent('li').remove()
})
以上就是使用JQuery制作简易留言板的详细内容，更多关于JQuery留言板的资料请关注脚本之家其它相关文章！