jquery,js简单实现类似Angular.js双向绑定


Posted in Javascript onJanuary 13, 2017

刚了解了下Angular.js,发现Angular.js绑定数据方面非常方便,套下教程demo:

<div ng-app="myApp" ng-controller="myCtrl">
  名字: <input ng-model="name">
 <h1>你输入了: {{name}}</h1>
</div>

我就想着,使用jq/js怎么实现类似的效果,后来找找,发现使用propertychange可以实现。

JQ:

<div class="wrap">
    <textarea></textarea>
    <div class="miss"></div>
 </div>
$('textarea').on('input propertychange', function() {
   $('.miss').html($(this).val().length + "~"+$(this).val());
 });

JS:

var txt = document.querySelector("textarea"),
    msg = document.querySelector(".miss");
  //不兼容IE8 以下
  txt.addEventListener("input",function () {
    msg.innerHTML = this.value + "~"+this.value.length;
  },false)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery 的一个progressbar widge
Oct 29 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 #Javascript
js实现淡入淡出轮播切换功能
Jan 13 #Javascript
js仿百度音乐全选操作
Jan 13 #Javascript
js实现tab选项卡切换功能
Jan 13 #Javascript
js制作可以延时消失的菜单
Jan 13 #Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 #Javascript
js实现自动轮换选项卡
Jan 13 #Javascript
You might like
PHP的分页功能
2007/03/21 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
初识javascript 文档碎片
2010/07/13 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
django query模块
2019/04/20 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
学生会竞选演讲稿怎么写
2014/08/26 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL