jQuery簡(jiǎn)單實(shí)現(xiàn)向列表動(dòng)態(tài)添加新元素的方法示例
本文實(shí)例講述了jQuery簡(jiǎn)單實(shí)現(xiàn)向列表動(dòng)態(tài)添加新元素的方法。分享給大家供大家參考,具體如下:
先看看效果圖:
完整實(shí)現(xiàn)代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn jQuery列表添加新元素</title> <script src="jquery-1.7.2.min.js"></script> </head> <body> <h3>li列表:</h3> <ol> <li>jb51</li> <li>php</li> <li>javascript</li> <li>HTML5</li> </ol> <input type="text" id="text"> <input type="button" id="btn" value="添加"> <script type="text/javascript"> $(function () { $('#btn').click(function () { $('ol').append('<li>'+$('#text').val()+'</li>'); }); }); </script> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)動(dòng)態(tài)顯示select下拉列表數(shù)據(jù)的方法
- jQuery實(shí)現(xiàn)動(dòng)態(tài)加載select下拉列表項(xiàng)功能示例
- jQuery實(shí)現(xiàn)列表內(nèi)容的動(dòng)態(tài)載入特效
- 基于jQuery和Bootstrap框架實(shí)現(xiàn)仿知乎前端動(dòng)態(tài)列表效果
- jQuery動(dòng)態(tài)產(chǎn)生select option下拉列表
- jQuery實(shí)現(xiàn)動(dòng)態(tài)生成年月日級(jí)聯(lián)下拉列表示例
- 如何使用Jquery動(dòng)態(tài)生成二級(jí)選項(xiàng)列表
- jQuery列表動(dòng)態(tài)增加和刪除的實(shí)現(xiàn)方法
相關(guān)文章
jquery 實(shí)現(xiàn)窗口的最大化不論什么情況
無(wú)論瀏覽器處于什么樣的設(shè)置,都要讓這個(gè)彈出的窗口最大化,那么怎么辦呢?下面為大家介紹下讓瀏覽器窗口從默認(rèn)大小變成我們自己的設(shè)置2013-09-09jQuery實(shí)現(xiàn)菜單感應(yīng)鼠標(biāo)滑動(dòng)動(dòng)畫(huà)效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)菜單感應(yīng)鼠標(biāo)滑動(dòng)動(dòng)畫(huà)效果的方法,實(shí)例分析了jQuery中鼠標(biāo)事件及animate的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02基于jquery的監(jiān)控?cái)?shù)據(jù)是否發(fā)生改變
在實(shí)際開(kāi)發(fā)中經(jīng)常會(huì)遇到數(shù)據(jù)沒(méi)發(fā)生改變是,由于用戶不小心點(diǎn)擊保存,這樣導(dǎo)致數(shù)據(jù)庫(kù)的日志增大;還有數(shù)據(jù)填寫(xiě)好后,忘了添加保存直接關(guān)閉頁(yè)面離開(kāi)。2011-04-04jquery操作checked屬性以及disabled屬性的多種方法
這篇文章主要介紹了jquery控制checked屬性以及disabled屬性的多種方法,下面只提到checked,其實(shí)disabled在jquery里的用法和checked是一模一樣的,需要的朋友可以參考下2014-06-06jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01jQuery ajax仿Google自動(dòng)提示SearchSuggess功能示例
這篇文章主要介紹了jQuery ajax仿Google自動(dòng)提示SearchSuggess功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery結(jié)合ajax與.net后臺(tái)調(diào)用sql數(shù)據(jù)庫(kù)實(shí)現(xiàn)搜索自動(dòng)提示相關(guān)操作技巧,需要的朋友可以參考下2019-03-03JQuery表單驗(yàn)證插件EasyValidator用法分析
這篇文章主要介紹了JQuery表單驗(yàn)證插件EasyValidator用法,以實(shí)例形式系統(tǒng)分析了EasyValidator的功能特性及具體用法,是非常實(shí)用的jQuery插件,需要的朋友可以參考下2014-11-11