Etiqueta: jquery

 <button id="anyadir">Añadir</button>
 <button id="delFirst">Eliminar primera</button>
 <button id="delLast">Eliminar última</button>
 <button id="suma">Sumar</button>
 <button id="suma2">Sumar 2</button>
 
 <table border="1" id="lista">
 <tr><td>1</td></tr>
 </table>

$(function () {

$('#anyadir').click(function () {
var numero = Math.floor(Math.random() * 10) + 1;
$('#lista').append("<tr><td>" + numero + "</td></tr>");
});
$('#delFirst').click(function () {
$('#lista tr:first-child').remove();
});
$('#delLast').click(function () {
$('#lista tr:last-child').remove();
});
$('#suma').click(function () {
var suma = 0;
for (var i = 1; i <= $('#lista tr').length; i++) {
suma += parseInt($('#lista tr:nth-child(' + i + ') td').html());
}
$('#lista').before("Suma: " + suma);
});

$('#suma2').click(function () {
var suma = 0;
$('#lista td').each(function () {
suma += parseInt($(this).html());
});
$('#lista').before("Suma: " + suma);
});
});

 

 <input type="text" id="texto">
 <p>Hola que tal</p>
 <p>Yo muy bien</p>
 <div id="resultado"></div>
 <button id="boton">Pulsar</button>
 <button id="mas">Añadir</button>
 <button id="eliminar">Eliminar</button>

$(function () {
$('#boton').click(function () {
$('p').animate({fontSize: "30px"}, 3000)
.animate({fontSize: "10px"}, 3000)
.animate({fontSize: "30px"}, 3000);
});
$('#eliminar').click(function () {
$('p:last-child').remove();
});
$('#mas').click(function () {
// var div = $('#resultado').html();
// div += "<p>" + $('#texto').val() + "</p>";
// $('#resultado').html(div);
$('#resultado').append("<p>" + $('#texto').val() + "</p>")
$('#texto').val('');
$('p').click(function () {
$(this).remove();
});
});

$('#texto').keyup(function (event) {
if (event.keyCode === 13) {
$('#mas').click();
}
});

});

Selectores:

• Seleccionar los párrafos dentro de un div
• Seleccionar el segundo tr de una tabla con id ‘datos’

Estilos

• Poner todos los enlaces de color de fondo gris
• Añadir a todas las cabeceras ‘h1’ la clase ‘cabecera’
• A todos los elementos que tengan la clase ‘supercool’, quitársela.

Eventos

• Cuando se pulse el botón con id ‘alerta’ mostrar un alert con un texto
• Al pasar por encima de cualquier párrafo que se ponga el fondo de color rojo
• Y cuando se salga de color blanco

Contenido

• Añadir un elemento ‘<li>hola</li>’ a la lista con id ‘lista’
• Vaciar el contenido de todos los span de la página
• Obtener el valor de un input con id ‘sueldo’

Parentela:

• Eliminar todos los hijos del elemento con id ‘contenedor’
• Añadir al padre del elemento con id ‘lista’ la clase ‘destacado’
• Ocultar todos los hermanos del elemento con id ‘lista’
• Crear un duplicado de la lista con id ‘lista’

Efectos

• Al pinchar en cualquier elemento de la página (menos el body) que se desvanezca
• Al pinchar en cualquier elemento ‘li’ de la lista con id ‘lista’ que aparezcan/desaparezcan sus hermanos
• Cuando se pinche en una imagen con id ‘cohete’ que suba ‘parriba’ y luego baje ‘pabajo’

jquery

