将input框中输入内容显示在相应的div中【三种方法可选】


Posted in Javascript onMay 08, 2017

例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法:

将input框中输入内容显示在相应的div中【三种方法可选】

<!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">
 #div{
 width: 175px;
 height: 100px;
 margin: 20px 84px;
 border:2px solid green;
 }
 </style>
 </head>
 <body>
 <div class="container">
 请输入内容:<input type="text" id="put" />
 <div id="div" ></div>
 </div>
 </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 div1=document.getElementById("div");
 put1.onkeyup=function(){
 div1.innerText=put1.value;
 }
</script>

指点迷津:

getElementById获取DOM节点,innerHTML:设置或者获取节点内部的所有HTML代码;

这里需要注意获取到input里面的节点内容需要获取value值。

这里使用的是innerHTML属性和value属性,注意与JQ中的方法区分

JQ操作:

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

指点迷津:

jQuery("选择器").action ();通过选择器调用事件函数,但JQuery中,JQuery可以用$代替,即$("选择器").action();

    >>选择器可以直接使用CSS选择器,选中元素;

    >>.action表示对元素执行的操作;这里使用keyup()事件操作,与JS的不同之处在于html(),val()这里均是方法,在JS中则是属性

AngularJs操作:

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

指点迷津:

1.ng-app:ng-app=""声明Angular所管辖的范围,一般写在body和HTML上,原则上一个页面只能有一个

<body ng-app=""></body>

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

<input type="text"  ng-model="name"/>

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

<div ng-bind=“name”></div>

<div>{{name}}</div>弹网页加载的瞬间会看到{},可以用ng-bind替代

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 #Javascript
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
H5上传本地图片并预览功能
May 08 #Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 #jQuery
vue2.0实现导航菜单切换效果
May 08 #Javascript
jquery replace方法去空格
May 08 #jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 #jQuery
You might like
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
关于JavaScript的一些看法
2009/05/27 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python关键字and和or用法实例
2015/05/28 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
五好党支部事迹材料
2014/02/06 职场文书
村道德模范事迹材料
2014/08/28 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
李强为自己工作观后感
2015/06/11 职场文书
运动会宣传稿50字
2015/07/23 职场文书
初中班长竞选稿
2015/11/20 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python