Optimize JQuery experience of insert DOM.
Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta
// @require https://update.greasyfork.org/scripts/422934/1653325/JQuery%20DOM.js
注意：这是简单的获取DOM字符串，无法获取子元素。
$.getDOMString(`div`,{id:`div`,class:`div`},`This is a DIV.`);
javascript
$.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.`);
语法与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
javascript
$(`body`).appendDOM(`div`,{id:`div`,class:[`div1`,`div2`]}, `This is a DIV.`);
// <div id="div" class="div1 div2">This is a DIV.</div>
使用对象传递class
javascript
$(`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>
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`],
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`,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`,
]},
],
});
对象参数写法：
javascript
$(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参数。
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.`
}
}
});
javascript
$(`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，会被自动转换。
javascript
$(`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.`
}
]
});