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 Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python实现停车管理系统
2018/11/30 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
旷课检讨书范文
2015/01/27 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python