为什么使用'<div />'作为JQuery UI对话框方法中的对象有效？

Question

请考虑以下创建JQuery UI对话框的代码:

    function showBox()  {
      $('<div />').html('This is my dialog').dialog({
         buttons: {
           'Okay': function(){
              $(this).dialog('close');
           },
          'Return': function(){ 
              $(this).dialog('close'); 
           }
         },
         close: function(){ $(this).dialog('destroy').remove(); },
         modal: true,
         title: 'My Dialog Title',
         width: 350
       });
    }

以及HTML页面正文中的简单链接:

<a href="#" onClick="showBox()">Click to open a box</a>

该代码完美地用于启动JQuery UI对话框.

我的问题是:为什么不使用<div />作为$()参数实际上产生工作盒子？

我一直用<div></div>我的$()的对话参数.在HTML中,div是需要打开和关闭标记的块级元素,那么为什么只<div />使用有效选项呢？

Answer 1

因为这就是jQuery的设计方式:

在大多数情况下,jQuery的创建新的元素,并将该元素添加到HTML片段中传递当参数有一个标签的innerHTML属性(带有可选的结束标记或快速关闭) - $( "<img />" )或者$( "<img>" ),$( "<a></a>" )或者$( "<a>" )- jQuery的创建使用本机JavaScript createElement()函数的元素.

所以在jQuery中创建元素时,所有这些都是等价的:

• <div></div>
• <div />
• <div>