This commit is contained in:
Philippe Torrel
22
03_dom/unterricht/tag21/01_vorwort/vorwort.md
Normal file
22
03_dom/unterricht/tag21/01_vorwort/vorwort.md
Normal file
@@ -0,0 +1,22 @@
|
||||
| Bezeichnung | Abkürzung |
|
||||
| ----------- | ------------------------------------- |
|
||||
| DOM | Document Object Model |
|
||||
| API | Application Programming Interface |
|
||||
| ROCA | Resource-Oriented Client Architecture |
|
||||
| SEO | Search Engine Optimization |
|
||||
| SEA | Search Engine Advertising |
|
||||
| Vanilla JS | reines JavaScript ohne Framework |
|
||||
|
||||
## Links: Warum kein jQuery mehr?
|
||||
|
||||
- <http://youmightnotneedjquery.com>
|
||||
- <http://blog.garstasio.com/you-dont-need-jquery>
|
||||
- <https://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery>
|
||||
- <http://programmers.stackexchange.com/questions/166273/advantages-of-using-pure-javascript-over-jquery>
|
||||
|
||||
## Links: Warum jQuery yeah!
|
||||
|
||||
- <https://hackernoon.com/i-still-love-jquery-and-you-should-too-3114f33f249e>
|
||||
- <https://remysharp.com/2017/12/15/is-jquery-still-relevant>
|
||||
- <https://trends.builtwith.com/javascript/jQuery>
|
||||
- <https://learn.onemonth.com/why-you-should-learn-jquery-before-javascript/>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>document.querySelector() - Hello World</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>document.querySelector() - Hello <em>World</em></h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const h1El = document.querySelector('h1');
|
||||
|
||||
h1El.innerHTML = 'Hello <em>DOM</em>';
|
||||
|
||||
console.log(h1El); // => <h1>Hello <em>DOM</em></h1>
|
||||
|
||||
console.log(typeof h1El); //=> "object" vom Typ Node-Objekt, spezifisch ein HTMLHeadlineElement
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
70
03_dom/unterricht/tag21/03_css-selektoren/index.html
Normal file
70
03_dom/unterricht/tag21/03_css-selektoren/index.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Selektoren</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
|
||||
<style>
|
||||
/* universal Selektor (*) */
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* type selector (HTMLElement) */
|
||||
h1 {
|
||||
color: tomato;
|
||||
}
|
||||
|
||||
/* id selector (#) */
|
||||
#image-main {
|
||||
border: 10px solid #efefef;
|
||||
border-radius: 12px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
/* class selector (.) */
|
||||
.box {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background-color: tomato;
|
||||
border: 3px solid #222;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Menge von Selektoren (,) */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>CSS Selektoren</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis iusto ea id quos dolor accusantium ipsum at
|
||||
natus quidem commodi dolorem aspernatur a porro, vitae cumque. Soluta temporibus quis facilis?
|
||||
</p>
|
||||
<div class="box">Box</div>
|
||||
<img src="https://picsum.photos/seed/picsum/900/400" alt="" id="image-main" />
|
||||
<img src="https://dummyimage.com/900x400/000/f90.jpg" alt="image" />
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// document.querySelector(/* CSS SELEKTOR AUSSER PSEUDOELEMENTE */)
|
||||
console.log(document.querySelector('h1'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>document.querySelectorAll()</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>document.querySelectorAll()</h1>
|
||||
<hr />
|
||||
<h2 class="news">Quod eligendi saepe voluptates eveniet.</h2>
|
||||
<h2 class="news">Architecto reiciendis magnam modi inventore.</h2>
|
||||
<h2 class="news">Modi ipsum, velit rem ipsam.</h2>
|
||||
<h2 class="news">Provident, officia quisquam aliquam deserunt!</h2>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const h1El = document.querySelector('h1');
|
||||
|
||||
const h2Els = document.querySelectorAll('h2');
|
||||
|
||||
// const h2Array = [...document.querySelectorAll('h2')];
|
||||
const h2Array = Array.from(document.querySelectorAll('h2'));
|
||||
|
||||
console.log(h2Els); // => NodeList(4) [h2.news, h2.news, h2.news, h2.news]
|
||||
|
||||
console.log(h2Array); // => [h2.news, h2.news, h2.news, h2.news]
|
||||
|
||||
h2Array.forEach((el) => {
|
||||
el.style.backgroundColor = 'salmon';
|
||||
el.style.color = 'white';
|
||||
el.style.padding = '1rem';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Attribut Selektor</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
/* Allgemeine Formatierunge */
|
||||
|
||||
/* universal Selektor (*) */
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: tomato;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* attribut selector (ATTRIBUT_NAME="value") */
|
||||
a[href='https://www.gfn.de'] {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
/* attribut selector beginnend (ATTRIBUT_NAME^="value") */
|
||||
a[href^='https'] {
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
/* attribut selector abschließend (ATTRIBUT_NAME$="value") */
|
||||
img[src$='.jpg'],
|
||||
img[src$='.jpeg'] {
|
||||
border: 10px solid #555;
|
||||
}
|
||||
|
||||
/* attribut selector suchend (ATTRIBUT_NAME*="value") */
|
||||
a[href*='#'] {
|
||||
text-decoration: underline;
|
||||
font-weight: bolder;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>CSS Attribut Selektor</h1>
|
||||
<hr />
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link 0$} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="https://www.google.com">Google </a></li>
|
||||
<li><a href="https://netflix.com">Netflix</a></li>
|
||||
<li>
|
||||
<a href="#dropdown">Projects</a>
|
||||
<ul class="sublist">
|
||||
<li><a href="#">Project 01</a></li>
|
||||
<li><a href="#">Project 02</a></li>
|
||||
<li><a href="#">Project 03</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="http://www.gfn.de">GFN</a></li>
|
||||
<li><a href="#text">Text</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<h2>Bilder</h2>
|
||||
<p>Erstellte Bilder über Dummyimage.com</p>
|
||||
<ul class="list">
|
||||
<li><img src="https://dummyimage.com/400x200/c00/fff.jpg" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/f90/fff.png" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/fd0/fff.jpg" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/090/fff.png" alt="" /></li>
|
||||
</ul>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
|
||||
Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
|
||||
explicabo architecto numquam eaque in, qui possimus voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Kombinator Selektor</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
/* Allgemeine Formatierunge */
|
||||
|
||||
/* universal Selektor (*) */
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: tomato;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* descendant combinator (' ') */
|
||||
.menu-main ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* child combinator (>) - direkte Kinderelemente selektieren */
|
||||
.menu-main > ul > li > a {
|
||||
color: green;
|
||||
}
|
||||
|
||||
/* adjacent cominator (+) - direktes nachkommendes Geschwisterelement selektieren */
|
||||
h2 + p {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* general sibling combinator (~) - alle nachkommenden Geschwisterelemente selektieren */
|
||||
ul.list li:nth-child(1) ~ li img {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>CSS Kombinator Selektor</h1>
|
||||
<hr />
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link 0$} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="https://www.google.com">Google </a></li>
|
||||
<li><a href="https://netflix.com">Netflix</a></li>
|
||||
<li>
|
||||
<a href="#dropdown">Projects</a>
|
||||
<ul class="sublist">
|
||||
<li><a href="#">Project 01</a></li>
|
||||
<li><a href="#">Project 02</a></li>
|
||||
<li><a href="#">Project 03</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="http://www.gfn.de">GFN</a></li>
|
||||
<li><a href="#text">Text</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<h2>Bilder</h2>
|
||||
<p>Erstellte Bilder über Dummyimage.com</p>
|
||||
<ul class="list">
|
||||
<li><img src="https://dummyimage.com/400x200/c00/fff.jpg" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/f90/fff.png" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/fd0/fff.jpg" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/090/fff.png" alt="" /></li>
|
||||
</ul>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
|
||||
Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
|
||||
explicabo architecto numquam eaque in, qui possimus voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
200
03_dom/unterricht/tag21/07_css-pseudoklassen/index.html
Normal file
200
03_dom/unterricht/tag21/07_css-pseudoklassen/index.html
Normal file
@@ -0,0 +1,200 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Selektor - Pseudoklassen</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: salmon;
|
||||
}
|
||||
|
||||
/* normal Zustand */
|
||||
/*
|
||||
a:link {
|
||||
color: salmon;
|
||||
}
|
||||
*/
|
||||
/*
|
||||
a:visited {
|
||||
color: purple;
|
||||
} */
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
/* a:active {
|
||||
color: steelblue;
|
||||
} */
|
||||
|
||||
.menu-main {
|
||||
background-color: steelblue;
|
||||
}
|
||||
|
||||
.menu-main ul.list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-main ul.list li {
|
||||
border-right: 2px solid #555;
|
||||
}
|
||||
|
||||
/* :last-child | :first-child - letztes oder erstes Kindelement */
|
||||
.menu-main ul.list li:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.menu-main ul.list li a {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* .menu-main ul.list li a:link {} */
|
||||
/* .menu-main ul.list li a:visited {} */
|
||||
|
||||
.menu-main ul.list li a:hover,
|
||||
.menu-main ul.list li a:focus {
|
||||
color: #2a2a2a;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.menu-main ul.list li a:active {
|
||||
color: white;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
/* :nth-child(nte + offset) */
|
||||
/* table tbody tr:nth-child(2n + 3) td {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
} */
|
||||
|
||||
/* :nth-child(odd | even) */
|
||||
table tbody tr:nth-child(even) td {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* :empty */
|
||||
table tbody td:empty {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
table tbody td:empty::after {
|
||||
content: '(no content)';
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* :not() */
|
||||
/* table tbody tr:not(.selected) td {
|
||||
opacity: 0.5;
|
||||
} */
|
||||
|
||||
/* :checked - ausgewählte Checkboxen | Radio-Buttons */
|
||||
input:checked + label {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="#">Pseudoklassen</a></li>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/CSS/Reference/Selectors/Pseudo-elements">Pseudoelemente</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>CSS Selektor - Pseudoklassen</h1>
|
||||
<hr />
|
||||
<p>
|
||||
Eine
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a>
|
||||
in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand
|
||||
abzufragen. So steht beispielsweise <code>:hover</code> für Elemente, die gerade mit dem Mauszeiger berührt
|
||||
werden.
|
||||
</p>
|
||||
|
||||
<table class="table">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Beschreibung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="current">
|
||||
<td>:nth-child</td>
|
||||
<td>
|
||||
Die Pseudo-Klasse spricht das x-te Kind-Element an — im Beispiel das fünfte Element innerhalb von ul,
|
||||
falls es vom Tag-Typ li ist.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:first-child</td>
|
||||
<td>Die Pseudo-Klasse selektiert das erste Kind-Element, sofern es vom richtigen Tag-Typ ist..</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:last-child</td>
|
||||
<td>
|
||||
Äquivalent zu :first-child selektieren Sie hier das letzte Kind-Element, sofern es vom richtigen Tag-Typ
|
||||
ist.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:empty</td>
|
||||
<td>
|
||||
Mit dieser Pseudo-Klasse sprechen Sie nur Elemente an, die ohne Kind-Elemente sind. Inhalt in Form von
|
||||
Text wird dabei ebenfalls als Kind-Element betrachtet.
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="selected">
|
||||
<td>:not(selector)</td>
|
||||
<td>
|
||||
Negation. Wählt Elemente aus, wenn sie nicht dem in Klammern angegebenen Selektor entsprechen. Im
|
||||
Beispiel würde alles außer span-Elementen ausgewählt.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:only-child</td>
|
||||
<td>
|
||||
Diese Klasse selektiert ein Element nur, wenn es sich um das einzige Kind eines angegebenen
|
||||
Eltern-Elementes handelt.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:checked</td>
|
||||
<td>Diese Klasse selektiert eine Checkbox oder ein Radio-button nur, wenn es ausgewählt wurde.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="cb-todo" class="form-check-input" />
|
||||
<label for="cb-todo">Todo: Checkbox verstehen </label>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>document.querySelector() vs. element.querySelector()</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>document.querySelector() vs. element.querySelector()</h1>
|
||||
<hr />
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
</ul>
|
||||
<ul id="second_list">
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// document.querySelectorAll()
|
||||
const liEls = Array.from(document.querySelectorAll('ul li'));
|
||||
|
||||
console.log(liEls); // => (4) [li, li, li, li]
|
||||
|
||||
const secondListEl = document.querySelector('#second_list');
|
||||
|
||||
// element.querySelectorAll()
|
||||
console.log(Array.from(secondListEl.querySelectorAll('li'))); // => [<li>3</li>,<li>4</li>]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
45
03_dom/unterricht/tag21/09_$-$$-helper/index.html
Normal file
45
03_dom/unterricht/tag21/09_$-$$-helper/index.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Helferfunktion $ und $$</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Helferfunktion $ und $$</h1>
|
||||
<hr />
|
||||
<h2>Lorem ipsum dolor sit amet.</h2>
|
||||
<h2 class="news">Quod eligendi saepe voluptates eveniet.</h2>
|
||||
<h2 class="news">Architecto reiciendis magnam modi inventore.</h2>
|
||||
<h2 class="news">Modi ipsum, velit rem ipsam.</h2>
|
||||
<h2 class="news">Provident, officia quisquam aliquam deserunt!</h2>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// IIFE
|
||||
((jq) => {
|
||||
// Helferfunktion $ und $$
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
|
||||
$('h1').style.color = 'orange';
|
||||
|
||||
$$('.news').forEach((el) => {
|
||||
el.style.backgroundColor = 'salmon';
|
||||
});
|
||||
|
||||
// $ von jQuery
|
||||
jq('.news').css({
|
||||
backgroundColor: 'yellow',
|
||||
padding: '1rem',
|
||||
});
|
||||
})($); // $ von jQuery
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user