diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0baf809 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.min.js \ No newline at end of file diff --git a/README.en.md b/README.en.md deleted file mode 100644 index b90a22c..0000000 --- a/README.en.md +++ /dev/null @@ -1,220 +0,0 @@ -# JQueryDOM -## A plugin for JQuery, use object to manage DOM. - -#### Feature: -- Optimize JQuery experience of insert DOM. -- Use object to instead string to generate HTML DOM string or objects. - -#### How to use: -- Get the DOM string: - - - Notice: This is simple get DOM string, can't get the children elements. - - - ```javascript - $.getDOMString(`div`,{id:`div`,class:`div`},`This is a DIV.`); - ``` - -- Get the JQueryDOM object: - - - ```javascript - $.getDOMObject(`div`,{id:`div`,class:`div`},`This is a DIV.`); - ``` - -- Get the JQueryDOM html: - - - ```javascript - $.getHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`); - ``` - - - -- Insert element: - - - ```javascript - $(`body`).appendDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); - $(`body`).prependDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); - $(`body`).beforeDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); - $(`body`).afterDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); - $(`body`).htmlDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); - ``` - - - Use array classes: - - - ```javascript - $(`body`).appendDOM(`div`,{id:`div`,class:[`div1`,`div2`]}, `This is a DIV.`); - ``` - -- Events bind: - - - ```javascript - $(`body`).appendDOM(`div`,{ - id:`div`,class:[`div`,`div2`], - bind:{ - click(e){ - console.log(`test`); - } - } - },`This is a DIV.`); - ``` - - - The bind events can also push the data: - - - ```javascript - $(`body`).appendDOM(`div`,{ - id:`div`,class:`div`,html:`This is a DIV.` - bind:{ - click:{ - data:{index:1}, - function(e){ - console.log(e.data.index); - } - } - } - }); - ``` - -- Styles with JQuery css object struct: - - - ```javascript - $(`body`).appendDOM(`div`,{ - id:`div`,class:[`div`,`div2`], - style:{ - backgrundColor:`#FFF`, - opacity:0, - } - },`This is a DIV.`); - ``` - -- Children elements: - - - You can direct insert multi-children in one element, and supports cascade. - - - ```javascript - $(`body`).appendDOM(`div`,{ - id:`div`,class:[`div`,`div2`], - children:[ - { - tag:`div`, - attr:{ - id:`div_child_1`,class:[`div`,`div_child`], - children:{ - tag:`div`, - attr:{ - id:`div_grandson`,class:[`div`,`div_child`,`div_grandson`] - }, - html:`This is a grandson DIV.` - } - }, - html:`This is a child DIV.` - }, - { - tag:`div`, - attr:{ - id:`div_child_2`,class:[`div`,`div_child`], - html:`This is a child DIV.` - }, - } - ] - },`This is a DIV.`); - ``` - -- Table elements: - - - ```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`}, - {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`}, - {html:`test td 33`}, - `test td 34`, - ]}, - ], - }); - ``` - -- HTML string in attributes without dom_html param: - - - Notice: the priority of HTML string in attributes is higher than dom_html param. - - - ```javascript - $(`body`).appendDOM(`div`,{ - id:`div`,class:[`div`,`div2`], - html:`This is a DIV.`, - children:{ - tag:`div`, - attr:{ - id:`div_child_1`,class:[`div`,`div_child`], - html:`This is a child DIV.` - } - } - }); - ``` - -- Insert element without attributes: - - - ```javascript - $(`body`).appendDOM(`div`,`This is a DIV.`); - ``` - -- Use object to insert element: - - - ```javascript - $(`body`).appendDOM({ - tag:`div`, - attr:{ - id:`div`,class:[`div`,`div2`], - html:`This is a DIV.`, - children:{ - tag:`div`, - attr:{ - id:`div_child_1`,class:[`div`,`div_child`], - html:`This is a child DIV.` - } - } - } - }); - ``` - -- Batch insert elements: - - - ```javascript - $(`body`).appendDOM([ - { - tag:`div`, - attr:{ - id:`div1`,class:[`div`,`div1`], - html:`This is a DIV 1.`, - children:{ - tag:`div`, - attr:{ - id:`div_child_1`,class:[`div`,`div_child`], - html:`This is a child DIV 1.` - } - } - } - }, - { - tag:`div`, - attr:{ - id:`div2`,class:[`div`,`div2`], - html:`This is a DIV 2.`, - children:{ - tag:`div`, - attr:{ - id:`div_child_1`,class:[`div`,`div_child`], - html:`This is a child DIV 2.` - } - } - } - }, - ]); - ``` - - diff --git a/README.md b/README.md index 8e96cc1..26ab27b 100644 --- a/README.md +++ b/README.md @@ -1,147 +1,220 @@ # JQueryDOM ## JQuery的插件,使用对象来管理DOM。 -#### 功能: +### 功能 - 优化JQuery增删改查DOM的体验。 - 使用对象代替HTML字符串来生成HTML DOM对象。 -#### 使用方法: -- 获取DOM字符串: +### 使用方法 +#### 获取DOM字符串 - - 注意:这是简单的获取DOM字符串,无法获取子元素。 +- 注意:这是简单的获取DOM字符串,无法获取子元素。 - - ```javascript - $.getDOMString(`div`,{id:`div`,class:`div`},`This is a DIV.`); - ``` +- ```javascript + $.getDOMString(`div`,{id:`div`,class:`div`},`This is a DIV.`); + ``` -- 获取JQueryDOM对象: +#### 获取JQueryDOM对象 - - ```javascript - $.getDOMObject(`div`,{id:`div`,class:`div`},`This is a DIV.`); - ``` +- ```javascript + $.getDOMObject(`div`,{id:`div`,class:`div`},`This is a DIV.`); + ``` -- 获取JQueryDOM HTML: +#### 获取JQueryDOM HTML - - ```javascript - $.getHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`); - ``` +- ```javascript + $.getDOMHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`); + $.getHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`); + ``` - -- 插入元素: +#### 插入元素 - - ```javascript - $(`body`).appendDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); - $(`body`).prependDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); - $(`body`).beforeDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); - $(`body`).afterDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); - $(`body`).htmlDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); - ``` +- 语法与JQuery相同,只是在append、prepend、before、after、html后面添加“DOM”。下面仅使用appendDOM作为示例。 - - 使用数组传递class: +- ```javascript +$(`body`).appendDOM(dom_tag, dom_attr, dom_html); +$(`body`).prependDOM(dom_tag, dom_attr, dom_html); +$(`body`).beforeDOM(dom_tag, dom_attr, dom_html); +$(`body`).afterDOM(dom_tag, dom_attr, dom_html); +$(`body`).htmlDOM(dom_tag, dom_attr, dom_html); +// 示例: + $(`body`).appendDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); + $(`body`).prependDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); + $(`body`).beforeDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); + $(`body`).afterDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); + $(`body`).htmlDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`); + ``` - - ```javascript - $(`body`).appendDOM(`div`,{id:`div`,class:[`div1`,`div2`]}, `This is a DIV.`); - ``` - -- 事件绑定: +- 使用数组传递class - ```javascript - $(`body`).appendDOM(`div`,{ - id:`div`,class:[`div`,`div2`], - bind:{ - click(e){ - console.log(`test`); - } - } - },`This is a DIV.`); + $(`body`).appendDOM(`div`,{id:`div`,class:[`div1`,`div2`]}, `This is a DIV.`); ``` - - 事件绑定中传递数据: - - - ```javascript - $(`body`).appendDOM(`div`,{ - id:`div`,class:`div`,html:`This is a DIV.` - bind:{ - click:{ - data:{index:1}, - function(e){ - console.log(e.data.index); - } - } - } - }); - ``` - -- CSS样式: +#### 事件绑定 + +- ```javascript + $(`body`).appendDOM(`div`,{ + id:`div`,class:`div`,html:`This is a DIV.` + bind:{ + click:{ + function(e){ + console.log(`click`,e); + } + }, + dblclick:{ + function(e){ + console.log(`dblclick`,e); + } + }, + } + }); + +- 上述事件绑定可简写为如下形式: - ```javascript $(`body`).appendDOM(`div`,{ - id:`div`,class:[`div`,`div2`], - style:{ - backgrundColor:`#FFF`, - opacity:0, - } + id:`div`,class:[`div`,`div2`], + bind:{ + click(e){ + console.log(`click`,e); + } + dblclick(e){ + console.log(`dblclick`,e); + } + } },`This is a DIV.`); ``` -- 子元素: - - - 可以在一个元素中直接插入多个子元素,并且支持多层子元素。 +- 事件绑定中传递数据: - ```javascript $(`body`).appendDOM(`div`,{ - id:`div`,class:[`div`,`div2`], - children:[ - { - tag:`div`, - attr:{ - id:`div_child_1`,class:[`div`,`div_child`], - children:{ - tag:`div`, - attr:{ - id:`div_grandson`,class:[`div`,`div_child`,`div_grandson`] - }, - html:`This is a grandson DIV.` - } - }, - html:`This is a child DIV.` - }, - { - tag:`div`, - attr:{ - id:`div_child_2`,class:[`div`,`div_child`], - html:`This is a child DIV.` - }, - } - ] - },`This is a DIV.`); - ``` - -- 表格元素: - - - ```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`}, - {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`}, - {html:`test td 33`}, - `test td 34`, - ]}, - ], + id:`div`,class:`div`,html:`This is a DIV.` + bind:{ + click:{ + data:{index:1}, + function(e){ + console.log(e.data.index); + } + } + } }); ``` -- 在attributes中使用html字段取代dom_html参数显示文本: +#### CSS样式 + +- 使用JQuery标准的CSS格式。 + +- ```javascript + $(`body`).appendDOM(`div`,{ + id:`div`,class:[`div`,`div2`], + style:{ + backgrundColor:`#FFF`, + opacity:0, + } + },`This is a DIV.`); + ``` + +#### 高级用法 + +##### 子元素 + +- 可以在一个元素中直接插入多个子元素,并且支持多层子元素。同时也可以直接在子元素中绑定事件、CSS。 + +- ```javascript + $(`body`).appendDOM(`div`,{ + id:`div`,class:[`div`,`div2`], + children:[ + { + tag:`div`, + attr:{ + id:`div_child_1`,class:[`div`,`div_child`], + children:{ + tag:`div`, + attr:{ + id:`div_grandson`,class:[`div`,`div_child`,`div_grandson`] + }, + html:`This is a grandson DIV.` + } + }, + html:`This is a child DIV.` + }, + { + tag:`div`, + attr:{ + id:`div_child_2`,class:[`div`,`div_child`], + html:`This is a child DIV.` + }, + } + ] + },`This is a DIV.`); + ``` + +##### 表格元素 + +- 表格元素拥有特殊的语法,顶层使用tbody或tr取代children,tr中使用td取代children,并且可省略tag。 +- ```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`}, + {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`}, + {html:`test td 33`}, + `test td 34`, + ]}, + ], + }); + ``` +- 可用tr替代tbody。 + +- 支持单层对象写法。 - - 注意:attributes中html字段的优先级大于dom_html参数。 + - ```javascript + $(`body`).appendDOM(`table`,{ + 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:[ + {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:[ + {id:`td1`,class:`td1`,html:`test td 1`}, + {id:`td2`,class:`td2`,html:`test td 2`}, + {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`, + ]}, + ], + }); + +##### 在attributes中使用html字段取代dom_html参数显示文本 + +- 注意:attributes中html字段的优先级大于dom_html参数。 - ```javascript $(`body`).appendDOM(`div`,{ @@ -157,64 +230,108 @@ }); ``` -- 插入没有attributes的元素: - - ```javascript - $(`body`).appendDOM(`div`,`This is a DIV.`); - ``` +##### 插入没有attributes的元素 + +- ```javascript + $(`body`).appendDOM(`div`,`This is a DIV.`); + ``` + +##### 使用对象参数插入元素 -- 使用对象参数插入元素: +- 为appendDOM传递元素对象,替代dom_tag、dom_attr、dom_html参数。 + +- ```javascript + $(`body`).appendDOM({ + tag:`div`, + attr:{ + id:`div`,class:[`div`,`div2`], + html:`This is a DIV.`, + children:{ + tag:`div`, + attr:{ + id:`div_child_1`,class:[`div`,`div_child`], + html:`This is a child DIV.` + } + } + } + }); + ``` + +##### 批量插入多个元素 + +- 为appendDOM传递包含元素对象的数组,即可批量插入多个元素。 + +- ```javascript + $(`body`).appendDOM([ + { + tag:`div`, + attr:{ + id:`div1`,class:[`div`,`div1`], + html:`This is a DIV 1.`, + children:{ + tag:`div`, + attr:{ + id:`div_child_1`,class:[`div`,`div_child`], + html:`This is a child DIV 1.` + } + } + } + }, + { + tag:`div`, + attr:{ + id:`div2`,class:[`div`,`div2`], + html:`This is a DIV 2.`, + children:{ + tag:`div`, + attr:{ + id:`div_child_1`,class:[`div`,`div_child`], + html:`This is a child DIV 2.` + } + } + } + }, + ]); + ``` + +##### dom_tag和dom_attr单层对象写法 + +- 在同一对象层中写tag、attribute、html,更加简洁易读。 + +- 注意:单层对象写法中,tag、attr和attachType为保留字。 + +- 如果需要在attribute中使用tag、attr,须更换成tagName、attrName(大小写敏感)。 + +- 如果需要在attribute中使用tagname、attrname、attachtype,须全部使用小写。 - ```javascript $(`body`).appendDOM({ tag:`div`, - attr:{ - id:`div`,class:[`div`,`div2`], - html:`This is a DIV.`, - children:{ + tagName:`tag_div`, + attrName:`attr_div`, + attachtype:`attach_type`, + id:`div`,class:[`div`,`div2`], + html:`This is a DIV.`, + children:[ + { tag:`div`, - attr:{ - id:`div_child_1`,class:[`div`,`div_child`], - html:`This is a child DIV.` - } + tagName:`tag_div_child_1`, + attrName:`attr_div_child_1`, + attachtype:`attach_type_1`, + id:`div_child_1`,class:[`div`,`div_child`], + html:`This is a child DIV.` + }, + { + tag:`div`, + tagName:`tag_div_child_2`, + attrName:`attr_div_child_2`, + attachtype:`attach_type_2`, + id:`div_child_2`,class:[`div`,`div_child`], + html:`This is a child DIV.` } - } + ] }); ``` -- 批量插入多个元素: - - - ```javascript - $(`body`).appendDOM([ - { - tag:`div`, - attr:{ - id:`div1`,class:[`div`,`div1`], - html:`This is a DIV 1.`, - children:{ - tag:`div`, - attr:{ - id:`div_child_1`,class:[`div`,`div_child`], - html:`This is a child DIV 1.` - } - } - } - }, - { - tag:`div`, - attr:{ - id:`div2`,class:[`div`,`div2`], - html:`This is a DIV 2.`, - children:{ - tag:`div`, - attr:{ - id:`div_child_1`,class:[`div`,`div_child`], - html:`This is a child DIV 2.` - } - } - } - }, - ]); - ``` - diff --git a/VERSION.md b/VERSION.md index e9ecc3c..c2b2c8f 100644 --- a/VERSION.md +++ b/VERSION.md @@ -1,4 +1,9 @@ # JQuery DOM +- Version: 1.0.9 Build 20231227 + - 将getHtml更名为getDOMHtml。 + - 加入表格使用tr替代tbody功能。 + - 加入dom_tag和dom_attr单层对象写法。 + - 更新文档。 - Version: 1.0.8 Build 20231222 - 加入获取生成的HTML功能。 - Version: 1.0.7 Build 20230606 diff --git a/jquery.extensions.dom.js b/jquery.extensions.dom.js index 9eaf437..91cb830 100644 --- a/jquery.extensions.dom.js +++ b/jquery.extensions.dom.js @@ -68,7 +68,7 @@ $.getDOMString=function(dom_tag,dom_attr,dom_html){ allow_insert_attr=false; break; //tbody属性处理 - case `tbody`: + case `tbody`: case `tr`: case `td`: allow_insert_attr=false; break; } @@ -149,13 +149,13 @@ $.getDOMObject=function(dom_tag,dom_attr,dom_html){ try{ if(typeof dom_attr.children==`object`){ let default_children={ - tag:undefined,attr:undefined,html:undefined,type:`append` + tag:undefined,attr:undefined,html:undefined,attachType:`append` }; if(dom_attr.children.length==undefined){ /*仅一个子项时,可以直接使用Object { - tag:`html`,attr:{id:`id`},html:`Test`,type:`append` + tag:`html`,attr:{id:`id`},html:`Test`,attachType:`append` } */ let children={ @@ -163,15 +163,16 @@ $.getDOMObject=function(dom_tag,dom_attr,dom_html){ ...JSON.parse(JSON.stringify(default_children)), ...dom_attr.children, } - domObject.attachDOM(children.tag,children.attr,children.html,children.type); + // domObject.attachDOM(children.tag,children.attr,children.html,children.attachType); + domObject.attachDOM(children); }else{ /*多个子项时,采用数组形式 [ { - tag:`html`,attr:{id:`id1`},html:`Test1`,type:`append` + tag:`html`,attr:{id:`id1`},html:`Test1`,attachType:`append` }, { - tag:`html`,attr:{id:`id2`},html:`Test2`,type:`append` + tag:`html`,attr:{id:`id2`},html:`Test2`,attachType:`append` }, ] */ @@ -181,7 +182,8 @@ $.getDOMObject=function(dom_tag,dom_attr,dom_html){ ...JSON.parse(JSON.stringify(default_children)), ...dom_attr.children[i], } - domObject.attachDOM(children.tag,children.attr,children.html,children.type); + // domObject.attachDOM(children.tag,children.attr,children.html,children.attachType); + domObject.attachDOM(children); } } } @@ -191,21 +193,22 @@ $.getDOMObject=function(dom_tag,dom_attr,dom_html){ //TBODY表格 try{ - if(typeof dom_attr.tbody==`object`){ + if(typeof dom_attr.tbody==`object` || typeof dom_attr.tr==`object`){ let default_tr={ - tag:`tr`,attr:{},html:undefined,children:[],type:`append` + tag:`tr`,attr:undefined,html:undefined,children:[],attachType:`append` }; let default_td={ - tag:`td`,attr:{},html:undefined,children:[],type:`append` + tag:`td`,attr:undefined,html:undefined,children:[],attachType:`append` } - let trList=[]; - for(let i=0; i