如何使用 jQuery 更改元素 ID？

jQuery 方法用于更改元素 ID ，如下所述：

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

  句法：

  • 返回一个属性的值：

    $(selector).attr(attribute)
    

  • 设置属性和值：

    $(selector).attr(attribute, value)
    

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

    $(selector).attr(attribute, function(index, currentvalue))
    

  • 设置多个属性和值：

    $(selector).attr({attribute:value, attribute:value, ...})
    

  参数：

  • 属性：此参数指定属性的名称。
  • value：此参数指定属性的值。
  • 函数(index, currentvalue)：该参数指定返回要设置的属性值的函数。
    • index：该参数接收集合中元素的索引位置。
    • currentValue：该参数接收被选元素的当前属性值。
• 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：该参数接收被选元素的当前属性值。

示例 1：本示例使用attr() 方法更改元素的ID并将背景颜色更改为红色。

 
 
     
         
            Change the element ID
         
  
        
        
      
        
            #myCol {
                background: green;
            }
            #newID {
                background: red;
            }
            table {
                color: white;
            }
            td {
                padding: 10px;
            }
        
     
      
    
             
             
                GeeksForGeeks 
                
              
            
                                                                        
                  
                
                    
                    
                    
                
                
                    
                    
                    
                
                
                    
                    
                    
                
            


S.NoTitleGeek_idG_1GFGGeek_id_1Geek_2GeeksForGeeksGeek_id_2
            
              
             
                Click here
             
              
             
                function Geeks() {
                        $("col").attr('id', 'newID');
                }
             
        
     
                    

输出：

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

示例 2：本示例使用prop() 方法更改元素的ID并将背景颜色更改为红色。

 
 
     
         
            Change the element ID
         
          
        
        
          
        
            #myCol {
                background: green;
            }
            #newID {
                background: red;
            }
            table {
                color: white;
            }
            td {
                padding: 10px;
            }
        
     
      
    
             
             
                GeeksForGeeks 
            
              
            
                                                                        
                  
                
                    
                    
                    
                
                
                    
                    
                    
                
                
                    
                    
                    
                
            


S.NoTitleGeek_idG_1GFGGeek_id_1Geek_2GeeksForGeeksGeek_id_2
            
              
             
                Click here
             
              
             
                function Geeks() {
                    $("col").prop('id', 'newID');
                }
             
        
     
                    

输出：

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