jquery - 我以前从未见过的 jQuery 选择器

Question

我从未见过使用这种语法的选择器；有人可以向我解释吗？

var $select = $('<select>', { id: 'csvMarketSelector', name: 'csvMarketSelector' });

或者

var $marketSelectorContainer = $('<div>').add($('<p>', { text: settings.marketLabel })

我了解 settings.marketLabel; 我只是没有看到像上面这样的选择器。请不要小丑。我搜索了我的答案，包括在这里，但找不到任何有帮助的东西。

提前致谢。

score 5 · Accepted Answer

这里的字符串不是选择器。该jQuery函数还可以接受HTML 字符串，并将其解析为新的 DOM 结构。使用该函数的可能格式为：jQuery

jQuery( html [, ownerDocument] ) // htmlString, document

jQuery( html, attributes )       // htmlString, Object

新的 DOM 元素像任何其他选定元素一样保存在 jQuery 列表中。您可以稍后使用操作函数将其添加到页面的 DOM 中。

score 4 · Accepted Answer

var $select = $('<select>', {
    id: 'csvMarketSelector',
    name: 'csvMarketSelector'
});

说明：

$('<select>'：

创建一个<select>包裹在 jQuery 对象中的新元素

{ id: 'csvMarketSelector', name: 'csvMarketSelector' }

：设置该元素的属性（即<select>）

var $select

将 jquery 对象分配给变量$select

现在你可以像这样使用这个变量 -

$('body').append($select);

更多信息：

score 0 · Accepted Answer

波浪形括号中的部分是属性的散列，将应用于将由 $('') 创建的元素。正如 Sushanth 提到的，它尚未添加到 DOM 中。您还可以通过执行以下操作使用替代语法来获得相同的结果：

var $select = $('<select id="csvMarketSelector" name="csvMarketSelector">');

还没有人提到的重要一点是，您不能混合和匹配这两种类型的属性名称！

var $select = $('<select id="csvMarketSelector">', {name: 'csvMarketSelector'});

上述行将失败。您必须将所有属性放入标签中，或者放入与该标签关联的哈希中。

score 0 · Accepted Answer

var $select = $('<select>', { id: 'csvMarketSelector', 
                              name: 'csvMarketSelector' 
                            });

只需创建一个 select 元素，并提供id 和 name属性。

但是创建的元素还没有附加到 DOM 中。

您可以使用.append(或任何将 HTML 注入 DOM 的方法

$('#div').append($select)

4 回答 4