codeup-web-exercises/jquery_exercises.html at main · coleausher/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
135
136
137
138
139
140
141
142
143
144
<!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 Exercises</title>
</head>
<body>

<!-- ----------------------------------------- jquery_exercises # 2 part 1(ID selectors) --------------------------------------- -->

<!--Create content in your HTML file using at least the following elements: h1, p, ul, li, div-->
<!--Add several attributes to your elements; you will need both id and class attributes.-->
<!--<h1 id="code" class="class1">Codeup</h1>-->

<!--<p id="hello" class="class2">Hello</p>-->

<!--<ul id="uList" class="class3"></ul>-->

<!--<li id="list" class="class4"></li>-->

<!--<div id="div" class="class5">YO</div>-->

<!-- ----------------------------------------- jquery_exercises # 2 part 2(class selectors) --------------------------------------- -->

<!--Remove your custom jQuery code from previous exercises.-->
<!--Update your code so that at least 3 different elements have the same class named codeup.-->

<!--<h1 id="code" class="codeup">Codeup</h1>-->

<!--<p id="hello" class="class2">Hello</p>-->

<!--<ul id="codeup" class="class3">-->
<!--    <li id="list" class="class4">item 1</li></ul>-->

<!--<div id="div" class="codeup">YO</div>-->

<!-- ----------------------------------------- jquery_exercises # 2 part 3(Element selectors) --------------------------------------- -->


<h1 id="code" class="codeup">Codeup</h1>

<p id="hello" class="class2">Hello</p>

<ul id="uList" class="class3">
    <li id="list" class="class4">item 1</li></ul>


<div id="div" class="class5">YO</div>


<!--JQUERY CDN-->
<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>

<script>
    // <!-- ----------------------------------------- jquery_exercises # 3 (Mouse events)--------------------------------------- -->
    let background = $("h1");
    background.click(function (){
        $(this).css("background", "yellow")
    });

    let para = $("p");
    para.dblclick(function (){
        $(para).css("font-size", "18px")
    })
 let list = $("li");
    list.mouseover(function(){
        $(list).css("color", "red")
    });
    list.mouseleave(function(){
        $(list).css("color", "black")
    })


    // <!-- ----------------------------------------- jquery_exercises # 2 part 1(ID selectors) --------------------------------------- -->
    // Use jQuery to select an element by the id. Alert the contents of the element.
    // let code = $("#code");
    // $(function() {
    //     alert(code.text());
    // });

    // Update the jQuery code to select and alert a different id.
    // let p = $("#hello");
    // $(function (){
    //     alert(p.text())
    // });

    // <!-- ----------------------------------------- jquery_exercises # 2 part 2(class selectors) --------------------------------------- -->
// Using jQuery, create a border around all elements with the class codeup that is 1 pixel wide and red.
//         let border = $(".codeup").css("border", "1px solid red");

    // <!-- ----------------------------------------- jquery_exercises # 2 part 3(Element selectors) --------------------------------------- -->

    // Using jQuery, set the font-size of all li elements to 20px.
// let fontSize = $("li").css("font-size", "20px");

    // Craft selectors that highlight all the h1, p, and li elements.
// let h1Select = $("h1").css("background", "yellow");
// let pSelect =  $("p").css("background", "yellow");
// let liSelect =  $("li").css("background", "yellow");

    // Create a jQuery statement to alert the contents of your h1 element(s).
// let alerting = $("h1")
//     $(function() {
//         alert(alerting.text());
//     });

    // <!-- ----------------------------------------- jquery_exercises # 2 part 4(Multiple selectors) --------------------------------------- -->
    // Combine your selectors that highlight all the h1, p, and li elements.
// let multiple = $("h1, p, li").css("background", "purple");


</script>


<!--<script>-->

<!-- ------------------------------------------ jquery_exercises # 1 ------------ -->
<!--// using JS Syntax-->
<!--// Waits for HTML page to load then fires off JS file-->
<!--// window.onload = function() {-->
<!--//     alert( 'the DOM has finished loading' );-->
<!--// }-->

<!--// using JQuery Syntax-->
<!--// Waits for HTML page to load then fires off JS file-->
<!--$(function (){-->
<!--alert("the DOM has finished loading")-->
<!--});-->

<!--</script>-->


</body>
</html>