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 ,这简直是一个 ...
随机推荐
- c语言内存对齐(1)
在<C陷阱与缺陷>有这样一个例子: #include <stdio.h> int main(void) { int i; char c; ;i<;i++){ scanf( ...
- 编写SQL的辅助工具
原文:编写SQL的辅助工具 今天在同事的帮助下,下载了一个工具:ApexSQL edit,可能是我孤陋寡闻,不知道还有这样的好工具,它可以在我键入SQL时,帮助我提示表的名称和列名称.还可以帮助我格式 ...
- 程序猿必要10免费的钱jquery小工具
本周带来10款免费的jquery插件.假设你也有好的作品,欢迎分享到社区中来,在得到帮助的同一时候,也能与很多其它人分享来自你的作品. jQuery导航菜单置顶插件 - stickyUp . 在线演示 ...
- 老调重弹--面向对象设计原则--S.O.L.I.D设计原则
SRP - 单一职责原则 全称:Single Responsibility Principle 定义:每一个上下文对象(类.函数.变量等等)的定义应该仅仅包含单一的职责 描述:对象提供单一职责的高度封 ...
- 对Extjs中store的多种操作
Store.getCount()返回的是store中的所有数据记录,然后使用for循环遍历整个store,从而得到每条记录. 除了使用getCount()的方法外,还可以使用each()函数,如下面的 ...
- hdu 1239 Calling Extraterrestrial Intelligence Again (暴力枚举)
Calling Extraterrestrial Intelligence Again Time Limit: 2000/1000 MS (Java/Others) Memory Limit: ...
- exit与_exit
一.main函数: 先从程序的执行开始谈起,C程序总是从main函数开始执行,当内核执行C程序时(使用了一个exec函数),在调用main函数前先调用一个特殊的启动例程.可执行程序 文件将此启动例程指 ...
- 10.26最后的模拟DAY2 数字对[暴力]
数字对 [题目描述] 小H是个善于思考的学生,现在她又在思考一个有关序列的问题. 她的面前浮现出一个长度为n的序列{ai},她想找出一段区间[L, R](1 <= L <= R <= ...
- ASP.NET MVC实现剪切板功能
前言 关于复制粘贴的功能,好像不用劳师动众的写后端代码,JS就可以,但正如大家所知道的,兼容性问题,当然这么通用的功能怎么可能没有一个通用的方案呢,于是便找到了一款jquery插件 jquery.cl ...
- [置顶] 学习JDK源码:可进一步优化的代码
1.参数化类型的构造函数比较啰嗦 new HashMap<String, List<String>>() 如果你调用参数化类的构造函数,那么很不幸,你必须要指定类型参数,即便上 ...