<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="../lib/jquery.js"></script>
<script>
var textCount = {
input: null,
init: function(config) {
this.input = $(config.id);
this.bind();
//这边范围对应的对象,可以实现链式调用
return this;
},
bind: function() {
var self = this;
this.input.on('keyup', function() {
self.render();
});
},
getNum: function() {
return this.input.val().length;
},
//渲染元素
render: function() {
var num = this.getNum();
if ($('#J_input_count').length == 0) {
this.input.after('<span id="J_input_count"></span>');
};
$('#J_input_count').html(num + '个字');
}
}
$(function() {
//在domready后调用
textCount.init({
id: '#J_input'
}).render();
})
</script>
</head>
<body>
<input type="text" id="J_input" />
</body>
</html>
js链式调用
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 之前发现了一种类似block串行执行的开发方式,今天终于不忙了就简单写一下做个笔记 其实很简单,需要注意的就是相应...