jQuery | addClass() 与示例

addClass是 jQuery 中的一个内置方法，用于为每个选定元素添加更多属性。它还可用于更改所选元素的属性。该方法可以以两种不同的方式使用：

1）直接添加类名：
在这里，类名可以直接用于要选择的元素。
句法：

$(selector).addClass(className);

参数：它接受一个参数“className”，它是要添加的类的名称。
返回值：它返回添加了新类的选定元素。

jQuery 代码显示此方法的工作：
代码#1：

  

    
    addClass demo
    
        p {
            margin: 8px;
            font-size: 35px;
        }
          
        .selected {
            color: ;
            display: block;
            border: 2px solid green;
            width: 160px;
            height: 60px;
            background-color: lightgreen;
            padding: 20px;
        }
          
        .highlight {
            background: yellow;
        }
    
    
    

  

    GeeksforGeeks
    gfg
    CSE
    
        $("p").last().addClass("selected");
    

  

在上面的代码中，在.last()方法和.addClass()方法的帮助下，“p”元素被选中，“selected”类仅应用于最后一个“p”元素。
输出：

2）通过传递一个函数来添加新类：
在这里，可以将一个函数传递给所选元素的 .addClass()。
句法：

$(selector).addClass(function);

参数：它接受一个参数“函数”。
返回值：它返回具有添加函数的选定元素。

代码#2：

  

    
    
        div {
            background: white;
            margin: 20px;
        }
          
        .red {
            background: red;
            width: 300px;
            margin: 20px;
        }
          
        .red.green {
            background: lightgreen;
            margin: 20px;
            border: 2px solid green;
        }
          
        body {
            border: 2px solid green;
            width: 350px;
            height: 200px;
        }
    
    
    

  

    This div should be white
    This div will be green because now it 
            has the both "green" and "red" classes.
    
    This div should be white
    
        $("div").addClass(function(index, currentClass) {
            var addedClass;
            if (currentClass === "red") {
                addedClass = "green";
                $("p").text("There is one green div");
            }
  
            return addedClass;
        });
    

  

在上面的代码中，选择了“div”元素，并在一个函数的帮助下将一个新类添加到所选的 div 元素中。
输出：