☰

JQuery DOM

Optimize JQuery experience of insert DOM.

As of 2024-01-22. See the latest version.

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greatest.deepsurf.us/scripts/422934/1315443/JQuery%20DOM.js 

  1. // ==UserScript==
  2. // @name         JQuery DOM
  3. // @namespace    https://greatest.deepsurf.us/
  4. // @version      1.1.10
  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={
  117. 				tagName:`tag`, attrName:`attr`,tag_name:`tagName`,attr_name:`attrName`,
  118. 			}
  119. 			let dom_attr_fix={};
  120. 			if(dom_tag.attr==undefined){
  121. 				for(let key in dom_tag){
  122. 					if(!dom_attr_fix_blacklist.includes(key)){
  123. 						let key_fix=key;
  124. 						for(let origin in dom_attr_fix_replace){
  125. 							key_fix=key_fix.replace(origin,dom_attr_fix_replace[origin]);
  126. 						}
  127. 						dom_attr_fix[key_fix]=dom_tag[key];
  128. 					}
  129. 				}
  130. 			}
  131. 			dom_attr=dom_tag.attr || dom_attr_fix;
  132. 			dom_html=dom_tag.html;
  133. 			attach_type=dom_tag.attachType || attach_type;
  134. 			dom_tag=dom_tag.tag;
  135. 		}
  136.  
  137. 		try{
  138. 			let domObject=jQuery(jQuery.getDOMString(dom_tag, dom_attr, dom_html));
  139. 			if(typeof dom_attr==`object`){
  140. 				//DOM样式
  141. 				try{
  142. 					/*
  143. 					CSS Struct:
  144. 					style:{
  145. 						width:`255px`,
  146. 						height:`255px`,
  147. 					}
  148. 					*/
  149. 					if(typeof dom_attr.style==`object`){
  150. 						domObject.css(dom_attr.style);
  151. 					}
  152. 				}catch(e){
  153. 					console.error(e);
  154. 				}
  155.  
  156. 				//DOM事件绑定
  157. 				try{
  158. 					/*
  159. 					Bind Struct:
  160. 					bind:{
  161. 						click:function,
  162. 					}
  163. 					Another Struct:
  164. 					bind:{
  165. 						click:{
  166. 							data:{},
  167. 							function:function,
  168. 						}
  169. 					}
  170. 					*/
  171. 					if(typeof dom_attr.bind==`object`){
  172. 						for(let key in dom_attr.bind){
  173. 							let curBind=dom_attr.bind[key];
  174. 							domObject.unbind(key);
  175. 							if(typeof curBind==`function`){
  176. 								domObject.bind(key, curBind);
  177. 							}else if(typeof curBind==`object`){
  178. 								curBind={
  179. 									...{
  180. 										data:{},
  181. 										function(){},
  182. 									},
  183. 									...curBind,
  184. 								}
  185. 								domObject.bind(key, curBind.data, curBind.function);
  186. 							}
  187. 						}
  188. 					}
  189. 				}catch(e){
  190. 					console.error(e);
  191. 				}
  192.  
  193. 				//DOM子项
  194. 				try{
  195. 					if(typeof dom_attr.children==`object`){
  196. 						let default_children={
  197. 							tag:undefined,attr:undefined,html:undefined,attachType:`append`
  198. 						};
  199.  
  200. 						if(dom_attr.children.length==undefined){
  201. 							/*仅一个子项时，可以直接使用Object
  202. 							{
  203. 								tag:`html`,attr:{id:`id`},html:`Test`,attachType:`append`
  204. 							}
  205. 							*/
  206. 							let children={
  207. 								// ...default_children,
  208. 								...JSON.parse(JSON.stringify(default_children)),
  209. 								...dom_attr.children,
  210. 							}
  211. 							// domObject.attachDOM(children.tag,children.attr,children.html,children.attachType);
  212. 							domObject.append(jQuery.getDOMObject(children));
  213. 						}else{
  214. 							/*多个子项时，采用数组形式
  215. 							[
  216. 								{
  217. 									tag:`html`,attr:{id:`id1`},html:`Test1`,attachType:`append`
  218. 								},
  219. 								{
  220. 									tag:`html`,attr:{id:`id2`},html:`Test2`,attachType:`append`
  221. 								},
  222. 							]
  223. 							*/
  224. 							for(let i=0; i<dom_attr.children.length; i++){
  225. 								let children={
  226. 									// ...default_children,
  227. 									...JSON.parse(JSON.stringify(default_children)),
  228. 									...dom_attr.children[i],
  229. 								}
  230. 								// domObject.attachDOM(children.tag,children.attr,children.html,children.attachType);
  231. 								domObject.append(jQuery.getDOMObject(children));
  232. 							}
  233. 						}
  234. 					}
  235. 				}catch(e){
  236. 					console.error(e);
  237. 				}
  238.  
  239. 				//TBODY表格
  240. 				try{
  241. 					if(typeof dom_attr.tbody==`object` || typeof dom_attr.tr==`object`){
  242. 						let default_tr={
  243. 							tag:`tr`,attr:undefined,html:undefined,children:[],attachType:`append`
  244. 						};
  245. 						let default_td={
  246. 							tag:`td`,attr:undefined,html:undefined,children:[],attachType:`append`
  247. 						}
  248. 						let trDomObject;
  249. 						let trList=dom_attr.tbody || dom_attr.tr;
  250. 						for(let i=0; i<trList.length; i++){
  251. 							let curTr=trList[i];
  252. 							let tr={
  253. 								...JSON.parse(JSON.stringify(default_tr)),
  254. 								...curTr
  255. 							}
  256. 							// let trDomObject=domObject.attachDOM(tr.tag,tr.attr,tr.html,tr.attachType);
  257. 							trDomObject=jQuery.getDOMObject(tr);
  258. 							for(let j=0; j<curTr.td.length; j++){
  259. 								let curTd=curTr.td[j];
  260. 								if(typeof curTd==`string`){
  261. 									curTd={html:curTd};
  262. 								}
  263. 								let td={
  264. 									...JSON.parse(JSON.stringify(default_td)),
  265. 									...curTd,
  266. 								}
  267. 								// trDomObject.attachDOM(td.tag,td.attr,td.html,td.attachType);
  268. 								trDomObject.append(jQuery.getDOMObject(td));
  269. 							}
  270. 							domObject.append(trDomObject);
  271. 						}
  272. 					}
  273. 				}catch(e){
  274. 					console.error(e);
  275. 				}
  276. 			}
  277. 			return domObject;
  278. 		}catch(e){
  279. 			//对不规范写法的容错，如：只传dom_tag的情况下，直接返回字符串，而不是JQuery对象。
  280. 			return jQuery.getDOMString(dom_tag, dom_attr, dom_html);
  281. 		}
  282. 	}
  283.  
  284. 	jQuery.fn.attachDOM=function(dom_tag, dom_attr, dom_html, attach_type){
  285. 		//dom_tag为数组时，批量为母元素添加元素
  286. 		if(typeof dom_tag==`object` && dom_tag.length!=undefined){
  287. 			let default_children={
  288. 				tag:undefined,attr:undefined,html:undefined,attachType:`append`
  289. 			};
  290. 			for(let cur of dom_tag){
  291. 				cur={
  292. 					...JSON.parse(JSON.stringify(default_children)),
  293. 					...cur,
  294. 				}
  295. 				this.attachDOM(cur,undefined,undefined,attach_type);
  296. 			}
  297. 			return;
  298. 		}
  299.  
  300. 		let domObject=jQuery.getDOMObject(dom_tag, dom_attr, dom_html);
  301.  
  302. 		switch(attach_type){
  303. 			case `append`:
  304. 				this.append(domObject);
  305. 			break;
  306. 			case `prepend`:
  307. 				this.prepend(domObject);
  308. 			break;
  309. 			case `after`:
  310. 				this.after(domObject);
  311. 			break;
  312. 			case `before`:
  313. 				this.before(domObject);
  314. 			break;
  315. 			case `html`:
  316. 				this.html(domObject);
  317. 			break;
  318. 		}
  319. 		
  320. 		return domObject;
  321. 	}
  322.  
  323. 	jQuery.fn.appendDOM=function(dom_tag,dom_attr,dom_html){
  324. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`append`);
  325. 	}
  326. 	jQuery.fn.prependDOM=function(dom_tag,dom_attr,dom_html){
  327. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`prepend`);
  328. 	}
  329. 	jQuery.fn.afterDOM=function(dom_tag,dom_attr,dom_html){
  330. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`after`);
  331. 	}
  332. 	jQuery.fn.beforeDOM=function(dom_tag,dom_attr,dom_html){
  333. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`before`);
  334. 	}
  335. 	jQuery.fn.htmlDOM=function(dom_tag,dom_attr,dom_html){
  336. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`html`);
  337. 	}
  338. 	jQuery.fn.getHtml=function(dom_tag,dom_attr,dom_html){
  339. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`html`)[0].outerHTML;
  340. 	}
  341. 	jQuery.getDOMHtml=function(dom_tag,dom_attr,dom_html){
  342. 		return jQuery.fn.getHtml(dom_tag,dom_attr,dom_html);
  343. 	}
  344. }