- 优化JQuery增删改查DOM的体验。
- 使用对象代替HTML字符串来生成HTML DOM对象。
-
注意：这是简单的获取DOM字符串，无法获取子元素。
-
$.getDOMString(`div`,{id:`div`,class:`div`},`This is a DIV.`);
-
$.getDOMObject(`div`,{id:`div`,class:`div`},`This is a DIV.`);
-
此方法仅为获取HTML字符串，无法绑定事件。
-
$.getDOMHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`); $.getHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`);
-
需引入html.dom.js脚本。
-
此方法仅为获取HTML字符串，无法绑定事件。
-
getDOMHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`);
- 使用vueDOMHtml、reactDOMHtml为Vue、React等框架提供模板。您可以阅读更加详细的文档：README.vue.md、README.react.md。
-
语法与JQuery相同，只是在append、prepend、before、after、html后面添加“DOM”。下面仅使用appendDOM作为示例。
-
$(`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.`);
-
使用数组传递class
-
数组中的class会按顺序依次添加到元素的class中。
-
$(`body`).appendDOM(`div`,{id:`div`,class:[`div1`,`div2`]}, `This is a DIV.`); // <div id="div" class="div1 div2">This is a DIV.</div>
-
-
使用对象传递class
-
class对象中key对应的value为true时，才会将此key添加到元素的class中。
-
$(`body`).appendDOM(`div`,{id:`div`,class:{div1:true, div2:false, div3:true}}, `This is a DIV.`); // <div id="div" class="div1 div3">This is a DIV.</div>
-
-
$(`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); } }, } });
-
上述事件绑定可简写为如下形式：
-
$(`body`).appendDOM(`div`,{ id:`div`,class:[`div`,`div2`], bind:{ click(e){ console.log(`click`,e); } dblclick(e){ console.log(`dblclick`,e); } } },`This is a DIV.`);
-
-
事件绑定中传递数据：
-
$(`body`).appendDOM(`div`,{ id:`div`,class:`div`,html:`This is a DIV.` bind:{ click:{ data:{index:1}, function(e){ console.log(e.data.index); } } } });
-
-
使用JQuery标准的CSS格式。
-
$(`body`).appendDOM(`div`,{ id:`div`,class:[`div`,`div2`], style:{ backgrundColor:`#FFF`, opacity:0, } },`This is a DIV.`);
-
可以在一个元素中直接插入多个子元素，并且支持多层子元素。同时也可以直接在子元素中绑定事件、CSS。
-
子元素的tag、attr、html分别对应dom_tag、dom_attr、dom_html。
-
$(`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。
-
表格只建议使用单层对象写法。
-
可用tbody替代tr。
-
$(`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`, ]}, ], });
-
注意：td内的元素隐含tag为td，因此不可使用其他tag取代。td内元素应写为如下形式：
-
$(`body`).appendDOM(`table`,{ 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:[ {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参数。
-
$(`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.` } } });
-
-
$(`body`).appendDOM(`div`,`This is a DIV.`);
-
为appendDOM传递元素对象，替代dom_tag、dom_attr、dom_html参数。
-
$(`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传递包含元素对象的数组，即可批量插入多个元素。
-
$(`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.` } } } }, ]);
-
在同一对象层中写tag、attribute、html，更加简洁易读。
-
注意：单层对象写法中，tag、attr和attachType为保留字。
-
如果需要在attribute中使用tag、attr，须更换成tagName、attrName（大小写敏感）。
-
如果需要在attribute中使用tagName、attrName，须使用tag_name、attr_name，会被自动转换。
-
$(`body`).appendDOM({ tag:`div`, tagName:`tag_div`, attrName:`attr_div`, attachtype:`attach_type`, id:`div`,class:[`div`,`div2`], html:`This is a DIV.`, children:[ { tag:`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.` } ] });
-