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 创建一个新元素并设置的innerHTML属性传入的HTML片段的元素。当参数有。时单个标记（包含可选的结束标记或快速关闭） - $( "<img />" )或$( "<img>" )，$( "<a></a>" )或$( "<a>" ) - jQuery创建使用本机JavaScript createElement（）函数的元素。

因此，在jQuery中创建元素时，所有这些都是等价的：

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

Answer 2

在这种简单的情况下，jquery会自行解析传递的字符串，并且它不区分需要打开/关闭标记的元素和不需要它们的元素。

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

2 个答案: