什么's src和attr之间的区别(src，..）

What's the difference between src vs attr(src, ...)?

本文关键字：src 区别 之间 什么 attr      更新时间：2023-09-26

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();
});

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

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()时，它将按预期进行分配。

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

相关文章：