fenrir-codeup-web-exercises/jquery-essential-methods.html at main · CodeupClassroom/fenrir-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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>~essential methods~</title>

    <style>
        .highlight {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>

<h1>Happy Thor's Day</h1>

Other cool days:
<ul>
    <li id="saturnsDay">Saturn's Day</li>
    <li>Tyr's Day</li>
    <li>Odin's Day</li>
    <li>Moon's Day</li>
</ul>

Top three days:
<ol>
    <li>Today</li>
    <li>Tomorrow</li>
    <li>My Birthday</li>
</ol>

<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span>Accusantium aliquam</span> amet autem deleniti dolorem exercitationem, <span>facilis impedit ipsa iste iusto minima nobis placeat recusandae reprehenderit similique sint sit, soluta suscipit.</span></p>

<button id="highlight-btn">Click here to add ugly green to the list items</button>


<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<script>
// .html() — Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

console.log($("p").html());

$("ol").html(`
<li class="highlight">Halloween</li>
<li class="highlight">Christmas Day</li>
<li class="highlight">Boxing Day</li>
`);

//.text() - Get the inner text contents of the first element in the set of matched elements or set the HTML contents of every matched element.
//

console.log($("p").text());

$("ol").text(`
<li>Dia de Los muertos</li>
<li>Dia de Los muertos</li>
<li>Dia de Los muertos</li>
`);

// .css() — Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

console.log($("p").css("color"));
console.log($("p").css("border"));
console.log($("p").css("width"));

//Two arguments - prop + setting ("color", "red")

$("li")
    .css("color", "rebeccapurple")
    .css("border", "1px solid red")
    .css("padding", ".2em")
    .css("margo", ".2em")

let styleObject = {
    'color':'lightblue',
    'background-color':'gray',
    'padding':'1em'
}

$("h1").css(styleObject)

//
// .addClass() — Adds the specified class(es) to each of the set of matched elements.

$("ul").addClass("highlight");
//
// .removeClass() — Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

$("ul").removeClass("highlight");
//
// .toggleClass() — Add or remove one or more classes from each element in the set of matched elements, depending on either the class’ presence or the value of the switch argument.

$("#highlight-btn").on("click", (e) => {
    $("li").toggleClass("highlight");
})

//pt2:

// .each() — Iterate over a jQuery object, executing a function for each matched element.

$("li").each(function(index){
    if(index % 2 !== 0){
        $(this).html(`
        haha - hacked u
        `)
    }
})

//     .first() — Reduce the set of matched elements to the first in the set.

$("li").first().css("font-size", "60px")

//     .last() — Reduce the set of matched elements to the final one in the set.

$("li").last().css("background-color", "cornflowerblue");


//     .parent() — Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
$("li").parent().css("background-color", "yellow");

//     .children() — Get the children of each element in the set of matched elements, optionally filtered by a selector.

console.log($("body").children().on("click", function(e){
    console.log(e);
}));

//     .next() — Get the immediately following sibling in the set of matched elements.


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