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 ,这简直是一个 ...
随机推荐
- [翻译]在Django项目中添加谷歌统计(Google Analytics)
原文:<Google Analytics tracking code into Django projects, the easy way> 对我来说,制作一个可扩展的Django应用随时 ...
- leetcode 34 Search Insert Position
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- rpt水晶报表制作过程
原文:rpt水晶报表制作过程 最近公司安排一个以前的项目,里面需要用到水晶报表,由于原来做这个项目的同事离职,所在公司的同事报表做成了rdlc类型的,而这类报表在加载的时候很难动态的从数据库加载数据, ...
- t_sql语句得到表中所有信息
--得到所有数据库SELECT Name FROM Master..SysDatabases ORDER BY Name --得到某一数据库的所有表SELECT Name FROM MyPhotos. ...
- Android项目---TouchListener
public static interface View.OnTouchListener android.view.View.OnTouchListener Known Indirect Subcla ...
- 在Android中自动实现横竖屏切换的问题
http://developer.android.com/training/basics/supporting-devices/screens.html参照Google推荐的做法 在你项目的res 文 ...
- Oracle中的Union、Union All、Intersect、Minus
Oracle中的Union.Union All.Intersect.Minus 众所周知的几个结果集集合操作命令,今天详细地测试了一下,发现一些问题,记录备考. 假设我们有一个表Student,包括 ...
- jquery调用wcf案例
----------根据其他网友总结 1.在契约接口上添加:[WebInvoke(RequestFormat=WebMessageFormat.Json,ResponseFormat=WebMessa ...
- beanutils中WrapDynaBean
public class Emp { private String firstName="李"; private String lastName; public ...
- beanutils中Lazy
public class LazyBean { // public static void main(String[] args) {// DynaBean dynaBean=ne ...