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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
js实现纯前端压缩图片
Nov 16 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/03 日漫
9个PHP开发常用功能函数小结
2011/07/15 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
详谈js模块化规范
2017/07/07 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python检测服务器端口代码实例
2019/08/31 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
pymysql的简单封装代码实例
2020/01/08 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
应届毕业生就业自荐信
2013/10/26 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
大学生村官入党自传
2015/06/26 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
python垃圾回收机制原理分析
2022/04/13 Python