使用JQuery制作簡易留言板
更新時間:2016年05月23日 15:36:51 作者:氣氛組.
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript和JQuery制作簡易留言板功能,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下
運(yùn)行效果
HTML代碼
<textarea name="" id="text'"></textarea><span id="info"></span> <br> <button>發(fā)布</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制作簡易留言板的詳細(xì)內(nèi)容,更多關(guān)于JQuery留言板的資料請關(guān)注腳本之家其它相關(guān)文章!
您可能感興趣的文章:
相關(guān)文章
jquery實現(xiàn)側(cè)邊欄左右伸縮效果的示例
下面小編就為大家分享一篇jquery實現(xiàn)側(cè)邊欄左右伸縮效果的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12基于jquery ui的alert,confirm方案(支持換膚)
這篇文章主要介紹了基于jquery ui的alert,confirm方案(支持換膚),修改自網(wǎng)友的源碼,有需要的小伙伴參考下。2015-04-04基于jquery的finkyUI插件與Ajax實現(xiàn)頁面數(shù)據(jù)加載功能
基于jquery的finkyUI插件與Ajax實現(xiàn)頁面數(shù)據(jù)加載功能,需要的朋友可以參考下。2010-12-12