如何封装一个最简单的jquery插件
1个回答
展开全部
HTML部分
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>js封装简易jquery</title></head>
<body>
<h2>js封装简易jquery</h2>
<div id="h">hello world</div>
<div id="box">我是一个带有class属性的标签</div>
<script src="../js/demo2.js"></script>
</body>
</html>
js部分
;(function (win) {
var jQuery = function (selecter) {
this.version = '1.0.1'; //版本号
this.selecter = selecter;
return this;
};
jQuery.prototype.getElement = function () {
this.elem = document.getElementById(this.selecter);
return this;
};
jQuery.prototype.html = function (val) {
var elem = this.elem;
if (val) {
elem.innerHTML = val;
return this;
} else {
return elem.innerHTML;
}
};
jQuery.prototype.on = function (type, Fn) {
var elem = this.elem;
elem.addEventListener(type, Fn);
return this;
};
jQuery.init = function (selecter) {
return new this(selecter);
};
win['$jQuery'] = jQuery;
})(window);
function $(selecter) {
var test = $jQuery.init(selecter);
return test.getElement(selecter);
}
function jQuery(selecter) {
var test = $jQuery.init(selecter);
return test.getElement(selecter);
}
//不妨测试一下，来个点击事件
jQuery('h').html('hello girl').on('click', function () {
console.log('hello boy');
});
//或者来个赋值操作
$('box').html('hello baby');
console.log($().version);
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>js封装简易jquery</title></head>
<body>
<h2>js封装简易jquery</h2>
<div id="h">hello world</div>
<div id="box">我是一个带有class属性的标签</div>
<script src="../js/demo2.js"></script>
</body>
</html>
js部分
;(function (win) {
var jQuery = function (selecter) {
this.version = '1.0.1'; //版本号
this.selecter = selecter;
return this;
};
jQuery.prototype.getElement = function () {
this.elem = document.getElementById(this.selecter);
return this;
};
jQuery.prototype.html = function (val) {
var elem = this.elem;
if (val) {
elem.innerHTML = val;
return this;
} else {
return elem.innerHTML;
}
};
jQuery.prototype.on = function (type, Fn) {
var elem = this.elem;
elem.addEventListener(type, Fn);
return this;
};
jQuery.init = function (selecter) {
return new this(selecter);
};
win['$jQuery'] = jQuery;
})(window);
function $(selecter) {
var test = $jQuery.init(selecter);
return test.getElement(selecter);
}
function jQuery(selecter) {
var test = $jQuery.init(selecter);
return test.getElement(selecter);
}
//不妨测试一下，来个点击事件
jQuery('h').html('hello girl').on('click', function () {
console.log('hello boy');
});
//或者来个赋值操作
$('box').html('hello baby');
console.log($().version);
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
