📜  如何使用 JavaScript/jQuery 禁用 HTML 链接?

📅  最后修改于: 2022-05-13 01:55:59.788000             🧑  作者: Mango

如何使用 JavaScript/jQuery 禁用 HTML 链接?

给定一个 HTML 链接,任务是使用 JavaScript/jQuery 禁用该链接。

使用 JavaScript 禁用 HTML 链接

  • createAttribute() 方法:此方法使用定义的名称创建一个属性,并将该属性作为属性对象返回。

    句法:

    document.createAttribute(attrName)

    参数:此方法接受所需的单个参数attrName 。它指定创建的属性的名称。

    返回值:返回一个节点对象,表示创建的属性。

  • setAttribute() 方法:此方法将定义的属性添加到元素并将其赋予传递的值。如果指定的属性已经存在,则设置/更改该值。

    句法:



    element.setAttribute(attrName, attrValue)

    参数:

    • attrName:该参数是必需的。它指定要添加的属性的名称。
    • attrValue:该参数是必需的。它指定要添加的属性的值。
  • setAttributeNode() 方法:此方法将指定的属性节点添加到元素。如果指定的属性已经存在,此方法将替换它。

    句法:

    element.setAttributeNode(attributeNode)

    参数:此方法接受所需的单个参数attributeNode 。它指定要添加的属性节点。

示例 1:此示例在setAttribute() 方法的帮助下将禁用的类添加到 元素。

  
  
     
         
            How to disable HTML links
            using JavaScript
        
          
        
     
      
      
      
        

               GeeksForGeeks           

               
            LINK                             

                                       

        

                           

输出:

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

示例 2:本示例在setAttributeNode() 方法的帮助下将类 disable 添加到 元素,方法是首先使用createAttribute() 方法创建一个属性,然后将其添加到元素。

 
 
     
         
            How to disable HTML links
            using JavaScript
        
          
        
     
      
     
      
        

              GeeksForGeeks          

               
            LINK                             

                                       

        

                                               

输出:

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

使用 jQuery 禁用 HTML 链接

  • 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:此参数接收所选元素的当前属性值。
  • addClass() 方法:该方法向指定元素添加一个或多个类名。此方法对现有的类属性不做任何事情,它向类属性添加一个或多个类名。

    句法:

    $(selector).addClass(className,function(index,currentClass))
    

    参数:

    • className:此参数是必需的。它指定一个或多个要添加的类名。
    • 函数(index,currentClass):这个参数是可选的。它指定了一个函数,该函数返回一个或多个要添加的类名。
      • index:它返回集合中元素的索引位置。
      • className:它返回所选元素的当前类名。

示例 1:此示例在addClass() 方法的帮助下将 class('disabled') 添加到 元素。

 
 
     
         
            How to disable HTML links
            using jQuery
        
          
        
          
        
     
      
     
      
        

              GeeksForGeeks          

           
            LINK                             

                                       

        

                                               

输出:

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

示例 2:此示例在prop() 方法的帮助下将 class('disabled') 添加到 元素。

 
 
     
         
            How to disable HTML links
            using jQuery
        
          
        
          
        
     
      
     
      
        

              GeeksForGeeks          

           
            LINK                             

                                       

        

                                               

输出:

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