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 ,这简直是一个 ...
随机推荐
- 常见ActiveX控件下载大全
ActiveX是微软对于一系列策略性面向对象程序技术和工具的称呼,ActiveX控件可以在Windows窗体和Web程序上使用,所以不管是什么语 言开发的应用程序只要在windows窗体和html页面 ...
- windows2008 配置安装FTP服务器
windows2008 配置安装FTP服务器 今天在服务器上开了IIS7,但是要求把一个附件文件夹拷贝到根目录下面,这个附件文件夹有2G多大小,直接用远程桌面映射,一直都拷贝不成功,而且本地缓存越来越 ...
- Java 多线程编程之九:使用 Executors 和 ThreadPoolExecutor 实现的 Java 线程池的例子
线程池用来管理工作线程的数量,它持有一个等待被执行的线程的队列. java.util.concurrent.Executors 提供了 java.util.concurrent.Exe ...
- ASP.NET MVC5 视图预编译
ASP.NET MVC5 视图预编译 ASP.NET MVC5 视图预编译 关于Razor视图及引擎原理,就不多说了. 这里通俗或者不恰当地说,cshtml视图文件是先编译成dll文件,再通过视图 ...
- Spyder提示ValueError: API 'QString' has already been set to version 1
转载自:http://wuyuans.com/2013/02/spyder-valueerror-api-qstring-has-already-been-set-to-version-1/ 在IPy ...
- CodeRush配置Nunit使用
Web:http://www.nunit.org/ 配置和DevExpress的CodeRush Install-Package NUnit 下载Nunit后设置CodeRush目录,如下图: 下面 ...
- Dynamics CRM 提示“操作无效”
今天打开一个许久没用的CRM学习环境发现出现下面的错误.顿时感觉到莫名其妙.(貌似CRM的所有错误都让人感觉到莫名其妙) 于是查看系统日志,错误如下: Current key (KeyType : C ...
- [转]Bypassing iPhone Code Signatures
Source Link: http://www.saurik.com/id/8 Due to popular demand, I am putting some of the content I ha ...
- 企业架构研究总结(41)——企业架构与建模之ArchiMate的由来和详述(上)
终于完成了关于企业架构框架理论的总结,谢谢各位看官的支持,能挺过之前过于理论化的叙述而坚持到现在着实不易,笔者也自愧没有实践经验可以分享,希望日后有兴趣的看官能够不吝赐教.在本系列后面的也是最后一个大 ...
- IOS学习之路九(配置restful webservice 框架restkit)
RestKit 是一个开源的 objective-c 框架,容许在 iOS 和 Mac OS X 的 Objective-C 中与 RESTful Web 办事进行交互,包含简单的 HTTP requ ...