将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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
微信小程序实现左滑删除效果
Nov 18 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
javascript继承的六大模式小结
2015/04/13 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
python实现的简单窗口倒计时界面实例
2015/05/05 Python
浅析Python中的for 循环
2016/06/09 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
高中班主任评语
2014/12/30 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS