🏠 Home 

Greasy Fork is available in English.

js-domExtend

轻量级原生js增强插件,将部分原生dom对象方法模仿jQuery进行二次封装,便于使用

สคริปต์นี้ไม่ควรถูกติดตั้งโดยตรง มันเป็นคลังสำหรับสคริปต์อื่น ๆ เพื่อบรรจุด้วยคำสั่งเมทา // @require https://update.greasyfork.org/scripts/444044/1121535/js-domExtend.js

  1. // ==UserScript==
  2. // @name js-domExtend
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.7.2
  5. // @description 轻量级原生js增强插件,将部分原生dom对象方法模仿jQuery进行二次封装,便于使用
  6. // @author tutu辣么可爱(greasyfork)/IcedWatermelonJuice(github)
  7. // @day 2022.5.27 GMT+0800 (##标准时间)
  8. // @license MIT License
  9. // @note 相关参考信息请前往greasyfork仓库或github仓库
  10. // @note greasyfork仓库:
  11. // @note github仓库:https://github.com/IcedWatermelonJuice/js-domExtend
  12. // ==/UserScript==
  13. function $ele(dom, dom2 = document) {
  14. if (typeof dom === "object") {
  15. return dom;
  16. } else if (!dom || typeof dom !== "string") {
  17. return document;
  18. } else if (dom.trim()[0] === "<" && dom.indexof(">") > 0 && dom.trim().length >= 3) {
  19. dom2 = document.createElement("div");
  20. dom2.innerHTML = dom;
  21. dom2 = dom2.childNodes;
  22. } else {
  23. dom2 = dom2.querySelectorAll(dom);
  24. }
  25. return dom2.length > 1 ? dom2 : dom2[0]
  26. }
  27. function $eleFn(dom, dom2 = document) {
  28. return {
  29. data: [dom, dom2],
  30. listen: function(callback, interval = 500) {
  31. if (typeof callback !== "function") {
  32. return null
  33. }
  34. var that = this;
  35. return setInterval(() => {
  36. let target = $ele(that.data[0], that.data[1]);
  37. if (target) {
  38. callback(target);
  39. }
  40. }, interval)
  41. },
  42. ready: function(callback, timeout = 3000) {
  43. var timer = this.listen((target) => {
  44. clearInterval(timer);
  45. callback(target);
  46. })
  47. setTimeout(() => {
  48. clearInterval(timer);
  49. }, timeout)
  50. return timer
  51. },
  52. copy: function(str) {
  53. var res = false;
  54. if (typeof str === "string" && str.trim()) {
  55. let text = $ele("body").insert(`<textarea style="opacity: 0"></textarea>`);
  56. text.value = str;
  57. text.select();
  58. res = document.execCommand("copy");
  59. text.remove();
  60. }
  61. return res;
  62. },
  63. ajax: function(options) {
  64. options.method = options.method || "GET";
  65. options.params = options.params || null;
  66. options.timeout = options.timeout || 60 * 1000;
  67. options.success = typeof options.success === "function" ? options.success : function() {};
  68. options.error = typeof options.error === "function" ? options.error : function() {};
  69. var xhr = new XMLHttpRequest();
  70. xhr.open(options.method, options.url);
  71. if (options.method.toLowerCase() !== 'get') { //判断请求方式
  72. xhr.setRequestHeader('Content-Type', "application / x - www - form - urlencoded");
  73. var str = "";
  74. for (p in options.params) {
  75. str += `${p}=${options.params[p]}&`;
  76. }
  77. options.params = str;
  78. }
  79. xhr.timeout = options.timeout;
  80. xhr.ontimeout = () => {
  81. options.error();
  82. }
  83. xhr.send(options.params);
  84. xhr.onreadystatechange = () => {
  85. if (xhr.readyState === 4) {
  86. if (xhr.status >= 200 && xhr.status < 300) {
  87. options.success(xhr.responseText);
  88. } else {
  89. options.error();
  90. }
  91. }
  92. }
  93. return xhr
  94. }
  95. }
  96. }
  97. function $domExtendJS() {
  98. //Element
  99. Element.prototype.attr = function(key, val) {
  100. if (typeof key === "string") {
  101. if (/string|boolean/.test(typeof val)) {
  102. if (!val && val !== false) {
  103. this.removeAttribute(key);
  104. } else {
  105. this.setAttribute(key, val);
  106. }
  107. return this;
  108. } else {
  109. return this.getAttribute(key);
  110. }
  111. }
  112. }
  113. Element.prototype.data = function(key, val) {
  114. this.dataAttrsMap = this.dataAttrsMap ? this.dataAttrsMap : {};
  115. for (let i = 0; i < this.attributes.length; i++) {
  116. let attr = this.attributes[i];
  117. if (/^data-/.test(attr.name)) {
  118. this.dataAttrsMap[attr.name] = attr.value;
  119. }
  120. }
  121. if (typeof key === "string") {
  122. key = `data-${key}`;
  123. if (/string|boolean/.test(typeof val)) {
  124. if (!val && val !== false) {
  125. delete this.dataAttrsMap[key];
  126. this.attr(key, "");
  127. } else {
  128. this.dataAttrsMap[key] = val;
  129. this.attr(key) !== null && this.attr(key, val);
  130. }
  131. return this;
  132. } else {
  133. return this.dataAttrsMap[key];
  134. }
  135. }
  136. }
  137. Element.prototype.css = function(key, val) {
  138. if (typeof key === "string") {
  139. if (/string|boolean/.test(typeof val)) {
  140. this.style.setProperty(key, val);
  141. } else if (!val) {
  142. return getComputedStyle(this)[key];
  143. }
  144. } else {
  145. for (let i in key) {
  146. this.style.setProperty(i, key[i]);
  147. }
  148. }
  149. if (this.style === "") {
  150. this.attr("style", "")
  151. }
  152. return this;
  153. }
  154. Element.prototype.hide = function() {
  155. this.data("displayBackup", this.css("display"));
  156. this.css("display", "none")
  157. return this;
  158. }
  159. Element.prototype.show = function() {
  160. var backup = this.data("displayBackup") || "";
  161. this.css("display", backup !== "none" ? backup : "");
  162. return this;
  163. }
  164. Element.prototype.insert = function(dom, position = "end", reNew = false) {
  165. dom = typeof dom === "string" ? $ele(dom) : dom;
  166. dom = (Array.isArray(dom) || dom instanceof NodeList) ? dom : [dom];
  167. switch (position) {
  168. case "start":
  169. Array.from(dom).reverse().forEach((e, i) => {
  170. this.insertBefore(e, this.firstChild);
  171. })
  172. break;
  173. case "end":
  174. dom.forEach((e, i) => {
  175. this.append(e);
  176. })
  177. break;
  178. case "before":
  179. Array.from(dom).reverse().forEach((e, i) => {
  180. this.parentElement.insertBefore(e, this);
  181. })
  182. break;
  183. case "after":
  184. if (this.parentElement.lastChild === this) {
  185. dom.forEach((e, i) => {
  186. this.append(e);
  187. })
  188. } else {
  189. let next = this.nextSilbing;
  190. Array.from(dom).reverse().forEach((e, i) => {
  191. this.parentElement.insertBefore(e, next);
  192. })
  193. }
  194. break;
  195. }
  196. if (reNew) {
  197. return dom.length > 1 ? dom : dom[0]
  198. } else {
  199. return this
  200. }
  201. }
  202. Element.prototype.replace = function(dom) {
  203. dom = this.insert(dom, "before", true);
  204. this.remove();
  205. return dom;
  206. }
  207. Element.prototype.findNode = function(nodeName) {
  208. var nodeArray = [];
  209. if (!this.firstChild) {
  210. return null
  211. }
  212. this.childNodes.forEach((e, i) => {
  213. if (new RegExp(`^${nodeName}$`, "i").test(e.nodeName)) {
  214. nodeArray.push(e);
  215. } else {
  216. let temp = e.findNode(nodeName);
  217. nodeArray = nodeArray.concat(Array.isArray(temp) ? temp : (temp ? [temp] : []));
  218. }
  219. })
  220. return nodeArray.length > 1 ? nodeArray : nodeArray[0]
  221. }
  222. Element.prototype.eleText = function(val, remainDom = false) {
  223. if (typeof val !== "string") {
  224. return this.innerText
  225. } else {
  226. if (remainDom) {
  227. var textNode = this.findNode("#text");
  228. if (Array.isArray(textNode)) {
  229. textNode.forEach((e, i) => {
  230. if (val === "") {
  231. e.nodeValue = "";
  232. } else {
  233. let textLength = i >= (textNode.length - 1) ? val.length : e.length;
  234. e.nodeValue = val.slice(0, textLength);
  235. val = val.slice(textLength);
  236. }
  237. })
  238. }
  239. } else {
  240. this.innerText = val;
  241. }
  242. return this
  243. }
  244. }
  245. Element.prototype.eleHTML = function(val) {
  246. if (typeof val !== "string") {
  247. return this.innerHTML
  248. } else {
  249. this.innerHTML = val;
  250. return this
  251. }
  252. }
  253. Element.prototype.eleVal = function(val) {
  254. if (typeof val !== "string" && typeof val !== "boolean") {
  255. return this.value
  256. } else {
  257. this.value = val;
  258. return this
  259. }
  260. }
  261. //NodeList
  262. NodeList.prototype.attr = function(key, val) {
  263. this.forEach((e, i) => {
  264. e.attr(key, val)
  265. })
  266. return this
  267. }
  268. NodeList.prototype.data = function(key, val) {
  269. this.forEach((e, i) => {
  270. e.data(key, val)
  271. })
  272. return this
  273. }
  274. NodeList.prototype.css = function(key, val) {
  275. this.forEach((e, i) => {
  276. e.css(key, val)
  277. })
  278. return this
  279. }
  280. NodeList.prototype.hide = function() {
  281. this.forEach((e, i) => {
  282. e.hide();
  283. })
  284. return this
  285. }
  286. NodeList.prototype.show = function() {
  287. this.forEach((e, i) => {
  288. e.show();
  289. })
  290. return this
  291. }
  292. NodeList.prototype.findNode = function(nodeName) {
  293. var nodeArray = []
  294. this.forEach((e, i) => {
  295. let temp = e.findNode(nodeName);
  296. nodeArray = nodeArray.concat(Array.isArray(temp) ? temp : []);
  297. })
  298. return nodeArray[0] ? nodeArray : null
  299. }
  300. NodeList.prototype.eleText = function(val, remainDom = false) {
  301. var res = "";
  302. this.forEach((e, i) => {
  303. let temp = e.eleText(val, remainDom)
  304. res += typeof temp === "string" ? temp : "";
  305. })
  306. return typeof val === "string" ? this : res
  307. }
  308. NodeList.prototype.eleHTML = function(val) {
  309. var res = "";
  310. this.forEach((e, i) => {
  311. let temp = e.eleHTML(val)
  312. res += typeof temp === "string" ? temp : "";
  313. })
  314. return typeof val === "string" ? this : res
  315. }
  316. }