将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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 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
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php自定文件保存session的方法
2014/12/10 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
jquery select选中的一个小问题
2009/10/11 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
python实现飞行棋游戏
2020/02/05 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
为什么使用接口?
2014/08/13 面试题
安全员岗位职责
2013/11/11 职场文书
心得体会怎么写
2013/12/30 职场文书
生产部主管岗位职责
2014/01/06 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android