$(function () {
    function creaBoton(clase, valor) {
        return '<input type="button" class="btn btn-success ' + clase + '" value="' + valor + '">';
    }
    function lista(elementos, valor) {
        var res = "<ul>";
        for (var i = 0; i < elementos; i++) {
            res += '<li>' + valor + '</li>';
        }
        return res + "</ul>";
    }
    function columna(ancho, elementos) {
        var columna = '<div class="col-sm-' + ancho + '">';
        columna += creaBoton('menos', '-');
        columna += creaBoton('mas', '+');
        columna += creaBoton('otros', '/\\');
        columna += creaBoton('otrosmenos', '\\/');
        columna += lista(elementos, "-");
        columna += "</div>";
        return columna;
    }
    function columnas(ncol, ancho, elementos) {

        var res = "";
        for (var i = 0; i < ncol; i++) {
            res += columna(ancho, elementos);
        }
        return res;

    }
    $('#nuevo').click(function () {

        $('#resultado').html(columnas(4, 3, 5));


        $('.menos').click(function () {

            //  $(this).siblings('ul').children().eq(0) .remove();
            //Buscamos los hermanos de tipo 'ul' y quitamos el último hijo
            $(this).siblings('ul').children().last().remove();
            //Si ya no hay más hijos deshabilitamos el botón
            if ($(this).siblings('ul').children().length === 0) {
                $(this).attr('disabled', 'disabled');
            }
        });
        $('.mas').click(function () {
            //Buscamos el hermano de tipo ul y añadimos un elemento
            $(this).siblings('ul').append('<li>-</li>');
            $(this).siblings('.menos').removeAttr('disabled');
        });
        $('.otros').click(function () {
            //Los hermanos de mi columna tienen listas 'ul' y añadimos un elemento
            $(this).parent().siblings().children('ul').append('<li>-</li>');
            $(this).parent().siblings().children('.menos').removeAttr('disabled');

        });
        $('.otrosmenos').click(function () {
            //Los hermanos de mi columna tienen listas 'ul' y añadimos un elemento
            $(this).parent().siblings().children('ul').each(function () {
                $(this).children().last().remove();
                if ($(this).children().length === 0) {
                    $(this).siblings('.menos').attr('disabled', 'disabled');
                }
            });


        });
    });
});

$(function () {
    function celdas(){
        $('td').mouseenter(function () {
            $(this).addClass("destacado");
        });
        $('td').mouseleave(function () {
            $(this).removeClass("destacado");
        });
    }
    $('#crear').click(function () {

        var tabla = "";
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        for (var i = 0; i < filas; i++) {
            tabla += "";
            for (var j = 0; j < columnas; j++) {
                tabla += "";
            }
            tabla += "";
        }

        tabla += "
#
";

        $('#resultado').html(tabla);
        celdas();

    });
    $('#crear2').click(function () {

        var tabla = "";
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        var fila = "";
        for (var i = 0; i < columnas; i++) {
            fila += "";
        }
        for (var i = 0; i < filas; i++) {
            tabla += "" + fila + "";
        }
        tabla += "
#
";

        $('#resultado').html(tabla);
    });

    $('#crear3').click(function () {
        var tabla = "";
        $('#resultado').html(tabla);
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        for (var i = 0; i < filas; i++) {
            $('tbody').append("");
        }
        for (var i = 0; i < columnas; i++) {
            $('tr').append("#");
        }
    });
    
    $('#aumentar').click(function () {
        $('#fila_nueva').click();
        $('#col_nueva').click();
    });
    $('#fila_nueva').click(function () {
        var fila = $('tr').html();
        $('table').append("" + fila + "");
        celdas();
    });
    $('#col_nueva').click(function () {
        $('tr').append("#");
        celdas();
    });
    $('#rellenar').click(function () {
        $('td').text($('#contenido').val());
    });
    $('#numerar').click(function () {
        var cont = 1;
        $('td').each(function () {
            $(this).text(cont);
            cont++;
        });

    });
});

ahorcado

Bucles anidados:

$('#crear').click(function () {

        var tabla = "<table  class='table table-bordered'>";
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        for (var i = 0; i < filas; i++) {
            tabla += "<tr>";
            for (var j = 0; j < columnas; j++) {
                tabla += "<td>#</td>";
            }
            tabla += "</tr>";
        }

        tabla += "</table>";

        $('#resultado').html(tabla);
    });

Bucles sucesivos:

 $('#crear2').click(function () {

        var tabla = "<table  class='table table-bordered'>";
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        var fila = "";
        for (var i = 0; i < columnas; i++) {
            fila += "<td>#</td>";
        }
        for (var i = 0; i < filas; i++) {
            tabla += "<tr>"+fila+"</tr>";
        }
        tabla += "</table>";

        $('#resultado').html(tabla);
    });

Usando jquery:

    $('#crear3').click(function () {
        var tabla = "<table  class='table table-bordered'></table>";
        $('#resultado').html(tabla);
        var filas = $('#filas').val();
        var columnas = $('#columnas').val();
        for (var i = 0; i < filas; i++) {
            $('table').append("<tr></tr>");
        }
        for (var i = 0; i < columnas; i++) {
            $('tr').append("<td>#</td>");
        }
    });