jq插件和jq

封装一个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({参数});
posted @ 2019-12-13 22:10  一个年轻淫  阅读(57)  评论(0编辑  收藏  举报