使用JQuery制作簡(jiǎn)易留言板
運(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制作簡(jiǎn)易留言板的詳細(xì)內(nèi)容,更多關(guān)于JQuery留言板的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
jquery實(shí)現(xiàn)吸頂導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)吸頂導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01jQuery常見(jiàn)動(dòng)畫(huà)效果實(shí)現(xiàn)介紹
這篇文章主要為大家介紹了jQuery編程動(dòng)畫(huà)基本實(shí)現(xiàn)方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10jQuery實(shí)現(xiàn)的簡(jiǎn)單排序功能示例【冒泡排序】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單排序功能,結(jié)合實(shí)例形式分析了冒泡排序的原理及具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01jquery實(shí)現(xiàn)側(cè)邊欄左右伸縮效果的示例
下面小編就為大家分享一篇jquery實(shí)現(xiàn)側(cè)邊欄左右伸縮效果的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動(dòng)端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下2020-05-05基于jquery ui的alert,confirm方案(支持換膚)
這篇文章主要介紹了基于jquery ui的alert,confirm方案(支持換膚),修改自網(wǎng)友的源碼,有需要的小伙伴參考下。2015-04-04基于jquery的finkyUI插件與Ajax實(shí)現(xiàn)頁(yè)面數(shù)據(jù)加載功能
基于jquery的finkyUI插件與Ajax實(shí)現(xiàn)頁(yè)面數(shù)據(jù)加載功能,需要的朋友可以參考下。2010-12-12jQuery中insertAfter()方法用法實(shí)例
這篇文章主要介紹了jQuery中insertAfter()方法用法,實(shí)例分析了insertAfter()方法的功能、定義及匹配的元素插入到另一個(gè)指定的元素集合后面的使用技巧,需要的朋友可以參考下2015-01-01