interfaz de usuario de jQuery | método addClass()

Posted on by Rudeus Greyrat

El método addClass() es un método incorporado en el marco de jQuery UI que se utiliza para administrar los efectos visuales de la interfaz de usuario. Este método agrega clase a todos los elementos seleccionados junto con la animación de todos los estilos definidos en las propiedades CSS. Básicamente, administra los métodos de animación para la sangría del texto, el ancho, la altura, el relleno, los márgenes, los tamaños de fuente y el espaciado entre letras, lo que proporciona transiciones suaves de efectos.

Sintaxis:

$(selector).addClass(className, options);

Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

  • className: este parámetro contiene el nombre de la clase que debe agregarse.
  • options: Es un parámetro opcional.

Valor de retorno: Devuelve los elementos seleccionados con un nuevo nombre de clase agregado.

Opciones:

  • duración: Esta opción le permite elegir el tiempo de duración del efecto visual en milisegundos. El tipo es número o string y el valor predeterminado es 400.
    Sintaxis:

    $(".selector").addClass(className, "fast");  
  • Easing: esta opción dice qué tipo de aceleración o progreso desea para el efecto visual. El tipo es string y el valor predeterminado es swing .
    Sintaxis:

    $(".selector").addClass(className, "easeOutBounce");  
  • completo: esta opción es el método de devolución de llamada que se llama para cada elemento coincidente después de que se completa el efecto visual. El tipo es función.
  • hijos: Esta opción indica si el efecto visual o la animación se aplica a todos sus descendientes. El tipo es booleano y el valor predeterminado es falso .
  • cola: esta opción indica si el efecto visual o la animación se colocan en la cola de efectos. El tipo es booleano o string y el valor predeterminado es verdadero .

Enlaces para jQuery UI:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax /libs/jqueryui/1.8.16/jquery-ui.js”></script>
<enlace
href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness /jquery-ui.css” rel=”hoja de estilo” type=”texto/css” />

Código jQuery para mostrar el funcionamiento de este método con una sola clase:
Ejemplo 1:

<!DOCTYPE html>
<html>
  
<head>
    <meta charset = "utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
      
    <title>jQuery UI addClass() Example</title>
      
    <link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel = "stylesheet">
          
    <script src = 
"https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src = 
"https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
    <style>
        .welcomeClass {
            width: 200px;
            height: 50px;
            text-align:center;
            padding :10px 10px 10px 10px;
            background-color: lightgreen;
            border: 2px solid green;
        }
        .newClass {
            font-size: 40px;
            background-color: #cccccc;
            color: red;
        }
        .highlight {
            color:#090;
            font-family:Calibri;         
            font-size:2em;
            text-shadow:2px 2px #FF0000;
        }
        .height{ height: 10px;}
        .square {
            width: 100px;
            height: 100px;
            text-align: center;
            padding :8px 10px 8px 10px;
            background-color: #cccccc;         
        }
          
        .easing-square {
            width: 200px;
            height: 200px;
            padding: 20px;
            background-color: lightgreen;
            border: 2px solid green; 
        }
    </style>
      
    <script type = "text/javascript">
      
        $(document).ready(function() {
            $('.btnClass').click(function() {
                if (this.id == "addID") {
                    $('#welcomeId').addClass(
                            "newClass", "fast")
                } 
                else {
                    $('#welcomeId').removeClass(
                            "newClass", "fast")
                }
            })
              
            $( ".square" ).click(function() {
                $( this ).addClass( "easing-square",
                                    700, "swing" );
                $( this ).text("addclass() method "
                        + "executed successfully!");
            }); 
        });
    </script>
</head> 
  
<body>     
    <h1 style="color:green">
        GeeksforGeeks
    </h1> 
      
    <b class="highlight">
        jQuery UI addClass method
    </b>
      
    <div class="height"></div><br>
      
    <div id = welcomeId class = "welcomeClass">
        Welcome !
    </div>
    <div class="height"></div><br>
      
    <button class = "btnClass" id = "addID">
        Add Class
    </button>
      
    <button class = "btnClass" id = "removeID">
        Remove Class
    </button>
      
    <div class="height"> </div><br>
    <div class="square" >Click this </div>
</body>
  
</html>

En el ejemplo anterior, los elementos seleccionados son: “b” y “div” . La clase «resaltar» se aplica en el elemento «b» . La clase «newClass» se aplica en el elemento «div» con id welcomeId . La clase «easing-square» se aplica en el elemento «div» con class square con la ayuda del método .addClass() de jQuery UI.
Producción:

código jQuery para mostrar el funcionamiento de este método con varias clases:

Estructura de diseño: en el siguiente código, se selecciona el elemento «p» y se agregan las clases «rojo» , «fuente» , «relleno» y «borde» con la ayuda del método .addClass() de jQuery UI. El siguiente código CSS es para definir todas las clases para el elemento «p» y también para diseñar la parte de la interfaz de usuario. El siguiente código jQuery es para administrar el evento de clic y agregar varias clases al elemento seleccionado.

