☰

JQuery DOM

Optimize JQuery experience of insert DOM.

当前为 2022-12-10 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/422934/1126730/JQuery%20DOM.js 

  1. /*
  2. 	JQuery Extensions DOM
  3. 	(c) 2020-2021 JMRY
  4. 	MIT Licensed.
  5.  
  6. 	Version: 1.0.6 Build 20210514
  7. 		- 修复部分情况下，appendDOM中直接传递对象时无法添加元素的bug。
  8. 	Version: 1.0.5 Build 20210301
  9. 	Version: 1.0.4 Build 20200908
  10.  
  11. 	Feature:
  12. 		Optimize JQuery experience of insert DOM.
  13. 		Use object to instead string to generate HTML DOM string or objects.
  14.  
  15. 	How to use:
  16. 		Get the DOM string:
  17. 			$.getDOMString(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  18. 		Insert element:
  19. 			$(`body`).appendDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  20. 			$(`body`).prependDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  21. 			$(`body`).beforeDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  22. 			$(`body`).afterDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  23. 			$(`body`).htmlDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  24. 		
  25. 		Events bind:
  26. 			$(`body`).appendDOM(`div`,{
  27. 				id:`div`,class:[`div`,`div2`],
  28. 				bind:{
  29. 					click(e){
  30. 						console.log(`test`);
  31. 					}
  32. 				}
  33. 			},`This is a DIV.`);
  34.  
  35. 			The bind events can also push the data:
  36. 				$(`body`).appendDOM(`div`,{
  37. 					id:`div`,class:`div`,
  38. 					bind:{
  39. 						click:{
  40. 							data:{index:1},
  41. 							function(e){
  42. 								console.log(e.data.index);
  43. 							}
  44. 						}
  45. 					}
  46. 				},`This is a DIV.`);
  47. 			
  48. 		Styles with JQuery css object struct:
  49. 			$(`body`).appendDOM(`div`,{
  50. 				id:`div`,class:[`div`,`div2`],
  51. 				style:{
  52. 					backgrundColor:`#FFF`,
  53. 					opacity:0,
  54. 				}
  55. 			},`This is a DIV.`);
  56.  
  57. 		Children elements:
  58. 		You can direct insert multi-children in one element, and supports cascade.
  59. 			$(`body`).appendDOM(`div`,{
  60. 				id:`div`,class:[`div`,`div2`],
  61. 				children:[
  62. 					{
  63. 						tag:`div`,
  64. 						attr:{
  65. 							id:`div_child_1`,class:[`div`,`div_child`],
  66. 							children:{
  67. 								tag:`div`,
  68. 								attr:{
  69. 									id:`div_grandson`,class:[`div`,`div_child`,`div_grandson`]
  70. 								},
  71. 								html:`This is a grandson DIV.`
  72. 							}
  73. 						},
  74. 						html:`This is a child DIV.`
  75. 					},
  76. 					{
  77. 						tag:`div`,
  78. 						attr:{
  79. 							id:`div_child_2`,class:[`div`,`div_child`],
  80. 						},
  81. 						html:`This is a child DIV.`
  82. 					}
  83. 				]
  84. 			},`This is a DIV.`);
  85.  
  86. 		HTML string in attributes without dom_html param:
  87. 			Notice: the priority of HTML string in attributes is higher than dom_html param.
  88. 			$(`body`).appendDOM(`div`,{
  89. 				id:`div`,class:[`div`,`div2`],
  90. 				html:`This is a DIV.`,
  91. 				children:{
  92. 					tag:`div`,
  93. 					attr:{
  94. 						id:`div_child_1`,class:[`div`,`div_child`],
  95. 						html:`This is a child DIV.`
  96. 					}
  97. 				}
  98. 			});
  99.  
  100. 		You can also insert element without attributes:
  101. 			$(`body`).appendDOM(`div`,`This is a DIV.`);
  102.  
  103. 		Use object to insert element:
  104. 			$(`body`).appendDOM({
  105. 				tag:`div`,
  106. 				attr:{
  107. 					id:`div`,class:[`div`,`div2`],
  108. 					html:`This is a DIV.`,
  109. 					children:{
  110. 						tag:`div`,
  111. 						attr:{
  112. 							id:`div_child_1`,class:[`div`,`div_child`],
  113. 							html:`This is a child DIV.`
  114. 						}
  115. 					}
  116. 				}
  117. 			})
  118.  
  119. 		Batch insert elements:
  120. 			$(`body`).appendDOM([
  121. 				{
  122. 					tag:`div`,
  123. 					attr:{
  124. 						id:`div1`,class:[`div`,`div1`],
  125. 						html:`This is a DIV 1.`,
  126. 						children:{
  127. 							tag:`div`,
  128. 							attr:{
  129. 								id:`div_child_1`,class:[`div`,`div_child`],
  130. 								html:`This is a child DIV 1.`
  131. 							}
  132. 						}
  133. 					}
  134. 				},
  135. 				{
  136. 					tag:`div`,
  137. 					attr:{
  138. 						id:`div2`,class:[`div`,`div2`],
  139. 						html:`This is a DIV 2.`,
  140. 						children:{
  141. 							tag:`div`,
  142. 							attr:{
  143. 								id:`div_child_1`,class:[`div`,`div_child`],
  144. 								html:`This is a child DIV 2.`
  145. 							}
  146. 						}
  147. 					}
  148. 				},
  149. 			])
  150. */
  151.  
  152. $.getDOMString=function(dom_tag,dom_attr,dom_html){
  153. 	/*
  154. 	dom_tag:string
  155. 		HTML tags, like div, input, p, button, and so on.
  156. 	dom_attr:object
  157. 		HTML attributes, struct:
  158. 		{
  159. 			id:`id`,
  160. 			class:`class1 class2` OR [`class1`,`class2`],
  161. 			style:`border:none;` OR {border:`none`},
  162.  
  163. 			Extend attributes:
  164. 			bind:{
  165. 				click:function,
  166. 			},
  167. 		}
  168. 	dom_attr:string
  169. 		HTML inner text
  170. 	dom_html:string
  171. 		HTML inner text
  172. 	*/
  173.  
  174. 	//属性黑名单指的是在遍历属性时直接忽略的key。
  175. 	//如果需要处理这些key但不要插入html中，则应使用allow_insert_attr，将它置为false即可。
  176. 	let attr_blacklist=[
  177. 		`bind`,`children`,
  178. 	]
  179. 	
  180. 	if(dom_tag==undefined){ //html标记为空时，直接返回空值
  181. 		return ``;
  182. 	}else if(dom_tag!=undefined && dom_attr==undefined && dom_html==undefined){ //html标记不为空、属性和内容为空时，直接返回字符串
  183. 		return dom_tag;
  184. 	}else if(dom_tag!=undefined && dom_attr!=undefined && dom_html==undefined){
  185. 		dom_html=``;
  186. 	}
  187.  
  188. 	let dom_attr_string=``;
  189.  
  190. 	//dom_attr is string, it will be the inner html, without attributes.
  191. 	if(typeof dom_attr==`string`){
  192. 		dom_html=dom_attr;
  193. 	}else if(typeof dom_attr==`object`){
  194. 		let allow_insert_attr;
  195. 		for(let key in dom_attr){
  196. 			allow_insert_attr=true;
  197. 			let cur_dom_attr=dom_attr[key];
  198. 			// if(key!=`bind`){
  199. 			if($.inArray(key,attr_blacklist)<0){
  200. 				//HTML属性的特殊处理
  201. 				switch(key){
  202. 					//Class数组化处理
  203. 					case `class`:
  204. 						if(typeof cur_dom_attr==`object`){
  205. 							cur_dom_attr=cur_dom_attr.join(` `);
  206. 						}
  207. 					break;
  208.  
  209. 					//Style对象化处理（交给getDOMObject，因此将allow_insert_attr置为false，以跳过插入属性）
  210. 					case `style`:
  211. 						if(typeof cur_dom_attr==`object`){
  212. 							allow_insert_attr=false;
  213. 						}
  214. 					break;
  215.  
  216. 					//Html属性转为text。此属性会覆盖dom_html参数，因此不可混用
  217. 					case `html`:
  218. 						dom_html=cur_dom_attr;
  219. 						allow_insert_attr=false;
  220. 					break;
  221. 				}
  222.  
  223. 				//cur_dom_attr为undefined、null时，不插入此属性
  224. 				if(cur_dom_attr!=undefined && cur_dom_attr!=null && allow_insert_attr){
  225. 					dom_attr_string+=` ${key}="${cur_dom_attr}"`;
  226. 				}
  227. 			}
  228. 		}
  229. 	}
  230.  
  231. 	if(dom_tag==`html`){
  232. 		return `${dom_html}`;
  233. 	}
  234. 	
  235. 	return `<${dom_tag}${dom_attr_string}>${dom_html}</${dom_tag}>`;
  236. }
  237.  
  238. $.getDOMObject=function(dom_tag,dom_attr,dom_html){
  239. 	try{
  240. 		let domObject=$($.getDOMString(dom_tag, dom_attr, dom_html));
  241. 		if(typeof dom_attr==`object`){
  242. 			//DOM样式
  243. 			try{
  244. 				/*
  245. 				CSS Struct:
  246. 				style:{
  247. 					width:`255px`,
  248. 					height:`255px`,
  249. 				}
  250. 				*/
  251. 				if(typeof dom_attr.style==`object`){
  252. 					domObject.css(dom_attr.style);
  253. 				}
  254. 			}catch(e){
  255. 				console.error(e);
  256. 			}
  257.  
  258. 			//DOM事件绑定
  259. 			try{
  260. 				/*
  261. 				Bind Struct:
  262. 				bind:{
  263. 					click:function,
  264. 				}
  265. 				Another Struct:
  266. 				bind:{
  267. 					click:{
  268. 						data:{},
  269. 						function:function,
  270. 					}
  271. 				}
  272. 				*/
  273. 				if(typeof dom_attr.bind==`object`){
  274. 					for(let key in dom_attr.bind){
  275. 						let curBind=dom_attr.bind[key];
  276. 						domObject.unbind(key);
  277. 						if(typeof curBind==`function`){
  278. 							domObject.bind(key, curBind);
  279. 						}else if(typeof curBind==`object`){
  280. 							curBind={
  281. 								...{
  282. 									data:{},
  283. 									function(){},
  284. 								},
  285. 								...curBind,
  286. 							}
  287. 							domObject.bind(key, curBind.data, curBind.function);
  288. 						}
  289. 					}
  290. 				}
  291. 			}catch(e){
  292. 				console.error(e);
  293. 			}
  294.  
  295. 			//DOM子项
  296. 			try{
  297. 				if(typeof dom_attr.children==`object`){
  298. 					let default_children={
  299. 						tag:undefined,attr:undefined,html:undefined,type:`append`
  300. 					};
  301.  
  302. 					if(dom_attr.children.length==undefined){
  303. 						/*仅一个子项时，可以直接使用Object
  304. 						{
  305. 							tag:`html`,attr:{id:`id`},html:`Test`,type:`append`
  306. 						}
  307. 						*/
  308. 						let children={
  309. 							...default_children,
  310. 							...dom_attr.children,
  311. 						}
  312. 						domObject.attachDOM(children.tag,children.attr,children.html,children.type);
  313. 					}else{
  314. 						/*多个子项时，采用数组形式
  315. 						[
  316. 							{
  317. 								tag:`html`,attr:{id:`id1`},html:`Test1`,type:`append`
  318. 							},
  319. 							{
  320. 								tag:`html`,attr:{id:`id2`},html:`Test2`,type:`append`
  321. 							},
  322. 						]
  323. 						*/
  324. 						for(let i=0; i<dom_attr.children.length; i++){
  325. 							let children={
  326. 								...default_children,
  327. 								...dom_attr.children[i],
  328. 							}
  329. 							domObject.attachDOM(children.tag,children.attr,children.html,children.type);
  330. 						}
  331. 					}
  332. 				}
  333. 			}catch(e){
  334. 				console.error(e);
  335. 			}
  336. 		}
  337. 		return domObject;
  338. 	}catch(e){
  339. 		//对不规范写法的容错，如：只传dom_tag的情况下，直接返回字符串，而不是JQuery对象。
  340. 		return $.getDOMString(dom_tag, dom_attr, dom_html);
  341. 	}
  342. }
  343.  
  344. $.fn.attachDOM=function(dom_tag, dom_attr, dom_html, attach_type){
  345. 	//dom_tag为数组时，批量为母元素添加元素
  346. 	if(typeof dom_tag==`object` && dom_tag.length!=undefined){
  347. 		let default_children={
  348. 			tag:undefined,attr:undefined,html:undefined,type:`append`
  349. 		};
  350. 		for(let cur of dom_tag){
  351. 			cur={
  352. 				...default_children,
  353. 				...cur,
  354. 			}
  355. 			this.attachDOM(cur);
  356. 		}
  357. 		return;
  358. 	}
  359.  
  360. 	//dom_tag为对象时，和普通情况一样
  361. 	if(typeof dom_tag==`object` && dom_tag.length==undefined){
  362. 		dom_attr=dom_tag.attr;
  363. 		dom_html=dom_tag.html;
  364. 		attach_type=dom_tag.type || attach_type;
  365. 		dom_tag=dom_tag.tag;
  366. 		
  367. 	}
  368.  
  369. 	let domObject=$.getDOMObject(dom_tag, dom_attr, dom_html);
  370.  
  371. 	switch(attach_type){
  372. 		case `append`:
  373. 			this.append(domObject);
  374. 		break;
  375. 		case `prepend`:
  376. 			this.prepend(domObject);
  377. 		break;
  378. 		case `after`:
  379. 			this.after(domObject);
  380. 		break;
  381. 		case `before`:
  382. 			this.before(domObject);
  383. 		break;
  384. 		case `html`:
  385. 			this.html(domObject);
  386. 		break;
  387. 	}
  388. 	
  389. 	return domObject;
  390. }
  391.  
  392. $.fn.appendDOM=function(dom_tag,dom_attr,dom_html){
  393. 	return this.attachDOM(dom_tag,dom_attr,dom_html,`append`);
  394. }
  395. $.fn.prependDOM=function(dom_tag,dom_attr,dom_html){
  396. 	return this.attachDOM(dom_tag,dom_attr,dom_html,`prepend`);
  397. }
  398. $.fn.afterDOM=function(dom_tag,dom_attr,dom_html){
  399. 	return this.attachDOM(dom_tag,dom_attr,dom_html,`after`);
  400. }
  401. $.fn.beforeDOM=function(dom_tag,dom_attr,dom_html){
  402. 	return this.attachDOM(dom_tag,dom_attr,dom_html,`before`);
  403. }
  404. $.fn.htmlDOM=function(dom_tag,dom_attr,dom_html){
  405. 	return this.attachDOM(dom_tag,dom_attr,dom_html,`html`);
  406. }