Jquery选择器

Question

- 我正在学习Jquery。我在这段代码中不理解这个$('<td/>')选择器：

$('<td/>').insertAfter($(this)).text(height).css('border', 'thin solid red'); 

- 任何人都可以告诉我它是什么？

Answer 1

$('<td/>')创建一个标记为td的DOM元素。

insertAfter($(this))在this元素后附加元素。

.text(height)更改了td代码中的文字。

最后，.css('border', 'thin solid red');将红色边框应用于td元素。

Answer 2

$('<td/>')创建一个新的空白<td>元素并将其包装在jQuery对象中。

它将是相同的，就像您在纯JavaScript中创建元素，然后使用$('.selector')选择它。

Answer 3

让我们把它分解成它的组件，也许这将更有启发性：

$('<td/>') // this is initializing a new DOM Node. At this point, however, it's not actually connected to anything, it's just a DOM Node hanging out in the DOM and not attached to the document flow.

.insertAfter($(this)) // now, this is telling jQuery to take that TD element you just created, and insert it after whatever $(this) evaluates to... assuming this is inside, say, a click handler, it would evaluate to the object that triggered the click event, and attach the TD element after "this" element.

.text(height) // says, "set the .text of your TD element to whatever is in the height variable" ... you're basically plugging text inside your TD element.

.css('border', 'thin solid red') // is telling jQuery to modify the TD's style, adding a style for border that is thin, solid and red.

请参阅我在jsFiddle上汇总的示例，以获取有关其如何工作的示例。 http://jsfiddle.net/mori57/xLJHx/

（一个有趣的后续问题应该出现，如果你试着玩jsFiddle我链接你，但我不想在这里混淆水域）