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的日期选择控件
Oct 27 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
JS中队列和双端队列实现及应用详解
Sep 29 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
jQuery select控制插件
2009/08/17 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
python批量下载图片的三种方法
2013/04/22 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
Python中itertools的用法详解
2020/02/07 Python
python编写俄罗斯方块
2020/03/13 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
个人批评与自我批评总结
2014/10/17 职场文书
2014年班级工作总结
2014/11/14 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang