Skip to content

Commit

Permalink
- Version: 1.0.9 Build 20231228
Browse files Browse the repository at this point in the history
	- 将$更名为jQuery以适配更多场合。
	- 加入原生getDOMHtml功能。
  • Loading branch information
road0001 committed Dec 28, 2023
1 parent a708cdd commit e83a441
Show file tree
Hide file tree
Showing 4 changed files with 452 additions and 309 deletions.
66 changes: 30 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,22 @@

#### 获取JQueryDOM HTML

- 此方法仅为获取HTML字符串,无法绑定事件。

- ```javascript
$.getDOMHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`);
$.getHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`);
```

#### 原生方式获取JQueryDOM HTML

- 需引入html.dom.js脚本。

- 此方法仅为获取HTML字符串,无法绑定事件。

- ```javascript
getDOMHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`);
```

#### 插入元素

Expand Down Expand Up @@ -159,18 +170,22 @@

- 表格元素拥有特殊的语法,顶层使用tbody或tr取代children,tr中使用td取代children,并且可省略tag。

- 表格只建议使用单层对象写法。

- 可用tbody替代tr。

- ```javascript
$(`body`).appendDOM(`table`,{
id:`testTable`,class:`testTable`,tbody:[
{attr:{id:`tr1`,class:`tr1`},td:[
{attr:{id:`td1`,class:`td1`,html:`test td 1`}},
{attr:{id:`td2`,class:`td2`},html:`test td 2`},
id:`testTable`,class:`testTable`,tr:[
{id:`tr1`,class:`tr1`,td:[
{id:`td1`,class:`td1`,html:`test td 1`},
{id:`td2`,class:`td2`,html:`test td 2`},
{html:`test td 3`},
`test td 4`,
]},
{td:[
{attr:{id:`td1`,class:`td1`,html:`test td 31`}},
{attr:{id:`td2`,class:`td2`},html:`test td 32`},
{id:`td1`,class:`td1`,html:`test td 31`},
{id:`td2`,class:`td2`,html:`test td 32`},
{html:`test td 33`},
`test td 34`,
]},
Expand All @@ -182,49 +197,28 @@

- ```javascript
$(`body`).appendDOM(`table`,{
id:`testTable`,class:`testTable`,tbody:[
{attr:{id:`tr1`,class:`tr1`},td:[
{attr:{id:`td1`,class:`td1`,children:[
{attr:{id:`tdiv1`,class:`tdiv1`},html:`test td div`},
]}},
{attr:{},html:`test td 2`},
id:`testTable`,class:`testTable`,tr:[
{id:`tr1`,class:`tr1`,td:[
{id:`td1`,class:`td1`,children:[
{tag:`div`,attr:{id:`tdiv1`,class:`tdiv1`},html:`test td div`},
]},
{html:`test td 2`},
{html:`test td 3`},
`test td 4`,
]},
{td:[
{attr:{id:`td1`,class:`td1`,html:`test td 31`}},
{attr:{id:`td2`,class:`td2`},html:`test td 32`},
{id:`td1`,class:`td1`,html:`test td 31`},
{id:`td2`,class:`td2`,html:`test td 32`},
{html:`test td 33`},
`test td 34`,
]},
],
});
```

- 可用tr替代tbody。

- 支持单层对象写法。
- 对象参数写法:

- ```javascript
$(`body`).appendDOM(`table`,{
id:`testTable`,class:`testTable`,tr:[
{id:`tr1`,class:`tr1`,td:[
{id:`td1`,class:`td1`,html:`test td 1`},
{children:[
{id:`tdiv1`,class:`tdiv1`,html:`test td div`},
]},
{html:`test td 3`},
`test td 4`,
]},
{td:[
{id:`td1`,class:`td1`,html:`test td 31`},
{id:`td2`,class:`td2`,html:`test td 32`},
{html:`test td 33`},
`test td 34`,
]},
],
});
// 对象参数写法:
$(`body`).appendDOM({
tag:`table`,id:`testTable`,class:`testTable`,tr:[
{id:`tr1`,class:`tr1`,td:[
Expand Down
3 changes: 3 additions & 0 deletions VERSION.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# JQuery DOM
- Version: 1.0.9 Build 20231228
- 将$更名为jQuery以适配更多场合。
- 加入原生getDOMHtml功能。
- Version: 1.0.9 Build 20231227
- 将getHtml更名为getDOMHtml。
- 加入表格使用tr替代tbody功能。
Expand Down
143 changes: 143 additions & 0 deletions html.dom.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
getDOMHtml=function(dom_tag,dom_attr,dom_html){
let domFullHtml=[];
//dom_tag为数组时,批量为母元素添加元素
if(typeof dom_tag==`object` && dom_tag.length!=undefined){
let default_children={
tag:undefined,attr:undefined,html:undefined,attachType:`append`
};
for(let cur of dom_tag){
cur={
...JSON.parse(JSON.stringify(default_children)),
...cur,
}
domFullHtml.push(getDOMHtml(cur));
}
return domFullHtml.join(``);
}

//dom_tag为对象时,和普通情况一样
if(typeof dom_tag==`object` && dom_tag.length==undefined){
let dom_attr_fix_blacklist=[
`tag`,`attachType`,
]
let dom_attr_fix_replace={
tagName:`tag`, attrName:`attr`,
}
let dom_attr_fix={};
if(dom_tag.attr==undefined){
for(let key in dom_tag){
if(!dom_attr_fix_blacklist.includes(key)){
let key_fix=key;
for(let origin in dom_attr_fix_replace){
key_fix=key_fix.replace(origin,dom_attr_fix_replace[origin]);
}
dom_attr_fix[key_fix]=dom_tag[key];
}
}
}
dom_attr=dom_tag.attr || dom_attr_fix;
dom_html=dom_attr.html || dom_tag.html;
dom_tag=dom_tag.tag;
}

if(typeof dom_attr==`object`){
if(typeof dom_attr.class==`object` && dom_attr.class.length){
dom_attr.class=dom_attr.class.join(` `);
}
if(typeof dom_attr.style==`object`){
let styleList=[];
for(let key in dom_attr.style){
styleList.push(`${key.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${dom_attr.style[key]}`);
}
dom_attr.style=styleList.join(`;`);
}
}

let attr_blacklist=[
`bind`,`children`,`html`,`tbody`,`tr`,`td`,
]
let domElement=document.createElement(dom_tag);
if(typeof dom_attr==`object`){
for(let key in dom_attr){
if(!attr_blacklist.includes(key)){
domElement.setAttribute(key, dom_attr[key]);
}
}
}else if(typeof dom_attr==`string`){
domFullHtml.push(dom_attr);
}
if(dom_html){
domFullHtml.push(dom_html);
}

if(typeof dom_attr==`object` && typeof dom_attr.children==`object`){
let default_children={
tag:undefined,attr:undefined,html:undefined,
};

if(dom_attr.children.length==undefined){
/*仅一个子项时,可以直接使用Object
{
tag:`html`,attr:{id:`id`},html:`Test`,attachType:`append`
}
*/
let children={
...JSON.parse(JSON.stringify(default_children)),
...dom_attr.children,
}
domFullHtml.push(getDOMHtml(children));
}else{
/*多个子项时,采用数组形式
[
{
tag:`html`,attr:{id:`id1`},html:`Test1`,attachType:`append`
},
{
tag:`html`,attr:{id:`id2`},html:`Test2`,attachType:`append`
},
]
*/
for(let i=0; i<dom_attr.children.length; i++){
let children={
...JSON.parse(JSON.stringify(default_children)),
...dom_attr.children[i],
}
domFullHtml.push(getDOMHtml(children));
}
}
}

if(typeof dom_attr==`object` && (typeof dom_attr.tbody==`object` || typeof dom_attr.tr==`object`)){
let default_tr={
tag:`tr`,attr:undefined,html:undefined,children:[],
};
let default_td={
tag:`td`,attr:undefined,html:undefined,children:[],
}
let trList=dom_attr.tbody || dom_attr.tr;
let domTrHtml=[];
for(let i=0; i<trList.length; i++){
let curTr=trList[i];
let tr={
...JSON.parse(JSON.stringify(default_tr)),
...curTr
}
for(let j=0; j<curTr.td.length; j++){
let curTd=curTr.td[j];
if(typeof curTd==`string`){
curTd={html:curTd};
}
let td={
...JSON.parse(JSON.stringify(default_td)),
...curTd,
}
tr.children.push(td);
}
domTrHtml.push(tr);
}
domFullHtml.push(getDOMHtml(domTrHtml));
}

domElement.innerHTML=domFullHtml.join(``);
return domElement.outerHTML;
}
Loading

0 comments on commit e83a441

Please sign in to comment.