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. Spring IOC之BeanFactory

    BeanFactory提供了SpringIOC功能的基础但是它只是直接在用在和第三方框架的整合中,而且现在对于大部分的Spring用户来讲这一句成为了过去.BeanFactory和相关的接口,例如Be ...

  2. 清空SQL Server数据库中所有表数据的方法

    原文:清空SQL Server数据库中所有表数据的方法 其实删除数据库中数据的方法并不复杂,为什么我还要多此一举呢,一是我这里介绍的是删除数据库的所有数据,因为数据之间可能形成相互约束关系,删除操作可 ...

  3. ACdream 1195 Sudoku Checker (暴力)

    Sudoku Checker Time Limit: 2000/1000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) Submi ...

  4. 真与假与c#,java中的不同之处

    /************真与假************/ /*C语言中:真(非0).假(0) * Java.C#中:真(true).假(false) * JavaScript中:真(非0.true. ...

  5. C语言练习-学生信息管理系统

    题目要求: 学生信息管理系统struct studentInfo{ int id; char name[128]; int age; char sex; int c_score; int cpp_sc ...

  6. SQL练习1关于插入删除,修改,单表查询

    --创建数据库create database studentsDB --创建表create table student( id int primary key, stuid char(10), stu ...

  7. 重构 ORM 中的 Sql 生成

    Rafy 领域实体框架设计 - 重构 ORM 中的 Sql 生成   前言 Rafy 领域实体框架作为一个使用领域驱动设计作为指导思想的开发框架,必然要处理领域实体到数据库表之间的映射,即包含了 OR ...

  8. 【ios开发】图片拉伸

    最近在做一个项目 其中要自己定制一个View 如图: 但是美工给了我的图片尺寸却是不一样的. 分别是599*80  26*61 于是就成了这样的效果. 很明显的发现取消四周不对劲. 于是我就去找美工姐 ...

  9. memcpy的实现

    memcpy的实现看起来貌似比较简单,但是也是有注意的地方! void *memcpy(void *dst, const void *src, size_t size) { //check argum ...

  10. NuGet管理

    使用NuGet管理项目类库引用   NuGet 是微软开发平台(包括.NET平台)的一个包管理器,这里只介绍和.NET相关的NuGet Visual Studio扩展客户端, 在VS2010 ,VS2 ...