Nota: Varias clases están separadas por un espacio en el método addClass() .

  • Código CSS:

    <style>
        .red { 
            background: red; 
            width:400px;          
        }          
          
        .font{ 
            font-size: 3em;
            text-align : center;
        }  
          
        .padding { 
           padding: 1em; 
        }  
          
        .border {
            border: 2px solid black;
            border-radius: 25px;
        }
    </style>
  • Código jQuery:

    <script>
        $(document).ready(function() {  
            $('.btnClass').click(function() {  
                $( "#paraId" ).addClass(
                    "red font padding border", 2500 );  
            });                
        }); 
    </script> 

Solución final:

<!DOCTYPE html> 
<html lang="en">
       
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
      
    <title>
        jQuery UI adding multiple classes
    </title> 
      
    <link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet"> 
          
    <script src=
"http://code.jquery.com/jquery-1.10.2.js"></script> 
  
    <script src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script> 
      
    <style> 
        .red { 
            background: red; 
            width:400px;         
        }         
          
        .font { 
            font-size: 3em;
            text-align : center;
        } 
          
        .padding { 
            padding: 1em; 
        } 
          
        .border {
            border: 2px solid black;
            border-radius: 25px;
        }
    </style> 
      
    <script> 
        $(document).ready(function() { 
            $('.btnClass').click(function() { 
                $( "#paraId" ).addClass( 
                    "red font padding border", 2500 ); 
            });     
        });
    </script> 
</head> 
  
<body> 
    <h1 style="color:green">
        GeeksforGeeks
    </h1> 
      
    <b>jQuery UI adding multiple classes</b>
      
    <div class="height"></div> 
      
    <p id="paraId">GFG website</p> 
      
    <button class="btnClass">
        Click this
    </button>         
</body> 
  
</html>

Producción:

código jQuery para mostrar el funcionamiento de este método con el método de devolución de llamada:

  • Código CSS:

    <style>
        .height { 
            height: 10px;
        }        
          
        .parent { 
            width: 500px;
            height: 250px; 
            position: relative;
        }
          
        #btnClick { 
            padding: .5em 1em;
            text-decoration: none;
        }
          
        #container { 
            width: 380px;
            height: 210px; 
            padding: 1em;
            color: #2d2d2d;          
            border: 1px solid black; 
            background: #b3b3b3;           
        }
          
        .newClass { 
            text-indent: 20px; 
            letter-spacing: .2em;
            width: 380px; 
            height: 210px; 
            padding: 20px; 
            margin: 10px; 
            font-size: 1.1em;
        }    
    </style>
  • Código jQuery:

    <script>
        $(document).ready(function() {
            $( "#btnClick" ).on( "click", function() {
                $( "#container" ).addClass(
                        "newClass", 4000, callback );
            });
       
            function callback() {
                setTimeout(function() {
                    $( "#container" ).removeClass( "newClass" );
                }, 4000 );
            }            
        });
    </script>

Solución final:

<!DOCTYPE html>
<html>
  
<head>
    <meta charset = "utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
      
    <title>jQuery UI addClass with callback</title>
      
    <link href = 
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel = "stylesheet">
    <script src = 
"https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src = 
"https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
    <style>
        .height { 
            height: 10px;
        }        
          
        .parent { 
            width: 500px;
            height: 250px; 
            position: relative;
        }
          
        #btnClick { 
            padding: .5em 1em;
            text-decoration: none;
        }
          
        #container { 
            width: 380px;
            height: 210px; 
            padding: 1em;
            color: #2d2d2d;          
            border: 1px solid black; 
            background: #b3b3b3;           
        }
          
        .newClass { 
            text-indent: 20px; 
            letter-spacing: .2em;
            width: 380px; 
            height: 210px; 
            padding: 20px; 
            margin: 10px; 
            font-size: 1.1em;
        }    
    </style>
  
    <script>
        $(document).ready(function() {
            $( "#btnClick" ).on( "click", function() {
                $( "#container" ).addClass(
                        "newClass", 4000, callback );
            });
       
            function callback() {
                setTimeout(function() {
                    $( "#container" ).removeClass( "newClass" );
                }, 4000 );
            }            
        });
    </script>
</head>
      
<body>
    <h1 style="color:green">GeeksforGeeks</h1> 
      
    <b>jQuery UI add Class method with callback</b>
      
    <div class="height"></div><br>
          
    <div class="parent">
        <div id="container">
            This is to demonstrate jQuery 
            UI addClass method with
            removeClass callback method.
        </div>
    </div>
      
    <button id="btnClick">
        Click to execute
    </button>
</body>
  
</html>

En el código anterior, se selecciona el elemento «div» con el contenedor de identificación y, con la ayuda de la función .addClass() , se agrega una nueva clase al elemento «div» seleccionado. La función de devolución de llamada también se ejecuta con la ayuda del método .removeClass() de jQuery UI.

Producción:

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *