☰

JQuery DOM

Optimize JQuery experience of insert DOM.

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/422934/1431188/JQuery%20DOM.js 

  1. // ==UserScript==
  2. // @name         JQuery DOM
  3. // @namespace    https://gf.qytechs.cn/
  4. // @version      1.1.16
  5. // @description  Optimize JQuery experience of insert DOM.
  6. // @author       JMRY
  7. // @include      *://*
  8. // @grant        none
  9. // ==/UserScript==
  10. if(typeof jQuery===`function`){
  11. 	jQuery.getDOMString=function(dom_tag,dom_attr,dom_html){
  12. 		/*
  13. 		dom_tag:string
  14. 			HTML tags, like div, input, p, button, and so on.
  15. 		dom_attr:object
  16. 			HTML attributes, struct:
  17. 			{
  18. 				id:`id`,
  19. 				class:`class1 class2` OR [`class1`,`class2`],
  20. 				style:`border:none;` OR {border:`none`},
  21. 	
  22. 				Extend attributes:
  23. 				bind:{
  24. 					click:function,
  25. 				},
  26. 			}
  27. 		dom_attr:string
  28. 			HTML inner text
  29. 		dom_html:string
  30. 			HTML inner text
  31. 		*/
  32. 	
  33. 		//属性黑名单指的是在遍历属性时直接忽略的key。
  34. 		//如果需要处理这些key但不要插入html中，则应使用allow_insert_attr，将它置为false即可。
  35. 		let attr_blacklist=[
  36. 			`bind`,`children`,
  37. 		]
  38. 		
  39. 		if(dom_tag==undefined){ //html标记为空时，直接返回空值
  40. 			return ``;
  41. 		}else if(dom_tag!=undefined && dom_attr==undefined && dom_html==undefined){ //html标记不为空、属性和内容为空时，直接返回字符串
  42. 			return dom_tag;
  43. 		}else if(dom_tag!=undefined && dom_attr!=undefined && dom_html==undefined){
  44. 			dom_html=``;
  45. 		}
  46. 	
  47. 		let dom_attr_string=[];
  48. 	
  49. 		//dom_attr is string, it will be the inner html, without attributes.
  50. 		if(typeof dom_attr==`string`){
  51. 			dom_html=dom_attr;
  52. 		}else if(typeof dom_attr==`object`){
  53. 			let allow_insert_attr;
  54. 			for(let key in dom_attr){
  55. 				allow_insert_attr=true;
  56. 				let cur_dom_attr=dom_attr[key];
  57. 				// if(key!=`bind`){
  58. 				// if(jQuery.inArray(key,attr_blacklist)<0){
  59. 				if(!attr_blacklist.includes(key)){
  60. 					//HTML属性的特殊处理
  61. 					switch(key){
  62. 						//Class数组化处理
  63. 						case `class`:
  64. 							if(typeof cur_dom_attr==`object` && cur_dom_attr.length){
  65. 								cur_dom_attr=cur_dom_attr.join(` `).trim();
  66. 							}else if(typeof cur_dom_attr==`object` && cur_dom_attr.length==undefined){
  67. 								let classList=[];
  68. 								for(let key in cur_dom_attr){
  69. 									if(cur_dom_attr[key]==true){
  70. 										classList.push(key);
  71. 									}
  72. 								}
  73. 								cur_dom_attr=classList.join(` `).trim();
  74. 							}
  75. 						break;
  76. 	
  77. 						//Style对象化处理（交给getDOMObject，因此将allow_insert_attr置为false，以跳过插入属性）
  78. 						case `style`:
  79. 							if(typeof cur_dom_attr==`object`){
  80. 								allow_insert_attr=false;
  81. 							}
  82. 						break;
  83. 	
  84. 						//Html属性转为text。此属性会覆盖dom_html参数，因此不可混用
  85. 						case `html`:
  86. 							dom_html=cur_dom_attr;
  87. 							allow_insert_attr=false;
  88. 						break;
  89. 						//tbody属性处理
  90. 						case `tbody`: case `tr`: case `td`:
  91. 							allow_insert_attr=false;
  92. 						break;
  93. 					}
  94. 	
  95. 					//cur_dom_attr为undefined、null时，不插入此属性
  96. 					if(cur_dom_attr!=undefined && cur_dom_attr!=null && allow_insert_attr){
  97. 						dom_attr_string.push(`${key.replace(/([A-Z])/g,"-$1").toLowerCase()}="${cur_dom_attr}"`);
  98. 					}
  99. 				}
  100. 			}
  101. 		}
  102. 	
  103. 		if(dom_tag==`html`){
  104. 			return `${dom_html}`;
  105. 		}
  106. 		
  107. 		return `<${dom_tag} ${dom_attr_string.join(` `)}>${dom_html}</${dom_tag}>`;
  108. 	}
  109.  
  110. 	jQuery.getDOMObject=function(dom_tag,dom_attr,dom_html, attach_type){
  111. 		//dom_tag为对象时，和普通情况一样
  112. 		if(typeof dom_tag==`object` && dom_tag.length==undefined){
  113. 			let dom_attr_fix_blacklist=[
  114. 				`tag`,`attachType`,
  115. 			]
  116. 			let dom_attr_fix_replace=new Map([
  117. 				[`tagName`,`tag`],[`tag_name`,`tagName`],
  118. 				[`attrName`,`attr`],[`attr_name`,`attrName`],
  119. 			]);
  120. 			let dom_attr_fix={};
  121. 			if(dom_tag.attr==undefined){
  122. 				for(let key in dom_tag){
  123. 					if(!dom_attr_fix_blacklist.includes(key)){
  124. 						let key_fix=key;
  125. 						if(dom_attr_fix_replace.get(key)){
  126. 							key_fix=dom_attr_fix_replace.get(key_fix);
  127. 						}
  128. 						dom_attr_fix[key_fix]=dom_tag[key];
  129. 					}
  130. 				}
  131. 			}
  132. 			dom_attr=dom_tag.attr || dom_attr_fix;
  133. 			dom_html=dom_tag.html;
  134. 			attach_type=dom_tag.attachType || attach_type;
  135. 			dom_tag=dom_tag.tag;
  136. 		}
  137.  
  138. 		try{
  139. 			let domObject=jQuery(jQuery.getDOMString(dom_tag, dom_attr, dom_html));
  140. 			if(typeof dom_attr==`object`){
  141. 				//DOM样式
  142. 				try{
  143. 					/*
  144. 					CSS Struct:
  145. 					style:{
  146. 						width:`255px`,
  147. 						height:`255px`,
  148. 					}
  149. 					*/
  150. 					if(typeof dom_attr.style==`object`){
  151. 						domObject.css(dom_attr.style);
  152. 					}
  153. 				}catch(e){
  154. 					console.error(e);
  155. 				}
  156.  
  157. 				//DOM事件绑定
  158. 				try{
  159. 					/*
  160. 					Bind Struct:
  161. 					bind:{
  162. 						click:function,
  163. 					}
  164. 					Another Struct:
  165. 					bind:{
  166. 						click:{
  167. 							data:{},
  168. 							function:function,
  169. 						}
  170. 					}
  171. 					*/
  172. 					if(typeof dom_attr.bind==`object`){
  173. 						for(let key in dom_attr.bind){
  174. 							let curBind=dom_attr.bind[key];
  175. 							domObject.unbind(key);
  176. 							if(typeof curBind==`function`){
  177. 								domObject.bind(key, curBind);
  178. 							}else if(typeof curBind==`object`){
  179. 								curBind={
  180. 									...{
  181. 										data:{},
  182. 										function(){},
  183. 									},
  184. 									...curBind,
  185. 								}
  186. 								domObject.bind(key, curBind.data, curBind.function);
  187. 							}
  188. 						}
  189. 					}
  190. 				}catch(e){
  191. 					console.error(e);
  192. 				}
  193.  
  194. 				//DOM子项
  195. 				try{
  196. 					if(typeof dom_attr.children==`object`){
  197. 						let default_children={
  198. 							tag:undefined,attr:undefined,html:undefined,attachType:`append`
  199. 						};
  200.  
  201. 						if(dom_attr.children.length==undefined){
  202. 							/*仅一个子项时，可以直接使用Object
  203. 							{
  204. 								tag:`html`,attr:{id:`id`},html:`Test`,attachType:`append`
  205. 							}
  206. 							*/
  207. 							let children={
  208. 								// ...default_children,
  209. 								...JSON.parse(JSON.stringify(default_children)),
  210. 								...dom_attr.children,
  211. 							}
  212. 							// domObject.attachDOM(children.tag,children.attr,children.html,children.attachType);
  213. 							domObject.append(jQuery.getDOMObject(children));
  214. 						}else{
  215. 							/*多个子项时，采用数组形式
  216. 							[
  217. 								{
  218. 									tag:`html`,attr:{id:`id1`},html:`Test1`,attachType:`append`
  219. 								},
  220. 								{
  221. 									tag:`html`,attr:{id:`id2`},html:`Test2`,attachType:`append`
  222. 								},
  223. 							]
  224. 							*/
  225. 							for(let i=0; i<dom_attr.children.length; i++){
  226. 								let children={
  227. 									// ...default_children,
  228. 									...JSON.parse(JSON.stringify(default_children)),
  229. 									...dom_attr.children[i],
  230. 								}
  231. 								// domObject.attachDOM(children.tag,children.attr,children.html,children.attachType);
  232. 								domObject.append(jQuery.getDOMObject(children));
  233. 							}
  234. 						}
  235. 					}
  236. 				}catch(e){
  237. 					console.error(e);
  238. 				}
  239.  
  240. 				//TBODY表格
  241. 				try{
  242. 					if(typeof dom_attr.tbody==`object` || typeof dom_attr.tr==`object`){
  243. 						let default_tr={
  244. 							tag:`tr`,attr:undefined,html:undefined,children:[],attachType:`append`
  245. 						};
  246. 						let default_td={
  247. 							tag:`td`,attr:undefined,html:undefined,children:[],attachType:`append`
  248. 						}
  249. 						let trDomObject;
  250. 						let trList=dom_attr.tbody || dom_attr.tr;
  251. 						for(let i=0; i<trList.length; i++){
  252. 							let curTr=trList[i];
  253. 							let tr={
  254. 								...JSON.parse(JSON.stringify(default_tr)),
  255. 								...curTr
  256. 							}
  257. 							// let trDomObject=domObject.attachDOM(tr.tag,tr.attr,tr.html,tr.attachType);
  258. 							trDomObject=jQuery.getDOMObject(tr);
  259. 							for(let j=0; j<curTr.td.length; j++){
  260. 								let curTd=curTr.td[j];
  261. 								if(typeof curTd==`string`){
  262. 									curTd={html:curTd};
  263. 								}
  264. 								let td={
  265. 									...JSON.parse(JSON.stringify(default_td)),
  266. 									...curTd,
  267. 								}
  268. 								// trDomObject.attachDOM(td.tag,td.attr,td.html,td.attachType);
  269. 								trDomObject.append(jQuery.getDOMObject(td));
  270. 							}
  271. 							domObject.append(trDomObject);
  272. 						}
  273. 					}
  274. 				}catch(e){
  275. 					console.error(e);
  276. 				}
  277. 			}
  278. 			return domObject;
  279. 		}catch(e){
  280. 			//对不规范写法的容错，如：只传dom_tag的情况下，直接返回字符串，而不是JQuery对象。
  281. 			return jQuery.getDOMString(dom_tag, dom_attr, dom_html);
  282. 		}
  283. 	}
  284.  
  285. 	jQuery.fn.attachDOM=function(dom_tag, dom_attr, dom_html, attach_type){
  286. 		//dom_tag为数组时，批量为母元素添加元素
  287. 		if(typeof dom_tag==`object` && dom_tag.length!=undefined){
  288. 			let default_children={
  289. 				tag:undefined,attr:undefined,html:undefined,attachType:`append`
  290. 			};
  291. 			if(attach_type==`prepend` || attach_type==`before`){
  292. 				//往插入时，将数组调转，以确保插入顺序和数组顺序一致
  293. 				dom_tag.reverse();
  294. 			}
  295. 			for(let cur of dom_tag){
  296. 				cur={
  297. 					...JSON.parse(JSON.stringify(default_children)),
  298. 					...cur,
  299. 				}
  300. 				this.attachDOM(cur,undefined,undefined,attach_type);
  301. 			}
  302. 			return;
  303. 		}
  304.  
  305. 		let domObject=jQuery.getDOMObject(dom_tag, dom_attr, dom_html);
  306.  
  307. 		switch(attach_type){
  308. 			case `append`:
  309. 				this.append(domObject);
  310. 			break;
  311. 			case `prepend`:
  312. 				this.prepend(domObject);
  313. 			break;
  314. 			case `after`:
  315. 				this.after(domObject);
  316. 			break;
  317. 			case `before`:
  318. 				this.before(domObject);
  319. 			break;
  320. 			case `html`:
  321. 				this.html(domObject);
  322. 			break;
  323. 		}
  324. 		
  325. 		return domObject;
  326. 	}
  327.  
  328. 	jQuery.fn.appendDOM=function(dom_tag,dom_attr,dom_html){
  329. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`append`);
  330. 	}
  331. 	jQuery.fn.prependDOM=function(dom_tag,dom_attr,dom_html){
  332. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`prepend`);
  333. 	}
  334. 	jQuery.fn.afterDOM=function(dom_tag,dom_attr,dom_html){
  335. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`after`);
  336. 	}
  337. 	jQuery.fn.beforeDOM=function(dom_tag,dom_attr,dom_html){
  338. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`before`);
  339. 	}
  340. 	jQuery.fn.htmlDOM=function(dom_tag,dom_attr,dom_html){
  341. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`html`);
  342. 	}
  343. 	jQuery.fn.getHtml=function(dom_tag,dom_attr,dom_html){
  344. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`html`)[0].outerHTML;
  345. 	}
  346. 	jQuery.getDOMHtml=function(dom_tag,dom_attr,dom_html){
  347. 		return jQuery.fn.getHtml(dom_tag,dom_attr,dom_html);
  348. 	}
  349. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址