将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 相关文章推荐
Javascript拓展String方法小结
Jul 08 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
一分钟理解js闭包
May 04 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
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 HandlerSocket的使用
2011/05/02 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
jQuery 使用个人心得
2009/02/26 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python yield与实现方法代码分析
2018/02/06 Python
python 正确保留多位小数的实例
2018/07/16 Python
python 文件查找及内容匹配方法
2018/10/25 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
优秀民警事迹材料
2014/01/29 职场文书
家长对孩子评语
2014/01/30 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书