redwood_web_exercises/jquery_exercises.html at master · CodeupClassroom/redwood_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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1 id="title">Main title</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores, beatae blanditiis consectetur consequuntur corporis culpa, distinctio dolor, doloribus ea eligendi eum exercitationem harum impedit labore minima molestiae nesciunt nobis odio omnis optio placeat porro quaerat quam quasi quidem quisquam rem repellendus sapiente similique tempore tenetur totam vel vitae voluptate!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci doloribus facere magnam minima! Aspernatur commodi, consectetur consequatur debitis ea est exercitationem, in mollitia odio officiis omnis quo saepe voluptas, voluptatem.</p>

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias debitis deleniti dicta
        ducimus, error esse facere iure libero molestiae nisi quas quibusdam rem reprehenderit
        sapiente sequi sunt ullam vitae voluptatem.
    </li>
    <li>Ad atque autem commodi, ducimus excepturi laborum porro tenetur! Ad adipisci amet blanditiis
        doloremque expedita fuga fugit harum id maxime molestiae non nulla odio provident, quasi
        quidem soluta sunt, voluptatibus?
    </li>
    <li>Adipisci deserunt dolore dolorem, iste obcaecati rem sit vel? Accusamus, accusantium
        adipisci, aperiam deleniti doloribus eius incidunt inventore itaque necessitatibus possimus
        provident ut! Deserunt ea est magni officiis unde voluptates?
    </li>
    <li>Eligendi fugit nostrum sit ut voluptate! Assumenda, deserunt illo minus mollitia nemo odit
        omnis quibusdam, quo repellat, repellendus similique temporibus tenetur voluptatibus?
        Consequatur dignissimos laudantium nulla odit similique veritatis voluptatem!
    </li>
    <li>Earum nulla qui ratione! Accusamus aliquid aspernatur aut consequatur consequuntur eius
        esse, excepturi hic id impedit ipsum itaque iusto maiores modi nisi obcaecati placeat
        possimus quis saepe sed tenetur voluptate?
    </li>
    <li>Adipisci beatae culpa cumque debitis error esse exercitationem facilis harum illum, in ipsam
        iusto, labore molestiae odit officia officiis porro quam quasi repudiandae sunt tempora
        tempore unde veniam voluptates voluptatum.
    </li>
    <li>Amet asperiores at deserunt eveniet incidunt inventore iste itaque laudantium minus nemo
        nesciunt officia omnis optio possimus quae, quam quos repellat repellendus saepe sequi
        tempore vel voluptates? Facere, minima minus?
    </li>
    <li id="last-item">Aliquam at dolorum eligendi ex laboriosam natus odit ratione, sunt totam ut. At cupiditate
        ducimus enim excepturi labore natus, neque nisi quas tempora voluptas! A at culpa excepturi
        quidem similique.
    </li>
</ul>

<h1>Another title</h1>


<!-- CDN jQuery library-->
<!--<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>-->

<!-- Local jQuery library-->
<script src="js/jquery-2.2.4.min.js"></script>
<script>
    (function () {

       $("#title").click(function(){
            $(this).css("background-color", "blue");
       });

       var ps = $("p");

       ps.dblclick(function(){
            $(this).css("font-size", "18px");
       });

       var listOfLi = $("li");

       listOfLi.hover(function(){ $(this).css("color", "red"); }, function(){ $(this).css("color", "black"); });


    })();
</script>
</body>
</html>