src 与 attr(src, ...) 有什么区别？答案

【问题标题】：What's the difference between src vs attr(src, ...)?src 与 attr(src, ...) 有什么区别？
【发布时间】：2014-11-07 23:15:13
【问题描述】：

src 和 attr('src', variableName) 有什么区别？在我看来，我正在做同样的事情。为图像源属性赋值。

我正在编写一些 jQuery，在一个地方 src 可以工作，但在另一个地方不行，而在另一个地方， attr('src', variableName) 可以工作，而另一个不工作。

这是我的代码：

$( document ).ready( function() {
    function imageSnap() {
        $( 'p img' ).each( function() {

            // Store image selector
            var image = $( this );

            // Store image source
            var imageSrc = image.attr('data-src');

            // Create new image and assign image source
            var newImage = new Image();
            newImage.src = imageSrc; //                    HERE // works
            //newImage.attr( 'src', imageSrc );                 // doesn't work

            // Execute on image load
            image.load( function() {

                // Store native image dimensions
                var nativeWidth = newImage.width;
                var nativeHeight = newImage.height;


                // more code stuffs


                console.log( 'nativeWidth ' + nativeWidth );
                console.log( 'nativeHeight ' + nativeHeight );
            });

            // Load image
            //image.src = imageSrc;                   AND HERE // doesn't work
            image.attr('src', imageSrc );                      // works
        });
    }

    // Execute on document ready
    imageSnap();
});

【问题讨论】：

标签： javascript jquery src attr

【解决方案1】：

它们是相同的，但第一件事 (.src) 不起作用，因为 $(this) 是从 jQuery 选择器中提取的（$(this) 是您的 image 变量）而 .src 是jQuery 在使用其选择器时无法识别的原生 JavaScript 方法。

【讨论】：

【解决方案2】：

var newImage = new Image();
newImage.src = imageSrc; // works
//newImage.attr( 'src', imageSrc ); // doesn't work

这不起作用，因为var newImage = new Image(); 不是 jquery 语法。因此它没有创建对 jquery 对象的引用，因此作为 jquery 方法的方法 .attr() 将不起作用。但是.src 会因为那是标准的 js。

var image = $( this );

这是引用一个 jquery 对象。因此，当您稍后在其上调用.attr() 时，它将按预期分配。

【讨论】：

那是因为。你会说以不同的方式做他们是一件坏事吗？我似乎找不到用 jQuery 创建新图像的方法。
$('<img>') 将创建一个新的图像节点。然后你可以用属性填充它。我会说一致性总体上是好的。如果您已经在使用 jquery，为了可维护性，尽可能使用 jquery 语法是有意义的。

【解决方案3】：

简单的答案是，newImage 与 image 不是同一个对象。第一个是Image() 类型的对象，它有一个变量src，而第二个是一个JQuery 集合对象，它的src 属性隐藏在某个地方，可以通过attr 函数访问。

【讨论】：