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 相关文章推荐
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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
十大“创意”战术!
2020/03/04 星际争霸
php函数的常用方法及注意之处小结
2011/07/10 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
美国保健品专家:Life Extension
2018/05/04 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
演讲稿格式范文
2014/05/19 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB