jQuery的使用 仿寫簡版 微博釋出功能
阿新 • • 發佈：2022-01-27
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } .box { 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; display: none; } input { float: right; } ul li a { float: right; } </style> <script src="jquery.min.js"></script> <script> $(function(){// 建立元素 新增元素 將文字區域內容拿出來給賦值給li 清空文字區域內容 // 寫法一： 利用父級監聽，如果在內部使用this 此時的this是btn元素也就是觸發的元素 $('#weibo').on('click','.btn',function(){ $('ul').append($('<li></li>')); $('li').html($('.txt').val()+' <a href="javascript:;">刪除</a>').slideDown() ; }) // 寫法二： 這裡的觸發元素直接就是btn按鈕， 此時的this 返回值也是btn只不過是寫法不同 $('.btn').on('click',function(){ $('ul').append($('<li></li>')); // 這裡的slideDown()是向下滑動 $('li').html($('.txt').val()+' <a href="javascript:;">刪除</a>').slideDown() ; }) // 繫結事件在ul上 觸發事件a // 這裡還用了on()可以給未來動態建立的元素繫結事件的特性 $('ul').on('click','a',function(){ // 這裡的觸發事件是a 此時的this 返回值的a元素 // 這裡的slideUp() 是向上滑動 ，但並非刪除元素，內部的回撥函式是為了滑動之後刪除元素 $(this).parent().slideUp(function(){ $(this).remove() }); }) }) </script> </head> <body> <div class="box" id="weibo"> <span>微博釋出</span> <textarea name="" class="txt" cols="30" rows="10"></textarea> <button class="btn">釋出</button> <ul> </ul> </div> </body> </html>