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)

jq,js简单实现类似Angular.js数据绑定效果的更多相关文章

  1. Angular-chart.js 使用说明(基于angular.js工程)

    Angular-chart.js是基于Chart.js的angular组件,引入项目后直接操作数据即可. 引用方法:    分别将Chart.js.angular-chart.js.angular-c ...

  2. 关于Iscroll.js 的滑动和Angular.js路由冲突问题

    Iscroll主要应用于app移动端开发. 主要代码: window.onload=function(){ var myIscroll=new IScroll(".headerNav&quo ...

  3. jq demo 简单的图片懒加载效果

    重点:在元素进入可视区域后,把图片元素的 _src 的值,赋值给 src <!DOCTYPE HTML> <html> <head> <meta http-e ...

  4. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  5. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  6. Angular.js vs Ember.js

    Angular.js 拥抱 HTML/CSS Misko Hevery(Angular.js的开发者之一)回答了这一问题,他的主要观点如下: 在HTML中加入太多逻辑不是好做法.Angular.js只 ...

  7. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  8. angular.js之作用域scope'@','=','&'

    <!doctype html> <html ng-app='myApp'> <head> </head> <body> <script ...

  9. angular.js 动态插入删除dom节点

    angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...

随机推荐

  1. leetcod Pow(x, n)

    题目:就是实现一个指数函数. 直接用一个while一直乘以n词肯定是会超时的. 自己写了用递归(而且是很挫的递归),测试了无数次,根据每个case去修改代码.终于可以AC了.不忍直视,自己写了好长,如 ...

  2. JS 禁止右键,禁止复制,禁止粘贴

    原文:JS 禁止右键,禁止复制,禁止粘贴 如何用用javascript 禁止右键,禁止复制,禁止粘贴,做站时常会用到这些代码,所以收藏了一下!1. oncontextmenu="window ...

  3. [置顶] Android开发之Thread类分析

    在我们Linux系统中创建线程函数为:pthread_create(),在Android中我们为线程封装了一个类Thread,实际调用的还是pthread_create() 当我们想创建线程的时候,只 ...

  4. socket计划——一个简单的例子

    从一个简单易用TCP样品开始socket计划,的基本过程例如下列: server                                                  client +++ ...

  5. WCF、Web API、WCF REST、Web Service 区别

    Web Service It is based on SOAP and return data in XML form. It support only HTTP protocol. It is no ...

  6. 利用cxfreeze将Python 3.3打包成exe程序

    参考自别人的博文:http://blog.csdn.net/yatere/article/details/6667230 步骤如下: (1) 下载cxfreeze后安装(先得安装python 3.3) ...

  7. 基于A2DFramework的事件机制实现

    随笔- 102  文章- 3  评论- 476  发布订阅 - 基于A2DFramework的事件机制实现   SUMMARY 能做什么 DEMO 原理图 应用场景 能做什么 A2DFramework ...

  8. MVC应用程序请求密码的功能1

    MVC应用程序请求密码的功能(一) 经过一系列的练习,实现了会员注册<MVC会员注册>http://www.cnblogs.com/insus/p/3439599.html,登录<M ...

  9. Router

    backbone库学习-Router backbone库的结构http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文的例子来 ...

  10. ios学习之路四(新建Sprite Kit 项目的时候出现apple LLVM 5.0 error)

    在新建sprite kit 项目的时候出现"apple LLVM 5.0 error" 解决方法 在网上搜索,stackoverflow 上是这么说的点击打开链接.按照他的我也没解 ...