將input框中輸入內(nèi)容顯示在相應(yīng)的div中【三種方法可選】
例題一枚:在input框中輸入內(nèi)容,會相應(yīng)的顯示在下面的div中的不同做法:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" /> <style type="text/css"> #div{ width: 175px; height: 100px; margin: 20px 84px; border:2px solid green; } </style> </head> <body> <div class="container"> 請輸入內(nèi)容:<input type="text" id="put" /> <div id="div" ></div> </div> </body> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script>
js:原生DOM操作
<script type="text/javascript"> var put1=document.getElementById("put"); var div1=document.getElementById("div"); put1.onkeyup=function(){ div1.innerText=put1.value; } </script>
指點迷津:
getElementById獲取DOM節(jié)點,innerHTML:設(shè)置或者獲取節(jié)點內(nèi)部的所有HTML代碼;
這里需要注意獲取到input里面的節(jié)點內(nèi)容需要獲取value值。
這里使用的是innerHTML屬性和value屬性,注意與JQ中的方法區(qū)分
JQ操作:
<script src="js/angular.js"></script> <script type="text/javascript"> $("#put").keyup(function(){ $("#div").html($("#put").val()) }); </script>
指點迷津:
jQuery("選擇器").action ();通過選擇器調(diào)用事件函數(shù),但JQuery中,JQuery可以用$代替,即$("選擇器").action();
>>選擇器可以直接使用CSS選擇器,選中元素;
>>.action表示對元素執(zhí)行的操作;這里使用keyup()事件操作,與JS的不同之處在于html(),val()這里均是方法,在JS中則是屬性
AngularJs操作:
<body ng-app=""> <div class="container"> 請輸入內(nèi)容:<input type="text" ng-model="name"/> <div ng-bind="name"></div> <!--<div id="div" >{{name}}</div>--> </div> </body>
指點迷津:
1.ng-app:ng-app=""聲明Angular所管轄的范圍,一般寫在body和HTML上,原則上一個頁面只能有一個
<body ng-app=""></body>
2.ng-model :把元素值(指令把輸入域的值)綁定到應(yīng)用程序變量 name。
<input type="text" ng-model="name"/>
3.ng-bind: 指令把應(yīng)用程序變量 name 綁定到某個段落的 innerHTML。可用表達(dá)式替代
<div ng-bind=“name”></div>
<div>{{name}}</div>
彈網(wǎng)頁加載的瞬間會看到{},可以用ng-bind替代
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
學(xué)習(xí)Javascript閉包(Closure)知識
這篇文章主要介紹了學(xué)習(xí)Javascript閉包(Closure)知識的相關(guān)資料,需要的朋友可以參考下2016-08-08JavaScript中offsetWidth的bug及解決方法
這篇文章主要為大家詳細(xì)介紹了JavaScript中offsetWidth的bug及解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05js print打印網(wǎng)頁指定區(qū)域內(nèi)容的簡單實例
下面小編就為大家?guī)硪黄猨s print打印網(wǎng)頁指定區(qū)域內(nèi)容的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11

用javascript實現(xiàn)代替marquee的滾動字幕效果代碼