jQuery | addClass（）及其示例-yiteyi-C++库

这个 addClass 是jQuery中的一个内置方法，用于向每个选定元素添加更多属性。它还可用于更改选定图元的属性。此方法可通过两种不同的方式使用：

null

1）通过直接添加类名： 在这里，类名可以直接与要选择的元素一起使用。 语法：

$(selector).addClass(className);

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

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

                     <                               html                               >                   
                             
                     <                               head                               >                   
                                         <                               meta                               charset                               =                               "utf-8"                               >                   
                                         <                               title                               >addClass demo</                               title                               >                   
                                         <                               style                               >                   
                                         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;                   
                                         }                   
                                         </                               style                               >                   
                                         <                               script                               src                               =                               "                       https://code.jquery.com/jquery-1.10.2.js                      "                               >                   
                                         </                               script                               >                   
                     </                               head                               >                   
                             
                     <                               body                               >                   
                                         <                               p                               >GeeksforGeeks</                               p                               >                   
                                         <                               p                               >gfg</                               p                               >                   
                                         <                               p                               >CSE</                               p                               >                   
                                         <                               script                               >                   
                                         $("p").last().addClass("selected");                   
                                         </                               script                               >                   
                     </                               body                               >                   
                             
                     </                               html                               >                   

在上面的代码中，“p”元素被选中，“selected”类仅在最后一个“p”元素的帮助下应用 .最后 方法和 .addClass（） jQuery的方法。 输出： 图片[1]-jQuery | addClass（）及其示例-yiteyi-C++库

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

$(selector).addClass(function);

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

代码#2：

                     <                               html                               >                   
                             
                     <                               head                               >                   
                                         <                               meta                               charset                               =                               "utf-8"                               >                   
                                         <                               style                               >                   
                                         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;                   
                                         }                   
                                         </                               style                               >                   
                                         <                               script                               src                               =                               "                       https://code.jquery.com/jquery-1.10.2.js                      "                               >                   
                                         </                               script                               >                   
                     </                               head                               >                   
                             
                     <                               body                               >                   
                                         <                               div                               >This div should be white</                               div                               >                   
                                         <                               div                               class                               =                               "red"                               >This div will be green because now it                   
                                         has the both "green" and "red" classes.                   
                                         </                               div                               >                   
                                         <                               div                               >This div should be white</                               div                               >                   
                                         <                               script                               >                   
                                         $("div").addClass(function(index, currentClass) {                   
                                         var addedClass;                   
                                         if (currentClass === "red") {                   
                                         addedClass = "green";                   
                                         $("p").text("There is one green div");                   
                                         }                   
                             
                                         return addedClass;                   
                                         });                   
                                         </                               script                               >                   
                     </                               body                               >                   
                             
                     </                               html                               >                   

在上面的代码中，选择了“div”元素，并在函数的帮助下向所选的div元素添加了一个新类。 输出： 图片[2]-jQuery | addClass（）及其示例-yiteyi-C++库

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript