Enter content in the input box, and three method instances will appear in the corresponding div.-JS Tutorial-php.cn

Enter content in the input box, and three method instances will appear in the corresponding div.

零下一度

Release： 2017-05-09 10:08:26

Original

2835 people have browsed it

This article mainly introduces the different methods of inputting content in the input box, which will be displayed in the p below: js method; jQuery method; AngularJs method has good reference value. Let’s take a look at it with the editor below

An example question: Enter the content in the input box, and the different methods will be displayed in the p below:

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

Copy after login

js: NativeDOM operation

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

Copy after login

Guide on the maze:

getElementById gets DOM node, innerHTML: sets or gets all the HTML code inside the node;

You need to pay attention here to get the node in the input The content needs to get the value.

The innerHTML attributes and value attributes are used here. Pay attention to distinguishing them from the methods in JQ

JQ operation:

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

Copy after login

Guide:

jQuery("selector").action (); through the selector Call the event function, but in JQuery, JQuery can be replaced by $, that is, $("selector").action();

>>Select The selector can directly use the CSS selector to select the element; In html(), val() are methods here, and in JS they are attributes

AngularJs operation:

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

Copy after login

Guidance: 1.ng-app: ng-app=""Declares the scope of Angular's jurisdiction, usually written in the body and HTML. In principle, a page can only Can there be a

2.ng-model: put the element value (instruction to put the input domain value) is bound to the application

variable

name.

3.ng-bind: Instruction to bind the application variable name to the innerHTML of a certain paragraph. You can use

expression

instead

##< p>{{name}}

You will see {} when the web page loads. You can use ng-bind instead

[Related recommendations]

Free js online video tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3)- JavaScript video tutorial

The above is the detailed content of Enter content in the input box, and three method instances will appear in the corresponding div.. For more information, please follow other related articles on the PHP Chinese website!