同一功能三種不一樣實現方式你選哪一個

時間 2019-12-10

標籤同一功能三種不一樣實現方式哪一個简体版

原文原文鏈接

例題一枚：在input框中輸入內容，會相應的顯示在下面的div中的不一樣作法：javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <style type="text/css">
            #div{
                width: 175px;
                height: 100px;
                margin: 20px 84px;
                border:2px solid green;
            }
        </style>
    </head>
    <body>
        <div class="container">
    請輸入內容：<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操做css

<script type="text/javascript">
var put1=document.getElementById("put");
        var div1=document.getElementById("div");
        put1.onkeyup=function(){
        div1.innerText=put1.value;
        }
</script>

指點迷津：getElementById獲取DOM節點，innerHTML:設置或者獲取節點內部的全部HTML代碼；html

這裏須要注意獲取到input裏面的節點內容須要獲取value值。java

這裏使用的是innerHTML屬性和value屬性，注意與JQ中的方法區分jquery

JQ操做：bootstrap

<script src="js/angular.js"></script>
<script type="text/javascript">
$("#put").keyup(function(){
            $("#div").html($("#put").val())
        });
</script>

指點迷津：Query("選擇器").action ();經過選擇器調用事件函數，但JQuery中，JQuery能夠用$代替，即$("選擇器").action();
>>選擇器能夠直接使用CSS選擇器，選中元素;
>>.action表示對元素執行的操做;這裏使用keyup（）事件操做，與JS的不一樣之處在於html（），val()這裏均是方法，在JS中則是屬性app

AngularJs操做：函數

<body ng-app="">
        <div class="container">
    請輸入內容：<input type="text"  ng-model="name"/>
    <div ng-bind="name"></div>
<!--<div id="div" >{{name}}</div>-->
    </div>
    </body>

指點迷津：spa

        1.ng-app：ng-app=""聲明Angular所管轄的範圍，通常寫在body和HTML上，原則上一個頁面只能有一個
            <body ng-app=""></body>
         2.ng-model ：把元素值（指令把輸入域的值）綁定到應用程序變量 name。
            <input type="text" ng-model="name"/>
        3.ng-bind：指令把應用程序變量 name 綁定到某個段落的 innerHTML。可用表達式替代
            <div ng-bind=「name」></div>
             <div>{{name}}</div>彈網頁加載的瞬間會看到{}，能夠用ng-bind替代code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。