karlosos/zad.html

## zad.html
<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <title>おかしい</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <script src="http://code.jquery.com/jquery-latest.min.js"></script> -->
        <!-- zadanie 1 -->
        <style>
            #div1 {
                width: 100px;
                height: 50px;
                background-color: red;
            }
            #div2 {
                width: 100px;
                height: 50px;
                background-color: blue;
            }
            #div3 {
                width: 100px;
                height: 50px;
                background-color: blueviolet;
            }

            #div4 {
                width: 100px;
                height: 50px;
                background-color: green;
            }

            .blue {
                background-color: blue;
            }

            #div5 {
                width: 100px;
                height: 50px;
                border: 1px black solid;
            }
        </style>
        <script>
            $(document).ready(function() {
                alert("Witajcie");
                alert("w naszej");
                alert("bajce");
            });


            $(document).ready(function(){
                $("#zadanie2").children().click(function() {
                    alert("kliknieto element <"+ $(this).prop("tagName") + ">");
                });
            });

            $(document).ready(function(){
                $("#div1").click(function() {
                    alert("kliknieto element #"+ $(this).attr("id"));
                });
                $("#div2").click(function() {
                    alert("kliknieto element #"+ $(this).attr("id"));
                });
                $("#div3").click(function() {
                    alert("kliknieto element #"+ $(this).attr("id"));
                });


            });
            $(document).ready(function(){
                $(".blok").click(function() {
                    alert("kliknieto blok");
                });

       });

        $(document).ready(function(){
                $("#div4").click(function() {
                    $(this).css('background-color', 'red');
                });
            });

            $(document).ready(function(){
                $("#p1").click(function() {
                    $(this).addClass("blue");
                });
            });

            $(document).ready(function(){
                $("#div5").mouseenter(function() {
                    $(this).css("background-color", "red");
                });
                $("#div5").mouseleave(function() {
                    $(this).css("background-color", "rgba(0,0,0,0)");
                });
            });

        </script>
    </head>
    <body>
        <div id="zadanie2">
            <p>&lt;p&gt;</p>
            <div>&lt;div&gt;</div>
            <span>&lt;span&gt;</span>
        </div>

        <div id="div1" class="blok">1</div>
        <div id="div2" class="blok">2</div>
        <div id="div3" class="blok">3</div>

        <div id="div4">jesli mnie klikniesz stane sie czerwony</div>

        <p id="p1">nie mam zadnej klasy xd</p>

        <div id="div5"></div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<title>おかしい</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- <script src="http://code.jquery.com/jquery-latest.min.js"></script> -->
	<!-- zadanie 1 -->
	<style>
	#div1 {
	width: 100px;
	height: 50px;
	background-color: red;
	}
	#div2 {
	width: 100px;
	height: 50px;
	background-color: blue;
	}
	#div3 {
	width: 100px;
	height: 50px;
	background-color: blueviolet;
	}

	#div4 {
	width: 100px;
	height: 50px;
	background-color: green;
	}

	.blue {
	background-color: blue;
	}

	#div5 {
	width: 100px;
	height: 50px;
	border: 1px black solid;
	}
	</style>
	<script>
	$(document).ready(function() {
	alert("Witajcie");
	alert("w naszej");
	alert("bajce");
	});


	$(document).ready(function(){
	$("#zadanie2").children().click(function() {
	alert("kliknieto element <"+ $(this).prop("tagName") + ">");
	});
	});

	$(document).ready(function(){
	$("#div1").click(function() {
	alert("kliknieto element #"+ $(this).attr("id"));
	});
	$("#div2").click(function() {
	alert("kliknieto element #"+ $(this).attr("id"));
	});
	$("#div3").click(function() {
	alert("kliknieto element #"+ $(this).attr("id"));
	});


	});
	$(document).ready(function(){
	$(".blok").click(function() {
	alert("kliknieto blok");
	});

	});

	$(document).ready(function(){
	$("#div4").click(function() {
	$(this).css('background-color', 'red');
	});
	});

	$(document).ready(function(){
	$("#p1").click(function() {
	$(this).addClass("blue");
	});
	});

	$(document).ready(function(){
	$("#div5").mouseenter(function() {
	$(this).css("background-color", "red");
	});
	$("#div5").mouseleave(function() {
	$(this).css("background-color", "rgba(0,0,0,0)");
	});
	});

	</script>
	</head>
	<body>
	<div id="zadanie2">
	<p><p></p>
	<div><div></div>
	<span><span></span>
	</div>

	<div id="div1" class="blok">1</div>
	<div id="div2" class="blok">2</div>
	<div id="div3" class="blok">3</div>

	<div id="div4">jesli mnie klikniesz stane sie czerwony</div>

	<p id="p1">nie mam zadnej klasy xd</p>

	<div id="div5"></div>
	</body>
	</html>