资讯专栏INFORMATION COLUMN

模仿jq写个库 完善中 。。。

Drinkey / 1158人阅读

</>复制代码

  1. (function() {
  2. var es = function(selector) {
  3. return new es.prototype.init(selector);
  4. };
  5. es.domReady = function(fn) {
  6. document.addEventListener("DOMContentLoaded", function() {
  7. fn && fn();
  8. }, false);
  9. };
  10. es.each = function(obj, cb) {
  11. var ret, i = 0;
  12. if (obj.length === +obj.length) { //鸭辩
  13. while(obj.length !== i) {
  14. ret = cb.call(obj[i], i, obj[i]);
  15. if (ret === "break") {
  16. break;
  17. }
  18. if (ret !== undefined) {
  19. return ret;
  20. }
  21. i++;
  22. }
  23. }
  24. else if (obj instanceof Object) {
  25. for (var k in obj) {
  26. if (obj.hasOwnProperty(k)) {
  27. ret = cb.call(obj[k], k, obj[k]);
  28. if (ret === "break") {
  29. break;
  30. }
  31. if (ret !== undefined) {
  32. return ret;
  33. }
  34. }
  35. }
  36. }
  37. };
  38. es.event = function() {
  39. var events = [];
  40. var types = ["click"]
  41. return {
  42. on: function(type, cb) {
  43. var arr = events[type] = events[type] || [];
  44. if (types.indexOf(type) !== -1) {
  45. es.each(this, function(i, el) {
  46. el.addEventListener(type, cb);
  47. });
  48. }
  49. if (arr.indexOf(cb) === -1) {
  50. arr.push(cb);
  51. }
  52. return this;
  53. },
  54. off: function(type, cb) {
  55. var arr = events[type] = events[type] || [], i = 0;
  56. //传统事件
  57. if (types.indexOf(type) !== -1) {
  58. es.each(this, function(i, el) {
  59. cb && el.removeEventListener(type, cb);
  60. if (!cb) {
  61. es.each(events[type], function(i, cb) {
  62. el.removeEventListener(type, cb);
  63. });
  64. }
  65. });
  66. }
  67. if(!cb) events[type] = [];
  68. cb && es.each(arr, function(i, fn) {
  69. if (fn === cb) {
  70. arr.splice(i, 1);
  71. return "break";
  72. }
  73. });
  74. return this;
  75. },
  76. emit: function(type) {
  77. var arr = events[type] = events[type] || [], self = this, argv = arguments;
  78. es.each(arr, function(i, fn) {
  79. fn.apply(self, [].slice.call(argv, 1));
  80. });
  81. }
  82. }
  83. }();
  84. es.ajax = function (opt) {
  85. var callback = opt.callback || function() {};
  86. var type = opt.type || "GET";
  87. var req = new XMLHttpRequest();
  88. req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  89. req.open(type, URL, true);
  90. req.onreadystatechange = function() {
  91. if (req.status === 200) {
  92. callback(null, req.responseText);
  93. } else {
  94. callback(new Error(req.statusText), req.response);
  95. }
  96. };
  97. req.onerror = function() {
  98. callback(new Error(req.statusText));
  99. };
  100. req.send(opt.data ? opt.data : null);
  101. };
  102. es.get = function(url, data, callback) {
  103. es.ajax({
  104. url : url,
  105. data: data,
  106. callback : callback
  107. });
  108. };
  109. es.post = function(url, callback) {
  110. es.ajax({
  111. type: "POST",
  112. data: data,
  113. callback: callback
  114. });
  115. };
  116. var oo = es.prototype = {
  117. constructor: es,
  118. splice: [].splice,
  119. shift: [].shift,
  120. push: [].push,
  121. length: 0,
  122. };
  123. oo.init = function(selector) {
  124. var els;
  125. if (typeof selector === "string") {
  126. els = document.querySelectorAll(selector), els = [].slice.call(els, 0);
  127. } else if(selector instanceof HTMLElement) {
  128. els = [selector];
  129. } else if (selector instanceof es) {
  130. return es;
  131. } else if (selector instanceof Array) {
  132. els = selector;
  133. }
  134. while(els[0]) {
  135. this.push(els.shift());
  136. }
  137. };
  138. oo.init.prototype = oo;
  139. oo.each = function(cb) {
  140. return es.each(this, function(i, el) {
  141. return cb.call(el, i, el);
  142. });
  143. };
  144. oo.is = function(name) {
  145. return es.each(this, function(i, el) {
  146. if (name.slice(0, 1) === "#") {
  147. return el.id === name.slice(1);
  148. }
  149. else if(name.slice(0, 1) === ".") {
  150. return el.classList.contains(name.slice(1));
  151. }
  152. else {
  153. return el.tagName.toLowerCase() === name.toLowerCase()
  154. }
  155. });
  156. };
  157. oo.addClass = function(cls) {
  158. es.each(this, function(i, el) {
  159. el.classList.add(cls);
  160. });
  161. return this;
  162. };
  163. oo.removeClass = function(cls) {
  164. es.each(this, function(i, el) {
  165. el.classList.remove(cls);
  166. });
  167. return this;
  168. };
  169. oo.addStyle = function(cssText) {
  170. es.each(this, function(i, el) {
  171. el.style.cssText = cssText;
  172. });
  173. return this;
  174. };
  175. oo.next = function() {
  176. var self = this;
  177. es.each(this, function(i, el) {
  178. self[i] = el.nextElementSibling;
  179. });
  180. return this;
  181. };
  182. oo.prev = function() {
  183. var self = this;
  184. es.each(this, function(i, el) {
  185. self[i] = el.previousElementSibling;
  186. });
  187. return this;
  188. };
  189. oo.parent = function(selector) {
  190. var parent = [];
  191. es.each(this, function(i, el) {
  192. if (parent.indexOf(el.parentNode) === -1) {
  193. parent.push(el.parentNode);
  194. }
  195. });
  196. this.length = 0;
  197. while(parent[0]) {
  198. var el = parent.shift();
  199. if (selector) {
  200. es(el).is(selector) && this.push(el);
  201. } else {
  202. this.push(el);
  203. }
  204. };
  205. return this;
  206. };
  207. oo.children = function(selector) {
  208. var children = [], el;
  209. es.each(this, function(i, el) {
  210. children = children.concat([].slice.call(el.children, 0));
  211. });
  212. this.length = 0;
  213. while(children[0]) {
  214. el = children.shift();
  215. if (!selector) {
  216. this.push(el);
  217. }
  218. if (selector && es(el).is(selector)) {
  219. this.push(el);
  220. }
  221. }
  222. return this;
  223. };
  224. oo.find = function(selector) {
  225. var all = [];
  226. es.each(this, function(i, el) {
  227. all = all.concat([].slice.call(el.querySelectorAll(selector), 0));
  228. });
  229. this.length = 0;
  230. while(all[0]) {
  231. this.push(all.shift());
  232. }
  233. return this;
  234. };
  235. oo.first = function() {
  236. return es(this[0]);
  237. };
  238. oo.last = function() {
  239. return es(this[this.length - 1]);
  240. };
  241. oo.attr = function(key, value) {
  242. if (value === undefined) {
  243. return es.each(this, function(i, el) {
  244. return el.getAttribute(key);
  245. });
  246. }
  247. es.each(this, function(i, el) {
  248. el.setAttribute(key, value);
  249. });
  250. return this;
  251. };
  252. es.insert = function (arr, pos, str) {
  253. es.each(arr, function(i, el) {
  254. el.insertAdjacentHTML(pos, str);
  255. });
  256. };
  257. oo.append = function(str) {
  258. if (typeof str === "string") {
  259. es.insert(this, "beforeend", str);
  260. }
  261. if (str instanceof HTMLElement) {
  262. es.each(this, function(i, el) {
  263. el.appendChild(str);
  264. return "break";
  265. });
  266. }
  267. return this;
  268. };
  269. oo.after = function(str) {
  270. es.insert(this, "afterend", str);
  271. return this;
  272. };
  273. oo.before = function(str) {
  274. es.insert(this, "beforebegin", str);
  275. return this;
  276. };
  277. oo.prepend = function(str) {
  278. es.insert(this, "afterbegin", str);
  279. return this;
  280. };
  281. oo.on = es.event.on;
  282. oo.off = es.event.off;
  283. oo.emit = es.event.emit;
  284. window.es = es;
  285. })();

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78929.html

相关文章

  • 原生js造轮子之模仿JQ的slideDown()与slideUp()

    摘要:代码如下原生调用该文件中加入这一行代码参数参数时间调用该文件加入这一行代码中引入绑定到实例原型上组件中调用鄙人创建了一个群,供大家学习交流,希望和大家合作愉快,互相帮助,交流学习,以下为群二维码 代码如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,...

    王笑朝 评论0 收藏0
  • 原生js造轮子之模仿JQ的slideDown()与slideUp()

    摘要:代码如下原生调用该文件中加入这一行代码参数参数时间调用该文件加入这一行代码中引入绑定到实例原型上组件中调用鄙人创建了一个群,供大家学习交流,希望和大家合作愉快,互相帮助,交流学习,以下为群二维码 代码如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,...

    RancherLabs 评论0 收藏0
  • 回顾自己三次失败的面试经历

    摘要:站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历,依然是与轮播图有关。当然,这次思特奇面试之旅,最后也是以失败告终,这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两...

    DC_er 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<