Question

我正在浏览一些jQuery lib，发现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的示例

＆＃13;

//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');

＆＃13;

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

＆＃13;

如果您打算创建select元素，请使用Element Selector (“element”)

＆＃13;

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

＆＃13;

<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>

＆＃13;

什么是jquery中的html元素（＆＃39; <element>＆＃39;）选择器？

2 个答案: