初始化一个函数

function jQuery(selector) {

return new jQuery.fn.init(selector); }

each函数

each(callback) {

for (var i = 0; i < this.length; i++) {

callback(this[i]);

}

return this;

},

显示与隐藏

toggle() {

this.each(function (item) {

if (item.style.display != "none") {

item.style.display = "none";

} else {

item.style.display = "block";

}

});

},

定义构造函数显示原型

jQuery.fn =jQuery.prototype = {

constructor:jQuery,

jquery:"9.0.0",

length:0,

get(index){

return this[index];

},

全局访问

window.$ = window.jQuery = jQuery;

方法

(function(){

//匿名函数自执行

// jQ的构造函数

function jQuery(selector){

// 返回new 一个初始化函数

return new jQuery.fn.init(selector);

}

// 定义JQuery构造函数的显示原型

jQuery.fn=jQuery.prototype={

constructor:jQuery,

jquery:"9.0.0",

length:0,

get(index){

return this[index];

},

each(callback){

for(var i=0;i

callback(this[i])

}

return this;

},

//简单的一个小例子 第一种

// click(callback){

// // 单击的时候让this的每个元素执行callback回调函数

// for(var i=0;i

// this[i].addEventListener("click",callback);

// }

// },

//第二种 使用封装好的each方法节省一层遍历

click(callback){

// 单击的时候让this的每个元素执行callback回调函数

this.each(function(item){

item.addEventListener("click",callback);

return this;

})

},

toggle(){

// 遍历每个元素如果display不是none就隐藏 否则就显示

for(var i=0;i

if(this[i].style.display!="none"){

this[i].style.display="none"

}else{

this[i].style.display="block"

}

}

},

addClass(clas){

this.each(function(item){

item.classList.add(clas)

return this;

})

return this;

},

removeClass(clas){

this.each(function(item){

if(item.classList.contains(clas)){

item.classList.remove(clas)

}

return this;

})

return this;

},

show(){

this.each(function(item){

if(item.style.display=="none"){

item.style.display="block"

}

})

},

hide(){

this.each(function(item){

if(item.style.display=="block"){

item.style.display="none"

}

})

},

}

// jq初始化函数

jQuery.fn.init=function(selector){

// 获取到选择列表

var list = document.querySelectorAll(selector);

// 当前对象的长度

this.length=list.length;

for(var i=0;i

// 遍历类别对this赋值

this[i]=list[i]

}

}

// 如何让new init 产生对象拥有JQuery显示原型上的所有方法呢

jQuery.fn.init.prototype = jQuery.fn;

// 全局对jQuery与$可以访问

window.$=window.jQuery=jQuery;

})()

extend方法

jQuery.extend = jQuery.fn.extend = function () {

var options, name, src, copy, copyIsArray, clone,

target = arguments[0] || {},

i = 1,

length = arguments.length,

deep = false;

if (typeof target === "boolean") {

deep = target;

target = arguments[i] || {};

i++;

}

if (typeof target !== "object" && !isFunction(target)) {

target = {};

}

if (i === length) {

target = this;

i--;

}

for (; i < length; i++) {

if ((options = arguments[i]) != null) {

for (name in options) {

src = target[name];

copy = options[name];

if (target === copy) {

continue;

}

if (deep && copy && (jQuery.isPlainObject(copy) ||

(copyIsArray = Array.isArray(copy)))) {

if (copyIsArray) {

copyIsArray = false;

clone = src && Array.isArray(src) ? src : [];

} else {

clone = src && jQuery.isPlainObject(src) ? src : {};

}

target[name] = jQuery.extend(deep, clone, copy);

} else if (copy !== undefined) {

target[name] = copy;

}

}

}

}

return target;

}