入力ボックスに内容を入力すると、対応する div に 3 つのメソッドインスタンスが表示されます。-jsチュートリアル-php.cn

入力ボックスに内容を入力すると、対応する div に 3 つのメソッドインスタンスが表示されます。

零下一度

リリース： 2017-05-09 10:08:26

オリジナル

2898 人が閲覧しました

この記事では、以下の p に表示される、入力ボックスにコンテンツを入力するさまざまな方法を主に紹介します。エディターで見てみましょう質問例: 入力ボックスに内容を入力すると、以下のページにさまざまなメソッドが表示されます:

<!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">
 #p{
 width: 175px;
 height: 100px;
 margin: 20px 84px;
 border:2px solid green;
 }
 </style>
 </head>
 <body>
 <p class="container">
 请输入内容：<input type="text" id="put" />
 <p id="p" ></p>
 </p>
 </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 p1=document.getElementById("p");
 put1.onkeyup=function(){
 p1.innerText=put1.value;
 }
</script>

ログイン後にコピー

ガイドライン:

getElementById を取得して DOM ノード、innerHTML: ノード内のすべての HTML コードを設定または取得します ここで、入力内のノードのコンテンツを取得することに注意してください。、値 value を取得する必要があります。

ここでは、innerHTML 属性と value 属性が JQ のメソッドと区別されるように注意してください

JQ 操作:

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

ログイン後にコピー

ガイド:

jQuery ("selector") ) .action (); はセレクターを通じて event

関数

を呼び出しますが、JQuery では、JQuery は $("selector").action(); >> に置き換えることができます。 ;セレクターは CSS セレクターを使用して要素を選択できます。 >>.action は要素に対して実行される操作を表します。ここでは、keyup() イベント操作が使用されます。 ) と val() はどちらもここにあります。これはメソッドであり、JS では属性です

AngularJs 操作:

<body ng-app="">
 <p class="container">
 请输入内容：<input type="text" ng-model="name"/>
 <p ng-bind="name"></p>
<!--<p id="p" >{{name}}</p>-->
 </p>
 </body>

ログイン後にコピー

ガイド: 1.ng-app: ng-app= 「Angular によって管理されるスコープを宣言します。通常は body と HTML に記述されます。原則として、ページには 1 つの

<body ng-app=""></body> しか含めることができません」 2.ng-model: 要素を配置します。値 (命令は入力フィールドの値を設定します) はアプリケーションの変数 の名前。

<input type="text" ng-model="name"/>

3.ng-bind: このディレクティブは、アプリケーション変数名を段落の innerHTML にバインドします。式

を使用して <body ng-app=""></body>

2.ng-model ：把元素值（指令把输入域的值）绑定到应用程序变量 name。

<input type="text" ng-model="name"/>

3.ng-bind：指令把应用程序变量 name 绑定到某个段落的 innerHTML。可用表达式替代

<p ng-bind=“name”></p>

<p>{{name}}</p>

<p ng-bind="name"&gt を置き換えることができます。 ;&lt ;/p>