¿Cómo convertir la primera letra de una string a mayúsculas usando jQuery?

La tarea es poner en mayúscula la primera letra de la string sin usar el método toUpperCase() con la ayuda de jQuery. Hay dos enfoques que se analizan a continuación:

Enfoque 1: en este ejemplo, el método css() se usa para establecer el valor de la propiedad de transformación de texto en mayúsculas .

Ejemplo:

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to convert first letter of a
        string to upper case using jQuery?
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head> 
  
<body style = "text-align:center;"> 
      
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1>
      
    <p>
        Click on the button to
        perform the operation.
    </p>
      
    Type Here: <input id = "input"/>
    <br><br>
      
    <button onclick = "GFG_Fun()">
        Click Here
    </button>
      
    <p id = "GFG"></p>
      
    <script>
        var geeks = document.getElementById('GFG');
          
        function GFG_Fun() {
            $('#input').css('textTransform', 'capitalize');
            geeks.innerHTML = "Text is capitalized";
        }
    </script> 
</body> 
  
</html>

Producción:

Enfoque 2: en este ejemplo, estamos utilizando la propiedad CSS para realizar la operación. Se ha agregado una nueva ID al elemento que establece la propiedad text-transform en mayúsculas .

Ejemplo:

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to convert first letter of a
        string to upper case using jQuery?
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
      
    <style>
        #capital {
            text-transform: capitalize;
        }
    </style>
</head> 
  
<body style = "text-align:center;"> 
      
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1>
      
    <p>
        Click on the button to
        perform the operation.
    </p>
      
    Type Here: <input id = "input"/>
    <br><br>
      
    <button onclick = "GFG_Fun()">
        Click Here
    </button>
      
    <p id = "GFG"></p>
      
    <script>
        var geeks = document.getElementById('GFG');
          
        function GFG_Fun() {
            $('#input').attr('id', 'capital');
            geeks.innerHTML = "Text is capitalized";
        }
    </script> 
</body> 
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar 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 *