codeup-web-exercises/jquery_exercises.html at main · samuelmartinez2/codeup-web-exercises · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 class="tittle">JQuery Testing Page</h1>

<div class="divtab" id="divid">
    <p class="parone" id="paroneid">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A asperiores consequatur cupiditate doloribus eveniet hic id incidunt iste magni modi, mollitia, nobis optio perspiciatis possimus quaerat reiciendis reprehenderit totam ut.</p>
    <p class="partwo" id="partwoid">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis corporis dolor dolores facere id illum impedit ipsa labore molestias, mollitia nisi non nostrum omnis porro! Fugit itaque officiis suscipit.</p>
    <ul class="ulist" id="ulistid">this is a unoreded list</ul>

        <li class="codeup" id="lioneid">list one</li>
        <li class="codeup" id="litwoid">list two</li>
        <li class="" id="lithreeid">last three</li>

</div>


<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
    $(function () {
        alert("the DOM has finished loading");

        // let divTab = $('.divtab').html();
        // alert("this is the div tag")
    });


    $(function() {
        // let divTab = $('#divid').html();
        // alert(divTab);
        //
        // let paraid = $('#paroneid').html();
        // alert(paraid);
        //
        // let litest = $('#lioneid').html();
        // alert(litest);

        // let liClass = $('.codeup');
        // liClass.css('border','1px solid red');
        //

        //
        // $("li").css('font-size', '20px')
        // $('h1').css('background-color', 'blue')
        // $('p').css('background-color', 'orange')
        // $('li').css('background-color', 'pink')
        // // $('h1,p,li').css('background-color', 'yellow')
        //
        // let h1Tag= $('h1').html();
        // alert(h1Tag)
        //
        // $('h1').each(function (index. el) {
        //     alert($(this).htnl());
        // }

        $('h1').click(
            function() {
                $(this).css("background-color",'red');
            })

        $('p').dblclick(
            function() {
                $(this).css({"font-size":"18px",'background-color':'yellow'});
            }
        )

        $('li').hover(
            function() {
                $(this).css({"font-size":"45px",'background-color':'yellow','color':'red'});
            },
            function() {
                $(this).css({"font-size":"15px",'background-color':'transparent','color':'black'});
            }
        )


    })


</script>

</html>