将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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
3种vue组件的书写形式
Nov 29 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue-test-utils初使用详解
May 23 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
JS实现简易图片自动轮播
Oct 16 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/10/09 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
微信小程序学习之数据处理详解
2017/07/05 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
了解一下python内建模块collections
2020/09/07 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
合作投资意向书
2014/04/01 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript