使用JQuery制作简易留言板
更新时间：2016年05月23日 15:36:51 作者：气氛组.
这篇文章主要为大家详细介绍了如何使用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留言板的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了jQuery实现的多级下拉菜单效果代码,涉及jquery鼠标事件及页面元素的显示与隐藏效果实现技巧,非常具有实用价值,需要的朋友可以参考下2015-08-08
大部分人使用 jQuery 的时候都是使用第一种无 new 的构造方式，直接 $('') 进行构造，这也是 jQuery 十分便捷的一个地方。这篇文章主要给大家介绍了关于jquery学习笔记之无new构建的相关资料，需要的朋友们下面来一起看看吧。2017-12-12
这篇文章主要为大家详细介绍了jQuery日历插件datepicker用法，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了jquery实现移动端点击图片查看大图特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
本文为大家详细介绍下如何使用jquery触发a标签的跳转事件，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
这篇文章主要介绍了JQuery中Bind()事件用法,实例分析了Bind()事件的功能、特点与绑定事件时的使用技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了nicejforms——美化表单不用愁2007-02-02
jquery中jquery.offset().top/left用于获取div距离窗口的距离而jquery.position().top/left用于获取距离父级div的距离，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-10
这篇文章主要为大家详细介绍了使用jquery制作非常漂亮的相册集，步骤详细，细节介绍完整，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要为大家详细介绍了Jquery实现ready和bind事件的相关资料，感兴趣的小伙伴们可以参考一下2016-04-04
最新评论