Trifulcas – Página 169 – Equipo de diseño y programación web

jQuery dinámico

 <input type="button" class="btn btn-info" id="nuevo" value="+">
        <div id="contenido">
            <ul>
                <li>1</li>
            </ul>
        </div>

#contenido{
    background-color: lightblue;
    min-height: 300px;
    display:flex;
}
#contenido ul{
    background-color: lightpink;  
}

$(function () {
    var cont=2;
    enlazar();
    
    $('#nuevo').click(function () {
        $('#contenido').append("<ul><li>"+(cont++)+"</li></ul>");
        enlazar();
        dobleclick()
    });
    function enlazar() {
        $('li').off("click");
        $('li').click(function () {
            $(this).after("<li>"+(cont++)+"</li>");
            enlazar();
            dobleclick()
        });
    }
    function dobleclick(){
        $('li').dblclick(function () {
            $(this).remove();
        }); 
    }
})

Traversing


 <body>
        <div>
            <h1>hola</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>tres</li>
            </ul>
        </div>
        <div>
            <h1>adios</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>cuatro</li>
                <li>cinco</li>
                <li>seis</li>
            </ul>
        </div>
        <div>
            <h1>hola</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>tres</li>
            </ul>
        </div>
        <script>
            $(function () {
                $('li').click(function () {
                    //Cambio el color del elemento clicado a rojo
                    $(this).css("color", "red");
                    //Cambio el color de los hermanos a azul
                    $(this).siblings().css("color", "blue");
                    //Cambiar el color del hermano del padre h1
                    $(this).parent().siblings("h1").css("color", "green");
                    //Cambiar el color de los otros li's a gris
                    $(this).parents("div").siblings().find("li").css("color", "grey");
                    //Cambiar el color de los otros h1 a negro
                    $(this).parents("div").siblings().find("h1").css("color", "black");
                    
                });
            });
        </script>
    </body>

Tamaño y pelota

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

        <style>
            #contenedor{
                background-color: lightblue;
                width:500px;
                height:600px;
                padding:10px;
                border:10px solid blue;
                position:relative;
            }
            .elemento{
                background-color: red;
                border: solid 1px black;
                display:inline-block;
                box-sizing: border-box;
            }
            .pelota{
                background-color: red;
                border: solid 1px black;
                position:absolute;
                top:0;
                left:0;
                box-sizing: border-box;
                border-radius: 50%;
                width:50px;
                height:50px;
            }
        </style>
    </head>
    <body style="background-color:lightgrey">
        <input type="number" id="incremento" value="10">
        <input class="btn btn-info boton" type="button" id="cambiar"  value="Cambiar">
        <input class="btn btn-info boton" type="button" id="pelota"  value="Pelota">
        <div id="contenedor">
        </div>
        <script>
            $(function () {
                var incX=10;
                var incY=10;
                $('#cambiar').click(function () {
                    var incremento = Number($('#incremento').val());
                    $('#contenedor').width($('#contenedor').width() + incremento)
                            .height($('#contenedor').height() + incremento);

                });
                $("#contenedor").mouseover(function (e) {
                    console.log(e);
                });
                $('#pelota').click(function(){
                    $("#contenedor").append("<div class='pelota'></div>");
                    setTimeout(moverPelota,100);
                })
                function moverPelota(){
                    $(".pelota").css("top","+="+incY+"px");
                    $(".pelota").css("left","+="+incX+"px");
                    
                    var top=parseInt($(".pelota").css("top"));
                    var left=parseInt($(".pelota").css("left"));
                    var ancho=$('#contenedor').width()-$(".pelota").outerWidth()/2;
                    var alto=$('#contenedor').height()-$(".pelota").outerHeight()/2;
                    if (top>alto || top<0){
                        incY=-incY;
                    } 
                    if (left>ancho || left<0){
                        incX=-incX;
                    } 
                    setTimeout(moverPelota,100);
                }
            });

        </script>
    </body>
</html>

