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

📅  最后修改于: 2021-11-25 03:20:37             🧑  作者: Mango

任务是使用 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          

                   

        

                                       
                                       

        

                          

输出:

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

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

 
 
     
         
            Change the src attribute of
            an img tag using jQuery
        
          
        
     
  
    
           
        

              GeeksForGeeks          

                   

        

                                       
                                       

        

                                               

输出:

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