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

零下一度
Release: 2017-05-09 10:08:26
Original
2782 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:jsmethod;jQuerymethod;AngularJsmethod 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:

       
  

请输入内容:

Copy after login

js: NativeDOM operation

Copy after login

Guide on the maze:

getElementById getsDOM 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 attributesand value attributes are used here. Pay attention to distinguishing them from the methods in JQ

JQ operation:

 
Copy after login

Guide:

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

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

AngularJs operation:

 

请输入内容:

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]

1.

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!