如何封裝一個最簡單的jquery外掛
阿新 • • 發佈:2019-02-07
一個完整的jquery當然不可能這麼簡單,以下案例提供的是一種封裝外掛的思路
在此之前你最好有一定的js基礎,並且懂得自呼叫匿名函式的基本使用,廢話少說,直接上程式碼:
HTML部分
<!DOCTYPE html>
<html lang="en">
<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);
最後,你開心就好,謝謝點贊哦!!!