☰

JQuery DOM

Optimize JQuery experience of insert DOM.

当前为 2024-01-22 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/422934/1315442/JQuery%20DOM.js

作者
road_0001
版本
0.0.1.20240122035140
创建于
2021-03-09
更新于
2024-01-22
大小
9.1 KB
许可证
暂无

JQueryDOM

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

功能

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

使用方法

获取DOM字符串

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

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

获取JQueryDOM对象

  • javascript $.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中。
    • 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

    • class对象中key对应的value为true时，才会将此key添加到元素的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); } } } });

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`,
      ]},
  ],
});

  • 对象参数写法：

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

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

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