第二十三篇 jQuery 學習5 添加元素
阿新 • • 發佈：2017-09-25
展示 頁面 script 興趣 提示 什麽 urn round wid
jQuery 學習5 添加元素
同學們，這節課，使用jQuery動態添加元素，是很關鍵的一課，一般用在什麽地方呢：別人發表一篇文章，你評論樓主的時候，總不能是提交表單，到後臺的其他頁面處理，然後再刷新回來吧，這樣的話，用戶體驗不好。考慮一下用戶的計算機配置不好、網絡不好等多個因素，總是刷新頁面，會造成等待的時間太長。甚至有的瀏覽器直接刷新不出來了，那麽用戶就抓狂了，就對你的產品有怨言。 所以，我們做前端，要實現動態添加，以後再使用ajax這類異步刷新和後臺交互就可以了，那麽多的不說，我們現在學的階段，就掌握前端的靜態、動態就好了。 jQuery添加元素，提供了四個方法：- append() - 在被選元素的結尾插入內容
- prepend() - 在被選元素的開頭插入內容
- after() - 在被選元素之後插入內容
- before() - 在被選元素之前插入內容
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>打開頁面測試代碼，輸入內容，如果內容為空，則給出提示，如果有內容，則添加相應的所有元素和內容。不過這裏，因為是只有前端，沒有後臺數據庫的原因，並且老師給出的操作，這裏的頭像、姓名、時間，都是固定的，只有內容是我們輸入的內容，是可變化的。 我們在頁面，檢查源碼，可以看到，我們添加的內容，它是在id為div1最後出現的，這就是append()方法，在被選中元素的結尾處添加內容，記住，是結尾處，所以說，添加的內容永遠都是在最後面出現的，這樣就能實現頁面靜態添加了。以後再使用ajax這類異步訪問後臺，添加數據庫，一切OK！就能實現動態添加，而並不用總是刷新頁面提交，給用戶給高效的體驗。 老師這裏演示的是append()，其意思是“在被選中的元素結尾處添加內容”，同學們只要掌握這一個，那麽其他三個都是一樣的，只是位置不一樣罷了。 不過，使用此方法添加內容，也有一些問題的，並非bug，所以問題不大，但是做一些功能或者效果什麽的，就會存在一定的問題，有興趣的同學，可以自己嘗試，也可以發問。jQuery 學習5 添加元素</title> <!--使用jQuery一定不要忘記引用jQuery文件--> <script src="../js/jquery-1.12.2.min.js"></script> <style> #div1 { margin: auto; width: 750px; border: 1px solid #dedede; padding:15px; } #div1-1 img{ width: 75px; } .div1-2{ margin-top:30px; } .div1-2 img{ width: 75px; } .y{ float: right; } .content{ background-color: #dedede; padding: 10px; margin-top:20px; } #div2{ margin: auto; width: 750px; margin-top:20px; } #div2 input{ width: 80%; height: 30px; } </style> </head> <body> <!--給一個最外層的div，做父級管理--> <div id="div1"> <!--這層div是管理樓主的--> <div id="div1-1"> <!--這是樓主的頭像--> <img src="../img/3.jpg" alt="頭像"/> <span>樓主的名字</span> <!--給時間一個右浮動，跑到右邊去--> <span class="y">2017-09-20 11:00:00</span> <!--這個div是管理樓主發表的內容的--> <div class="content"> 說出你的名字，我好記住。。。。 </div> </div> <!--這下面的div是路人評論的--> <div class="div1-2"> <!--路人的頭像--> <img src="../img/4.png" alt="路人頭像"/> <span>路人的名字</span> <!--給時間一個右浮動，跑到右邊去--> <span class="y">2017-09-20 11:01:00</span> <!--這個div是管理路人發表的內容的--> <div class="content"> 我是路人甲，我是第一個評論的。 </div> </div> </div> <!--這個div放在下面，給一個輸入框和發送--> <div id="div2"> <p>請在下方輸入評論內容並發送</p> <!--給input表單元素一個id，jQuery裏調用--> <input id="neirong" type="text"/> <!--給a標簽一個點擊事件--> <a onclick="fasong()" href="javascript:;">發送</a> </div> <script> function fasong(){ //判斷發送的內容 if($("#neirong").val() == ‘‘){ //如果發送的內容為空，則給出提示，並返回false 結束代碼運行 alert(‘內容不能為空‘); return false; } //找到id為div1的元素，然後用after()方法，在它所有元素的最後面添加以下的內容 $("#div1").append( ‘<div class="div1-2">‘ + ‘<img src="../img/4.png" alt="路人頭像"/>‘ + ‘<span style="margin-left: 8px;">路人的名字</span>‘ + ‘<span class="y">2017-09-20 11:01:00</span>‘ + ‘<div class="content">‘ + $("#neirong").val() + ‘</div>‘ ); //內容發表成功後，就設置成沒有內容 $("#neirong").val(‘‘); } </script> </body> </html>
第二十三篇 jQuery 學習5 添加元素