将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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
javascript数组去重小结
Mar 07 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
vue 使用async写数字动态加载效果案例
Jul 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静态类的原罪详解
2013/05/06 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
angular.bind使用心得
2015/10/26 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Django框架多表查询实例分析
2018/07/04 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
经典C++面试题一
2016/11/06 面试题
EJB面试题
2015/07/28 面试题
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
垂直极限观后感
2015/06/08 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python