封装一个jq
(function(win) {
var jQuery = function(selecter) {
this.version = '1.0.1'; //版本号
this.selecter = selecter;
return this;
};
jQuery.prototype.getElement = function() {
// 当前只支持取id
// 如果是class或者tag,得装在数组里
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);
}
使用
<div id="one">hello world</div>
<div id="two">我是一个带有class属性的标签</div>
//来个点击事件
jQuery('one').html('hello girl').on('click', function() {
alert('hello boy');
});
//或者来个赋值操作
$('two').html('hello baby');
// 打印版本
console.log($().version);
封装一个jq插件
(function ($) {
$.fn.myPlugins = function (options) {
//参数赋值
options = $.extend(defaults, options);//对象合并
this.each(function () {
//执行代码逻辑
});
};
})(jQuery);
// 使用
$(selector).myPlugins({参数});