如何在 JavaScript/jQuery 中更改 img 元素的 src 属性？

任务是使用 JQuery 和 JavaScript 更改 元素的 src 属性。

• jQuery prop() 方法：此方法设置/返回匹配元素的属性和值。如果使用此方法返回属性值，则返回第一个选定元素的值。如果此方法用于设置属性值，则它为一组选定元素设置一个或多个属性/值对。

  句法：

  • 返回一个属性的值：

    $(selector).prop(property)

  • 设置属性和值：

    $(selector).prop(property, value)

  • 使用函数设置属性和值：

    $(selector).prop(property, function(index, currentvalue))

  • 设置多个属性和值：

    $(selector).prop({property:value, property:value, ...})

  参数：

  • property：此参数指定属性的名称。
  • value：此参数指定属性的值。
  • 函数(index, currentvalue)：此参数指定一个函数，该函数返回要设置的属性值。
    • index：该参数接收元素在集合中的索引位置。
    • currentValue：此参数接收所选元素的当前属性值。
• jQuery on() 方法：该方法为被选元素和子元素添加一个或多个事件处理程序。

  句法：

  $(selector).on(event, childSelector, data, function, map)

  参数：

  • 事件：此参数是必需的。它指定一个或多个事件或命名空间以附加到所选元素。如果有多个事件值，它们之间用空格分隔。事件必须是有效的。
  • childSelector：这个参数是可选的。它指定事件处理程序应该只附加到定义的子元素。
  • 数据：该参数是可选的。它指定要传递给函数的附加数据。
  • 函数：此参数是必需的。它指定事件发生时要运行的函数。
  • map：它指定了一个事件映射（{event:func(), event:func(), …}）具有一个或多个要添加到所选元素的事件，以及在事件发生时运行的函数。

示例 1：本示例使用 JavaScript 更改图像的 src 属性。

 
 
     
         
            Change the src attribute
            of an img tag
             
     
      
     
          
         
            GeeksForGeeks 
        
          
        
        
          
        
          
        
          
        
            click here
        
          
        
        
          
         
            var up = document.getElementById('GFG_UP');
            up.innerHTML = "Click on button to change the src of image";
            var down = document.getElementById('GFG_DOWN'); 
              
            function GFG_Fun() {
                document.getElementById("img").src =
'https://media.geeksforgeeks.org/wp-content/uploads/20190529122826/bs11.png';
                down.innerHTML = "src attribute changed";
            }
         
     

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：本示例使用 JQuery 更改图像的 src 属性。

 
 
     
         
            Change the src attribute of
            an img tag using jQuery
        
          
        
        
     
  
    
           
         
            GeeksForGeeks 
        
          
        
        
          
        
          
        
          
        
            click here
        
          
        
        
          
         
            $("#GFG_UP").text("Click on button to change the src of image");
            $('button').on('click', function(e) {
                $('#img').prop('src',
'https://media.geeksforgeeks.org/wp-content/uploads/20190529122826/bs11.png'); 
                $("#GFG_DOWN").text("src attribute changed");
            }); 
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：