Skip to content

Latest commit

 

History

History
376 lines (310 loc) · 10 KB

README.md

File metadata and controls

376 lines (310 loc) · 10 KB
Raw

JQueryDOM

JQuery的插件，使用对象来管理DOM。

功能

  • 优化JQuery增删改查DOM的体验。
  • 使用对象代替HTML字符串来生成HTML DOM对象。

使用方法

获取DOM字符串

  • 注意：这是简单的获取DOM字符串，无法获取子元素。

  • $.getDOMString(`div`,{id:`div`,class:`div`},`This is a DIV.`);

获取JQueryDOM对象

  • $.getDOMObject(`div`,{id:`div`,class:`div`},`This is a DIV.`);

获取JQueryDOM HTML

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

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

原生方式获取DOMHtml

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

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

  • getDOMHtml(`div`,{id:`div`,class:`div`},`This is a DIV.`);
为其他框架提供模板（DOMHtml）
  • 使用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);
            }
         }
    }
});

CSS样式

  • 使用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参数显示文本

  • 注意：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.`
        }
    }
});
插入没有attributes的元素
  • $(`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.`
                }
            }
        }
    },
]);
dom_tag和dom_attr单层对象写法

  • 在同一对象层中写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.`
        }
    ]
});