jquery,js简单实现类似Angular.js双向绑定

 更新时间:2017年01月13日 08:53:54   作者:carry~MF  
本文主要介绍了jquery,js简单实现类似Angular.js双向绑定的方法。具有一定的参考价值,下面跟着小编一起来看下吧

刚了解了下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)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • jQuery选择器特殊字符与属性空格问题

    jQuery选择器特殊字符与属性空格问题

    这篇文章主要介绍了jQuery选择器特殊字符与属性空格问题。通过选择器中含有特殊符号的注意事项和选择器中含有空格的注意事项详细介绍了解决问题的办法,需要的朋友可以参考下
    2017-08-08
  • jQuery实现网页顶部固定导航效果代码

    jQuery实现网页顶部固定导航效果代码

    这篇文章主要介绍了jQuery实现网页顶部固定导航效果代码,涉及jQuery响应scroll事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
    2015-12-12
  • jquery实现简单Tab切换菜单效果

    jquery实现简单Tab切换菜单效果

    这篇文章主要介绍了jquery实现简单Tab切换菜单效果的相关资料,需要的朋友可以参考下
    2016-06-06
  • jquery分割字符串的方法

    jquery分割字符串的方法

    这篇文章主要介绍了jquery分割字符串的方法,涉及jQuery中使用split方法进行字符串分割的相关技巧,需要的朋友可以参考下
    2015-06-06
  • JQuery 确定css方框模型(盒模型Box Model)

    JQuery 确定css方框模型(盒模型Box Model)

    做过前台设置的都知道css存在两种盒模型,W3C标准的方框模型和IE浏览器的方框模型。除IE以外的大多数浏览器只支持W3C方框模型。IE浏览器能够根据页面的呈现模式的定义而是用对性的方框模式。已用哪中呈现的模式取决于页面上的DOCTYPE的声明。
    2010-01-01
  • jQuery+jqmodal弹出窗口实现代码分明

    jQuery+jqmodal弹出窗口实现代码分明

    jQuery+jqmodal弹出窗口的制作方法,需要的朋友可以参考下。
    2010-06-06
  • jQuery实现带动画效果的多级下拉菜单代码

    jQuery实现带动画效果的多级下拉菜单代码

    这篇文章主要介绍了jQuery实现带动画效果的多级下拉菜单代码,可实现点击渐隐渐显效果,涉及jQuery页面元素的遍历及链式操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jquery简单实现滚动条下拉DIV固定在头部不动

    jquery简单实现滚动条下拉DIV固定在头部不动

    滚动条下拉DIV固定在头部不动效果,想必很多的朋友都有见到过吧,下面为大家详细介绍下使用jquery是如何实现的,感兴趣的朋友可以参考下
    2013-11-11
  • jquery自定义函数的多种方法

    jquery自定义函数的多种方法

    在jquery中自定义函数你会吗?今天抽时间写了几个,个人感觉还不错,喜欢的朋友可以了解下
    2014-01-01
  • jQuery样式操作方法整理介绍

    jQuery样式操作方法整理介绍

    这篇文章主要介绍了jQuery样式操作方法,并通过实际案例更浅显的理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-10-10

最新评论