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 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 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
PHP求最大子序列和的算法实现
2011/06/24 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
小型女装店的创业计划书
2014/01/09 职场文书
创新比赛获奖感言
2014/02/13 职场文书
自荐书范文范例
2014/02/13 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
产品推广策划方案
2014/05/10 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
大学生毕业评语
2014/12/31 职场文书
交通事故被告代理词
2015/05/23 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