jq,js简单实现类似Angular.js数据绑定效果
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数据绑定效果的更多相关文章
- Angular-chart.js 使用说明(基于angular.js工程)
Angular-chart.js是基于Chart.js的angular组件,引入项目后直接操作数据即可. 引用方法: 分别将Chart.js.angular-chart.js.angular-c ...
- 关于Iscroll.js 的滑动和Angular.js路由冲突问题
Iscroll主要应用于app移动端开发. 主要代码: window.onload=function(){ var myIscroll=new IScroll(".headerNav&quo ...
- jq demo 简单的图片懒加载效果
重点:在元素进入可视区域后,把图片元素的 _src 的值,赋值给 src <!DOCTYPE HTML> <html> <head> <meta http-e ...
- Angular JS - 3 - Angular JS 双向数据绑定
一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...
- 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 的目的是 ...
- Angular.js vs Ember.js
Angular.js 拥抱 HTML/CSS Misko Hevery(Angular.js的开发者之一)回答了这一问题,他的主要观点如下: 在HTML中加入太多逻辑不是好做法.Angular.js只 ...
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- angular.js之作用域scope'@','=','&'
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <script ...
- angular.js 动态插入删除dom节点
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...
随机推荐
- leetcod Pow(x, n)
题目:就是实现一个指数函数. 直接用一个while一直乘以n词肯定是会超时的. 自己写了用递归(而且是很挫的递归),测试了无数次,根据每个case去修改代码.终于可以AC了.不忍直视,自己写了好长,如 ...
- JS 禁止右键,禁止复制,禁止粘贴
原文:JS 禁止右键,禁止复制,禁止粘贴 如何用用javascript 禁止右键,禁止复制,禁止粘贴,做站时常会用到这些代码,所以收藏了一下!1. oncontextmenu="window ...
- [置顶] Android开发之Thread类分析
在我们Linux系统中创建线程函数为:pthread_create(),在Android中我们为线程封装了一个类Thread,实际调用的还是pthread_create() 当我们想创建线程的时候,只 ...
- socket计划——一个简单的例子
从一个简单易用TCP样品开始socket计划,的基本过程例如下列: server client +++ ...
- 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 ...
- 利用cxfreeze将Python 3.3打包成exe程序
参考自别人的博文:http://blog.csdn.net/yatere/article/details/6667230 步骤如下: (1) 下载cxfreeze后安装(先得安装python 3.3) ...
- 基于A2DFramework的事件机制实现
随笔- 102 文章- 3 评论- 476 发布订阅 - 基于A2DFramework的事件机制实现 SUMMARY 能做什么 DEMO 原理图 应用场景 能做什么 A2DFramework ...
- MVC应用程序请求密码的功能1
MVC应用程序请求密码的功能(一) 经过一系列的练习,实现了会员注册<MVC会员注册>http://www.cnblogs.com/insus/p/3439599.html,登录<M ...
- Router
backbone库学习-Router backbone库的结构http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文的例子来 ...
- ios学习之路四(新建Sprite Kit 项目的时候出现apple LLVM 5.0 error)
在新建sprite kit 项目的时候出现"apple LLVM 5.0 error" 解决方法 在网上搜索,stackoverflow 上是这么说的点击打开链接.按照他的我也没解 ...