Inicia sesión


Escribir Texto Con JQuery

Con jQuery se pueden hacer muchísimas cosas, este vez hablaré de como escribir texto con jquery dentro de un objeto (recordemos que en jаvascript todo es un objeto).

Se utiliza la función .text();

Que en si consiste en que, si a un objeto le escribes esa función sin parámetros, te devolverá el texto que se encuentra dentro de él, mas sin embargo si le asignamos un parámetro, reemplazará el texto que contenga ese objeto por el nuevo texto que se le asigne como parámetro.

Por ejemplo:

Tenemos un div con una id "divcontexto”, en el cual se encuentra dentro de ella el texto "Soy el texto original del objeto”.


<div id="divcontexto">Soy el texto original del objeto</div> 


En seguida se encuentran dos botones: uno con la id "leer”; el otro con la id "reemplazar”


<input id="leer" type="button" value="Lee texto">
<input id="reemplazar" type="button" value="Reemplaza texto">


Nuevamente, necesitamos vincula el archivo jquery a nuestro documento.


<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> 


Ahora, la acción del objeto botón con la id "leer” obtendrá todo el texto del div que acabamos de crear. Recordemos que ese div tiene la id "divcontexto”


$("#leer").click(function (){
    var texto = $("#divcontexto").text();
    alert(texto);
});


Nótese que la función .text() no lleva parámetros (lo que significa que obtendrá el texto), y se guardo en una variable para en seguida mostrarla en una alerta.

 

Y para el otro botón.


$("#reemplazar").click(function (){
    $("#divcontexto").text("Soy el nuevo texto");
});


En esta ocasión si que se le escribió un parámetros a la función .text() (o sea, remplazara el texto anterior por el parámetro).

El código completo seria:


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Incluye texto con jQuery</title>
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/jаvascript">
        $(document).ready(function (){
            $("#leer").click(function (){
                var texto = $("#divcontexto").text();
                alert(texto);
            });
            $("#reemplazar").click(function (){
                $("#divcontexto").text("Soy el nuevo texto");
            });
        });
    </script>
</head>
<body>
<div id="divcontexto">Soy el texto original del objeto</div>
<input id="leer" type="button" value="Lee texto">
<input id="reemplazar" type="button" value="Reemplaza texto">
</body>
</html>
Ver Resultado


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2016-02-07
  • Categorias: jQuery Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Efectos jQuery - Ocultar y mostrar

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Como abrir un enlace con jQuery

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial