Entrez le contenu dans la zone de saisie et trois instances de méthode apparaîtront dans le div correspondant.-js tutoriel-php.cn

Entrez le contenu dans la zone de saisie et trois instances de méthode apparaîtront dans le div correspondant.

零下一度

Libérer： 2017-05-09 10:08:26

original

2908 Les gens l'ont consulté

Cet article présente principalement les différentes méthodes de saisie de contenu dans la zone de saisie, qui seront affichées dans le p ci-dessous : méthode js jQuery AngularJs la méthode a une bonne valeur de référence. Jetons-y un coup d'œil avec l'éditeur ci-dessous

Un exemple de question : saisissez le contenu dans la zone de saisie, et les différentes méthodes seront affichées dans le p ci-dessous :

<!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>

Copier après la connexion

js: natifmanipulation DOM

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

Copier après la connexion

Guide :

getElementById pour obtenir le

nœud DOM, innerHTML : définir ou obtenir tous les codes HTML à l'intérieur du nœud

Vous devez payer ; attention ici pour obtenir Le contenu du nœud dans l'entrée doit obtenir la valeur.

Ce qui est utilisé ici est l'attribut inner

HTML et l'attribut value. Faites attention à le distinguer de la méthode dans l'opération JQ

JQ :

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

Copier après la connexion

Guide :

jQuery("sélecteur").

action ( ); pass Le sélecteur appelle l'événement fonction , mais dans JQuery, JQuery peut être remplacé par $, c'est-à-dire $("selector").action();

>> ;Le sélecteur peut utiliser directement le

sélecteur CSS pour sélectionner l'élément ; La différence est que html() et val() sont des méthodes ici, et en JS ce sont des attributs

Opération 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>

Copier après la connexion

Conseils :

1.ng -app: ng-app=""Déclare le champ de compétence d'Angular, généralement écrit sur le corps et le HTML, en principe Il ne peut y en avoir qu'un

2.ng- modèle : lier la valeur de l'élément (la valeur du champ de saisie de l'instruction) à l'application <body ng-app=""></body> variable

nom.

3.ng-bind : La directive lie le nom de la variable d'application au innerHTML d'un paragraphe. Vous pouvez utiliser l'expression <input type="text" ng-model="name"/>

pour remplacer

<p ng-bind=“name”></p> Vous verrez {} au moment où la page se charge. remplacer

[Recommandations associées]<p>{{name}}</p>

Tutoriel vidéo en ligne js gratuit

2. >3.

php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!