国际清廉指数,棵的组词,李鸾英
(function () { //创建一个jquery构造函数 function jquery(selector) { return new jquery.prototype.init(selector); } //为jquery的原型添加init属性,所有实例可以使用该属性 jquery.prototype.init = function (selector) { this.length = 0; //为this添加length属性,并且赋值为0 //选出 dom 并且包装成jquery对象返回 //判断selector是null 和 undefined 和 dom对象 和 id 和 class的情况 if (selector == null) { //判断selector是null或undefined return this; } else if (typeof selector === 'string' && selector.indexof('.') != -1) { //selector是class的情况 var dom = document.getelementsbyclassname(selector.slice(1)); } else if (typeof selector === 'string' && selector.indexof("#") != -1) { //selector是id的情况 var dom = document.getelementbyid(selector.slice(1)); } if (selector instanceof element || dom.length == undefined) { //(selector是dom对象) || (selector是id,返回的是一个对象,对象没有length属性) this[0] = dom || selector; //(selector是id) || (selector是dom对象) this.length++; } else { //selector是class,返回的是一个类数组 for (var i = 0; i < dom.length; i++) { this[i] = dom[i]; this.length++; } } }; //为jquery的原型添加css属性,所有实例可以使用该属性 jquery.prototype.css = function (config) { for (var i = 0; i < this.length; i++) { for (var prop in config) { this[i].style[prop] = config[prop]; } } return this; //链式调用的精髓 }; //为jquery对象的prevobject属性赋值,从而可以使用end()方法 jquery.prototype.pushstack = function (dom) { //dom是jquery对象 if (dom.constructor != jquery) { //dom是原生的dom对象 dom = jquery(dom); //将原生dom对象包裹成jquery对象 } dom.prevobject = this; //将 return dom; }; //为jquery的原型添加get属性,所有实例可以使用该属性 jquery.prototype.get = function (num) { //num == null 返回数组 //num >= 0 返回this[num] //num < 0 返回this[length + num] return (num != null) ? ((num >= 0) ? (this[num]) : (this[num + this.length])) : ([].slice(this, 0)); }; //为jquery的原型添加get属性,所有实例可以使用该属性 jquery.prototype.eq = function (num) { return this.pushstack(this.get(num)); //调用jquery.prototype.get()函数获取到dom对象,再封装为jquery对象并且为jquery对象添加prevobject属性 }; //为jquery的原型添加add属性,所有实例可以使用该属性 jquery.prototype.add = function (selector) { var curobj = jquery(selector); //当前通过add添加的selector选中的jquery对象 var prevobj = this; //调用add()的jquery对象 var newobj = jquery(); for (var i = 0; i < curobj.length; i++) { newobj[newobj.length++] = curobj[i]; } for (var i = 0; i < prevobj.length; i++) { newobj[newobj.length++] = prevobj[i]; } this.pushstack(newobj); //为jquery对象添加prevobject属性 return newobj; //将合并后的jquery对象返回 }; //为jquery的原型添加end属性,所有实例可以使用该属性 jquery.prototype.end = function () { return this.prevobject; //直接返回前一个jquery对象 }; //为jquery的原型添加on属性,所有实例可以使用该属性 jquery.prototype.on = function (type, handle) { for (var i = 0; i < this.length; i++) { if (!this[i].cacheevent) {//判断每一个原生dom对象中是否有事件 this[i].cacheevent = {}; //为每一个原生的dom对象添加绑定事件 } if (!this[i].cacheevent[type]) {//判断每一个原生对象是否有type类型的绑定事件 this[i].cacheevent[type] = [handle];//没有则为该类型事件添加处理函数数组 } else { this[i].cacheevent[type].push(handle);//若已经有该类型事件,则直接放入数组 } } }; //为jquery的原型添加trigger属性,所有实例可以使用该属性 jquery.prototype.trigger = function (type) { var self = this;//将调用trigger函数的jquery对象存放在self中 var params = arguments.length > 1 ? [].slice.call(arguments, 1) : [];//判断调用trigger()函数时是否传入除了type以外的其他参数 for (var i = 0; i < this.length; i++) {//循环遍历this if (this[i].cacheevent[type]) {//判断每个原生dom对象中是否存放有type类型的事件 this[i].cacheevent[type].foreach(function (ele, index) {//有多个相同类型的事件时,要全部依次执行 ele.apply(self, params);//通过self调用事件,并且把参数传入 }); } } }; //上面的jquery构造函数是new 一个jquery.prototype.init对象, //jquery.prototype.init对象上没有jquery.prototype上的css()方法 //所以添加下面一句,让jquery.prototype.init对象可以调用jquery.prototype上的css()方法 jquery.prototype.init.prototype = jquery.prototype; //让外部可以通过$()或者jquery()调用 window.$ = window.jquery = jquery; }());
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <style> .demo { width: 100px; height: 100px; background: yellow; } </style> </head> <body> <div class="demo"></div> <script src="./myjquery.js"></script> <script> $('.demo').on('click', function (a, b, c) { console.log("click1" + a + b + c); }); $('.demo').on('click', function (a) { console.log("click2" + a); }); $('.demo').trigger('click', 1, 2, 3); </script> </body> </html>
效果展示:
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
网友评论