jquery - jQuery 选择器

Question

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

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

- 谁能告诉我这是什么？

Answer 1

$('<td/>')创建一个带有 tag 的 DOM 元素td。

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，应该会出现一个有趣的后续问题，但我不想在这里搅浑水）