ホームページ > 記事 > ウェブフロントエンド > 入力ボックスに内容を入力すると、対応する div に 3 つのメソッドインスタンスが表示されます。

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

零下一度オリジナル: 2017-05-09 10:08:262866ブラウズ

この記事では、以下の 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 つの

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

97420c71804358eaf997f0fc75684b9a

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

を使用して 0a8bc3a1c393ad574b94550112e9f02936cc49f0c466276486e50c850b7e4956

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

13aaf5bf552d43d11224df3448eff489

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

8be52d48d3dd0c5e3985460ca0e795e694b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee{{name}}94b3e26ee717c64999d7867364b1b4a3

2f60acf5101cb922fc41c7f09fa191eb

e388a4556c0f65e1904146cc1a846bee{{name}}94b3e26ee717c64999d7867364b1b4a3ウェブページが読み込まれると、{} が表示されます。ng- を使用できます。代わりにバインドしてください

[関連する推奨事項]

無料の js オンラインビデオチュートリアル

php.cn Dugu Jiijian (3) - JavaScript ビデオチュートリアル

以上が入力ボックスに内容を入力すると、対応する div に 3 つのメソッドインスタンスが表示されます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ノードイメージを使用してイメージサーバー機能を実装するサンプルコードを共有する次の記事：ノードイメージを使用してイメージサーバー機能を実装するサンプルコードを共有する

続きを見る

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

関連記事

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