<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!--angularJS关注的不再是DOM模型，而是数据本身 --> <!-- 告诉angular去监管哪块区域，ng-app（指令）写在body上，body已经被angularJS监管，body中所有用angularJS语法写的东西都会被识别 --> <!-- $rootScope:根作用域 --> <!-- ng-model(指令):它设置了一个属性，是属于根作用域对象的一个属性，属性名：username，属性值：input的value --> <body ng-app=""> <!-- 将这个input中的内容设置为一个模型，这个模型的名字为username --> <input id="i1" type="text" ng-model="username" /><br> <!-- 用户名：<span id="s1"></span> --> <!-- {{模型名}}通过这种方式来进行调用 --> <!-- angular中的表达式语法：{{属性名}} --> 用户名：<span>{{username}}</span> </body> <!-- <script src="../images/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> --> <script type="text/javascript" src="js/angular.min-1.2.9.js" charset="UTF-8"></script> <!-- jQuery实现 --> <!-- <script type="text/javascript"> $(function(){ $("#i1").bind("keyup",function(){ /* this取到的dom对象，需要转为jQuery对象 */ /* alert(this.val()); */ /* dom对象转为jQuery对象 */ $("#s1").html($(this).val()); }); }); </script> --> </html>