




下載本文檔
版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
第jQuery實現簡單評論區本文實例為大家分享了jQuery實現簡單評論區的具體代碼,供大家參考,具體內容如下
1.我們先來看看效果
①點擊“發布“
②點擊“刪除評論“
2.如何實現
首先我們用html和css來進行編寫這樣一個區域:
html內容:
divid="box"
divid="fabu"
textareaplaceholder="請輸入內容吧!!!"id="text"/textarea
/div
buttonid="btn_1"發布/button
divid="pinlun"/div
/div
①我們先寫一個大盒子box包裹里面的所有內容
②你面分別寫一個文本,一個發布按鈕,一個評論區
③點擊按鈕出現點擊事件onclick執行函數fun1()
css內容:
padding:0;
margin:0;
#box{
width:600px;
background-color:aqua;
margin:0auto;
#fabu{
width:600px;
height:300px;
background-color:burlywood;
#pinlu{
width:600px;
background-color:aqua;
textarea{
width:600px;
height:300px;
border:none;
background-color:burlywood;
font-size:24px;
#btn_1{
width:600px;
height:30px;
background-color:cornflowerblue;
outline:none;
::placeholder{
font-size:24px;
#btn_2{
width:80px;
height:30px;
background-color:brown;
border-radius:4px;
p{text-align:right;}
#neirong{
background-color:coral;
border:1pxsolidburlywood;
}
①*{}我們先把所有元素的默認的內外邊距設置為0
②然后相應的給各個元素設置相應的樣式
③在用::placeholder偽元素標簽設置提示文字的大小
④我們不給父級box和和評論區的div不設置高度,由評論內容的多少撐開。
functionfun1(){
$('#pinlun').append(
"divid='neirong'"+text.value+"brpbuttonid='btn_2'刪除評論/button/p/div
text.value="";}
(functionfun2(){
$("#pinlun").on("click","button",function(){
$(this).parent().parent().remove();
})})()
①jQuery用$("選擇器")來獲取元素
②append()的方法在指定的元素內添加內容(包括標簽)
③在我們點擊執行fun1()同時還要將內容歸為空(text.value="")
④由于點擊出現的素是瀏覽器后來加入的
1.所以我們直接綁定監聽事件是無法找到該元素(會報該元素未定義)
2.所以我們用jQuery設置個立即執行函數fun2()
3.fun2()中的on方法:元素a.on(“監聽事件”,"元素a內的元素",試行函
數),這樣就不用考慮元素是否未定義的難題了
⑤因為該函數綁定的是button按鈕所以this就是按鈕,刪除我們肯定是要刪除內容
這個div,parent
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 職業道德與法律課件教學
- 幼兒園體育活動新學期計劃
- 學校工傷事故通報及處理范文
- 高血壓病的常見癥狀和處理方法
- 物業客服人際溝通職責
- 一年級下冊語文教學方法計劃
- 2025高中語文教學評價改進計劃
- 小學四年級英語班級教學計劃
- 手術患者跨科室交接流程他
- 護士健康管理分層培訓計劃
- IATF16949-2016版質量體系培訓
- 裝卸工安全培訓課件
- 高位截癱護理查房
- 2024圖書約稿合同范本
- 肥料代理合作協議書
- 檢修作業培訓
- 山東省煙臺市2024-2025學年高二化學下學期期末考試試題
- 漢語言文學本科自考真題1301-全國-古代漢語
- 湖南省衡陽市2023-2024學年八年級物理下學期期末模擬測試卷
- 2023-2024學年北京市西城區八年級物理第二學期期末學業水平測試試題及答案解析
- 統計與數據分析基礎-形成性考核二(項目3-項目5階段性測試權重25%)-國開-參考資料
評論
0/150
提交評論