我以前从未见过的 jQuery 选择器答案

【问题标题】：Something I've not seen before with jQuery selectors我以前从未见过的 jQuery 选择器
【发布时间】：2013-05-24 18:18:40
【问题描述】：

我从未见过使用这种语法的选择器；谁能给我解释一下？

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

或

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

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

提前致谢。

【问题讨论】：

【解决方案1】：

这里的字符串不是选择器。 jQuery 函数也可以接受 HTML string，它将其解析为新的 DOM 结构。用于 jQuery 函数的 possible formats 是：

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

jQuery( html, attributes )       // htmlString, Object

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

【讨论】：

【解决方案2】：

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

说明：

$('<select>'：

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

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

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

var $select

将 jquery 对象分配给变量$select

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

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

更多信息：

【讨论】：

【解决方案3】：

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

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

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

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

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

【讨论】：

【解决方案4】：

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

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

目前还没有人提到的重要一点是，你不能混合和匹配这两种类型的属性指定！

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

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

【讨论】：