codeup-web-exercises/jquery_exercises.html at master · EleanorEllingson/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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery</title>
</head>
<body>
<h1 id="header">JQuery Exercise</h1>

<p class="main-paragraph">We are learning JQuery</p>


<ul>
    <div id="selector-list">
        <li>ID Selector</li>
        <li>Class SelectorElement Selector</li>
        <li>Multiple Selector</li>
        <li>All Selector</li>
    </div>

</ul>

<p class="codeup">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores cumque dicta facilis fuga fugit hic illo iusto laudantium, maiores minus modi natus nisi possimus quod recusandae temporibus veritatis voluptatibus.
</p>

<p class="codeup">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam assumenda culpa, cum cumque distinctio eum expedita minus mollitia porro quae, quisquam ratione reiciendis soluta suscipit tenetur vel, veritatis voluptate?
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aperiam autem consequuntur cupiditate eius error facilis iusto laboriosam, laudantium maiores minus possimus praesentium, quisquam sunt tempore temporibus vero vitae?
</p>

<p id="codeup">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aperiam autem consequuntur cupiditate eius error facilis iusto laboriosam, laudantium maiores minus possimus praesentium, quisquam sunt tempore temporibus vero vitae?
</p>
<script type="text/javascript" src="js/jquery-2.2.4.js"></script>
<!--<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>-->
<script>

    $(document).ready(function() {
        "use strict";
    //
    //         alert( "The DOM has finished loading!");
    // var paragraph = $('.main-paragraph')
    //     paragraph.html('I just changed this paragraph')
    //
    // var list = $('#header').html();
    //     alert(list);
    //
    // $('.codeup').css({
    //     "border": "solid red 1px"
    // })

    // $('li').css({
    //     "font-size": "20px"
    // })
    //
    // $('h1, p, li').css("background", "yellow")
    //
    //
    // var h1alert = $('h1').html();
    //     alert(h1alert)

    $('h1').click(function (){
        $(this).css('background', 'red')
    })

    $('p').dblclick(function (e){
        $(e.target).css('font-size', '18px')
    })

    //    can change back with inherit or revert
    $('li').hover(function (){
        $(this).css('color', 'red')
    }, function() {
        $(this).css('color', 'revert')
    })


    });
</script>

</body>
</html>