En este tutorial aprenderemos acerca de this una función de JavaScript, que mayormente se usa en conjunto con jQuery mediante el selector $(this), al seleccionar a this lo que se hace es seleccionar al elemento que activo el evento, puede sonar confuso por eso para explicarlo usare un ejemplo sencillo.
Ejemplo
Supongamos que tenemos un documento como este:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Ejmplo This</title>
</head>
<body>
<button>Hazme clic</button>
<button>Hazme clic</button>
<button>Hazme clic</button>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script>
$(function() {
});
</script>
</body>
</html>
Tenemos 3 botones y queremos que cuando se haga clic en cada uno de ellos corra un evento de jQuery, como por ejemplo cambiar el texto que esta dentro, entonces lo común que harÃamos seria lo siguiente:
$(function() {
$('button').click( function (){
$('button').text("Hola!");
});
});
Pero si vemos el resultado, notamos que el evento esta afectando a todos los botones:
Para solucionar problemas de este tipo, se usa a this como elemento seleccionado, de esta manera hacemos que el evento corra de forma individual en cada uno de los botones, lo que tendriamos que cambiar en el codigo anterior seria:
$('button').click( function (){
$(this).text("Hola!");
});
Y el resultado:
Lo que hemos hecho es decirle a jQuery que cuando se haga clic en el elemento button corra un evento, pero que este evento corra unicamente en este/this elemento (el elemento que provoco el evento).
Este es solo un ejemplo de los cientos de usos que le podemos dar a this, espero os haya servido este corto tutorial.
Saludos Camarada:
Esoy viendo el tutorial, se ve sencillo y está muy bien explicado, voy a copiar el Código para correrlo en mi máquina, después le cuento
Le agradezco el post, estas explicaciones sencillas de asuntos que uno considera complicado, envalentonan a los novatos en estas lides a enfrentarse a estos programas con la firme intención de dominarlos.
Gracias a ti por pasar y comentar, un saludo!
Mucha gracias :
pero quiero preguntarles tbn se podria hacer en caja de texto es q quiero hacer una parte en que escriba el numero en una caja de texto y al costado halla otra caja de texto con el valor representado no se si me hago entender pero es algo asi si en la primera caja de texto escribo 1 en la otra caja de texto automaticamente saldria el valor representado de uno q seria webturso se podria hacerlo. eso seria mi consulta
Lo que quieres es obtener el valor ingresado en un elemento y luego pasarlo a otro? te dejo un ejemplo con usando el método keyup(), si tienes alguna duda me dices.
$('.texto1').keyup( function(){
var valor = $(this).val();
$('.texto2').text(valor);
});
Lo hice en JSbin por si quieres verlo en vivo: http://jsbin.com/etasic
DISCUKLPA POR PREGUNTAR VARIAS VECES EN UNAS HORAS SE PODRIA VALIDAR ANTES DE ENVIAR O SEA Q SI AL MOMENTO Q ESCRIBE MAL EN UN CAMPO DE TEXTO DE INMEDIATAMENTE TE SALGA UN MENSAJE DE ERROR Y O TBN Q NO TE PERMITA ESCRIBIR NADA SI NO ES CAMPO INDICADO
Este tutorial de validación en Javascript te puede servir, por favor no escribas en mayúsculas.
pero igual tengo la duda si se puede poner valores a un campo de texto como q te menciones anteriormente si en el primer campo se escribe 1 el otro campo debe mostrar web tursos w es el inabilitado
1.campoxtex=webtursos.campotext2 algo asi disculpa las molestias
Disculpas verdad por ser pregunto en lo q es validacion solo se activa cuando presionas enter el mensaje de error pero cuando son tablas al presionar enter se envia el formularios y ademas cuando presionas tab no se muestra el mensaje de error
Claro, allà puedes jugar con la variable ‘valor’, puedes hacer condiciones que si escribe esto se convierta en aquello.
UN EJEMPLITO TENDRAS
$(‘.texto1’).keyup( function(){
var valor = $(this).val();
if(valor == «1»){
nuevovalor = «cosa»;
}
$(‘.texto2’).text(nuevovalor);
});
ASU XQ ERES TAN BUENO GRACIAS !!!!!!!!!!!
Que bueno que te haya funcionado, la verdad que no lo probe 😀
yo tbn lo probe hoy pero en el js bin con el ejemplos q me diste si sale pero cuando quiero poner en un campo texto como qhay no me sales
le puse la clase tb y tampoco me salio ademas se puede hacer enter automatico solo apenas escribe una palabra automaticamente se pasa al sgt campo se puede hacer eso tbn
El cambio automatico ya esta, es el evento keyup() apenas escribes se pone al otro lado, sobre lo que no te funciona la verdad no se tal vez no estas incluyendo a jQuery, prueba a ver la consola en tu navegador allà es donde se muestra cualquier error de Javascript
si lo he probado encima del ejemplo de js bin si corre bien pero cuando quiero agregar un campo de texto y hacer lo mismo como q no funca hay
una consulta cuando quiero regresar a una campo o comenzar un campo aparezco dentro lo escrito del campo anterior no si habra una funcion de q se sombrees lo qhas escrito para facilmente poder borralo o agregar algo
gracias
mmm no te entiendo, te refieres a un autofocus?
si algo asi
pero igual cuando quieres pones clases en un campo de texto igual te debe de funcar
de veras el problemas con la caja de texto es q el recepciona el valor del javascript en el segundo campo q es text2 en la class no recibe nada pero si en uan caja de texto guau disculpas por mis curiosidades en veras
una consulta en el ejemplo de un valor ingresado pasarlo a otro como se haria en un campo de texto y no text area
En vez de $(textarea).text(nuevovalor), pones $(campo de texto).attr(‘value’, nuevovalor);
no te entendi ene en ejemplo q me diste en el ultimo comentario
ya no disculpa las molestias ya lo lo gre
disculpa pero podrias dar un ejemplo de un autoenter
https://tursos.com/tutoriales/html-css/10-novedades-de-html5-que-puedes-empezar-a-aprovechar-ahora-mismo
eh una pregunta con el autofocus del html5 se le puede manipular como por ejemplo cuando abre el formulario se haga autofocus aun campo determinado pero luego cuando se hace submit o un envio y al regresar al formulario empieze en otro campo determinado o q se haga uun autofocus al primer campo vacio cuando son sessiones
Creo que no, usa el .focus() de jQuery sino.
Y COMO LE DOY EL FOCUS DE JQUERY
oe ye una consulta se puede g¿hacr scrollbar con tablas dentro en php
No te entiendo, explicate.
esto tengo una tabla que contiene varios datos y se desgloza en toda la pagina y lo quiero g+hacer es como un text area q se desglozas segun los datos q se va escrbiendo pero encapsulado eso es lo q quiero hacer pero en tablas y una consulta mas sabes como activar pdo del mssql server
Pon la tabla dentro de un div, a este div definele un height, y le pones ademas overflow: auto
disculpa por insistir pero tengo una consulta quiero conectarme a una bd externa de sqlserver en php con librerias pdo lo he echo local mente y me salio pero cuando conextarme externamente a otra base de datos que esta conectado en otra maquina como q no se como conectarme a su bd de datos con el pdo , a una manera de conectarse a otra bd en pdo
Lo siento pero no manejo PDO, siempre he usado MySQL, borre varios de tus comentarios porque estaban en mayusculas.
gracias
pero igual como te conectarias auna bd externa o que este en una intranet desde mysql
una consulta eh querido conectarme por ip 127.0.0.1 en mysql y sale un error por tiempo que demora demasiada la conexion y sale una error por conexion
Muy buen ejemplo, felicidades, lo he entendido y me quedo claro ! 😀
puedo al dar click desplegar una caja con un texto??? si es asi como se debe hacer, tenes un ejemplo??? muchas gracias.
Pregunta, estoy haciendo con jquery el efecto del tab, necesito que cada vez haga click en un tab se ejecute mi codigo del Code Begin para hacer llamada a mi base de datos (proyecto en capas), con java script he logrado hacer esto:
$(«#tab»).click(function() {
$(«#btnBoton»).click();
});
LLama mi code Begin pero, como que hace un refresh, y vuelve al primer Tab, como si no hubiera hecho click en ningun Tab, ayuda please, como resuelvo esto. Espero haberme dejado entender. Gracias.
Que es ‘Code Begin’? no te entendi del todo, para hacer tabs te recomiendo usar este plugin.
Code Begin es donde pongo mi codigo vb, ejemplo:
Private Sub btnAceptar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUltimo.Click
End Sub
Cada vez que entra a esta linea, se vuelve a cargar mi pagina y vuelve al primer tab como si no hubiera hecho click en ningun tab. Gracias por tu pronta respuesta voy a ver tu link, ojala me ayude. Si tienes una respuesta con jquery te lo agradeceria bastante
Esta muy bien la explicacion, sin embargo, al hacer click en otro boton el anterior no vuelve a su estado original, por lo que no va a ser muy util en la practica, yo solo agregaria una linea de codigo extra, asi que mi codigo quedaria de esta forma:
$().ready(function()
{
$(«button»).click(function()
{
$(«button»).text(«Hazme Click»);
$(this).text(«Hola!»);
});
});
saludos 🙂
super entendible….gracias por tus tutos
Muy bueno, muchas gracias por el aporte xD
muchas gracias!