Div dinámicos

 <style>
            #contenedor{
                background-color: lightblue;
                width:500px;
                height:500px;
                padding:10px;
                border:10px solid blue;
            }
            .elemento{
                background-color: red;
                border: solid 1px black;
                display:inline-block;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body style="background-color:lightgrey">
         <input type="number" id="dimensiones" value="500">
        <input type="number" id="ancho" value="3">x<input type="number" id="alto" value="3">
        <input class="btn btn-info boton" type="button" id="crear"  value="Crear">
        <div id="contenedor">
        </div>
        <script>
            $(function () {
                $('#crear').click(function () {
                    var dimensiones = Number($('#dimensiones').val());
                    var ancho = Number($('#ancho').val());
                    var alto = Number($('#alto').val());
                    $('#contenedor').width(dimensiones).height(dimensiones);
                    $('#contenedor').empty();
                    for (var i = 0; i < ancho * alto; i++) {
                        $('#contenedor').append('<div class="elemento">&nbsp;</div>');
                    }

                    $('.elemento').outerWidth($('#contenedor').width() / ancho);
                    $('.elemento').outerHeight($('#contenedor').height() / alto);

                });
            });

        </script>

Cajas dinámicas

<h2>Cajas dinámicas</h2>
            <input type="number" class="form-control" id="cajas" min="1" max="10" value="2">
            <input class="btn btn-info boton" type="button" id="crear"  value="Crear">
            <div id="res">

            </div>
            <input class="btn btn-info boton" type="button" id="sumar"  value="Sumar">

$(function () {
    $('#crear').click(function () {
        var n = Number($('#cajas').val());
        $('#res').empty();
        for (var i = 0; i < n; i++) {
            $('#res').append('<input type="number" id="valor' + i + '" value="1" ><br/>');
        //    $('#res').append("<input type=\"number\" id=\"valor" + i + "\" value=\"1\" ><br/>");
        }
    });
    $('#sumar').click(function () {
        var n = Number($('#cajas').val());
        var suma = 0;
        for (var i = 0; i < n; i++) {
            suma += Number($('#valor' + i).val());
        }
        $('#res p').remove();
        $('#res').append("<p>La suma es: "+suma+"</p>");
    });
});

Calculadora jquery 2.0

 <div class="container">
            <h2>Calculadora <b>poco científica</b></h2>
            <input type="text" class="form-control" id="num1" value="4">
            <input class="btn btn-info boton" type="button" id="suma"  value="+">
            <input class="btn btn-info boton" type="button"  id="resta" value="-">
            <input class="btn btn-info boton" type="button" id="multi"  value="*">
            <input class="btn btn-info boton" type="button"  id="divi" value="/">
            <input class="btn btn-info" type="button"  id="reset" value="Borrar campos">
            <input type="text" class="form-control" id="num2" value="5">
            <h3>=</h3>
            <input type="text" class="form-control" id="res">
            
        </div>

$(function () {
    $(".boton").click(function () {
        var n1 = Number($('#num1').val());
        var n2 = Number($('#num2').val());
        var operacion = $(this).val();
        
        $('#res').val(eval(n1 + operacion + n2));
        $('#res').after("<p>"+n1 + " " + operacion + " " +
                n2 + " = " + $('#res').val()+"</p>");
    });
    $("#reset").click(function () {
        $(':text').val("");
    });
});

Calculadora

   <h2>Calculadora</h2>
            <input type="text" class="form-control" id="num1" value="4">
            <input class="btn btn-info" type="button" id="sumar" value="+">
            <input class="btn btn-info" type="button" id="restar" value="-">
            <input class="btn btn-info" type="button" id="multiplicar" value="*">
            <input class="btn btn-info" type="button" id="dividir" value="/">
            <input type="text" class="form-control" id="num2" value="5">
            <h3>=</h3>
            <input type="text" class="form-control" id="res">

$(function () {
    $("#sumar").click(function () {
        var n1 = Number($('#num1').val());
        var n2 = Number($('#num2').val());
        $('#res').val(n1 + n2);
    });
    $("#restar").click(function () {
        var n1 = Number($('#num1').val());
        var n2 = Number($('#num2').val());
        $('#res').val(n1 - n2);
    });
    $("#multiplicar").click(function () {
        var n1 = Number($('#num1').val());
        var n2 = Number($('#num2').val());
        $('#res').val(n1 * n2);
    });
    $("#dividir").click(function () {
        var n1 = Number($('#num1').val());
        var n2 = Number($('#num2').val());
        $('#res').val(n1 / n2);
    });
});

Dados con jquery

 <h1 >Tirada de dados</h1>

            <input type="button" id="botontirar" value="Tirar">
            <div id="resultado"></div>
            <img id="dado" src="img/dado1.png">

$(function () {

                $("#botontirar").click(function () {
                    var dado = tiradaDado();
                    $("#resultado").html("Ha salido el " + dado);
                    $("#dado").attr("src", "img/dado" + dado + ".png");
                });
                function tiradaDado() {
                    return Math.floor(Math.random() * 6) + 1;
                }
            });

Ejemplos animaciones

<div class="container">
            <h1>Animación ejemplos</h1>
            <div id="caja1">
            </div>
            <div id="caja2">
            </div>
            <div id="caja3">
            </div>
            
            <input type="button" id="anima1" value="Animación 1 (jquery)">
            <input type="button" id="anima3" value="Animación 3 (jquery+CSS3)">
        </div>
        <script src="js/codigo.js" type="text/javascript"></script>

#caja1,#caja2,#caja3{
    background-color: red;
    height:150px;
    width:150px;
    margin:10px;
}

@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
#caja2, .animacion {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

$(function () {
    $("#anima1").click(function () {

        $("#caja1").animate({
            left: '250px',
            opacity: '0.5',
            height: '200px',
            width: '200px'
        });
    });
    $('#anima3').click(function () {
        $("#caja3").addClass("animacion");
    })
});

jquery introducción

<div class="container">
            <h1>Página con jquery</h1>
            <p class="parrafo">Hola</p>
            <p class="parrafo">que</p>
            <p class="parrafo">tal</p>
            <div id="contenido">
                <h3>Contenido muy interesante</h3>
                <p>Bla bla blabla bláblala</p>
                <p>Bla bla blabla bláblala</p>
                <p>Bla bla blabla bláblala</p>
            </div>
            <input type="button" id="boton" value="Pinchamé">
        </div>
        <script src="js/codigo.js" type="text/javascript"></script>

$(function () {
    $("h1").after("<p>La página se ha cargado</p>");
    $(".parrafo").after("@@@");
    $('#boton').click(function () {
        $('#contenido').toggle();
    });
    $("#contenido p").on({
        mouseenter: function () {
            $(this).css("background-color", "lightgray");
        },
        mouseleave: function () {
            $(this).css("background-color", "lightblue");
        },
        click: function () {
            $(this).css("background-color", "yellow");
        }
    });

});