jQuery中的HTML Element ('<element>')选择器是什么？

Question

我正在浏览一些jQuery库，发现html元素选择像$('<img/>')，我真的很困惑。

文档代码如下：

function loadImage(src, callback) {
$('<img />').attr('src', src).load(function() {
TestCanvas.init(this);
callback && callback();
}) 

然后我尝试实现以下代码

$(document).ready(function(){
$("button").click(function(){
$('<img/>').attr("width", "500");
});
});

没有按照我的假设工作，因为我假设它是选择器，那么它是什么选择器或 HTML 元素添加器还是什么？

Answer 1

像$('<img />')一样传递元素字符串实际上会在jQuery包装器中创建一个HTML元素。

您可以在内存中像操作 DOM 元素一样操作它。

当你准备好使用这个元素时，你可以使用 jQuery 函数(如 append(( 或 prepend(((将其添加到 DOM 中。

Answer 2

如果您使用的第一个示例，jQuery(html)哪个

从提供的原始 HTML 字符串动态创建 DOM 元素。

$('<img />')将为IMG标签创建一个 DOM 对象，这是一个创建 HTML 的示例

//Create a new DOM object/element
var img = $('<img/>'); 
//Mainpuate properties
img.prop("src", "https://lh5.googleusercontent.com/-ieBdk590MHM/AAAAAAAAAAI/AAAAAAAAACI/-D_w2n30j4I/photo.jpg?sz=328"); 
//Append to DIV
img.appendTo('div');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

如果要创建选择元素，请使用元素选择器("元素"(

$('img').width(100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="https://lh5.googleusercontent.com/-ieBdk590MHM/AAAAAAAAAAI/AAAAAAAAACI/-D_w2n30j4I/photo.jpg?sz=328">
</div>