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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
Vue渲染过程浅析
Mar 14 Javascript
js实现星星海特效的示例
Sep 28 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
PHP实现微信退款功能
2018/10/02 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
javascript的几种写法总结
2016/09/30 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
eBay加拿大站:eBay.ca
2019/06/20 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
网络教育毕业生自我鉴定
2013/10/10 职场文书
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
周年庆典主持词
2014/04/02 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技