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 相关文章推荐
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
php中的ini配置原理详解
2014/10/14 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
python thread 并发且顺序运行示例
2009/04/09 Python
Python制作Windows系统服务
2017/03/25 Python
使用Python对SQLite数据库操作
2017/04/06 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python numpy格式化打印的实例
2018/05/14 Python
Python格式化日期时间操作示例
2018/06/28 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
数据库的约束含义
2012/09/09 面试题
物业管理毕业生的自我评价
2014/02/17 职场文书
就业意向书范文
2014/04/01 职场文书
临床护理求职信
2014/04/26 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
会计试用期自我评价
2015/03/10 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
导游词之安徽九华山
2019/09/18 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
MySQL分布式恢复进阶
2022/07/23 MySQL