JavaScript 2 jQuery

From Coders.Bay Wiki
Jump to navigation Jump to search

jQuery[edit]

Einführung[edit]

  • jQuery => JavaScript Bibliothek, die viele praktische Funktionen anbietet
  • Biete einen einfachen Zugriff auf die einzelnen DOM-Elemente
  • Ansprechende Effekte mit einfachen Mitteln
  • jQuery = reines JavaScript
  • Vorgefertigte Funktionen reduzieren Aufwand für das Erstellen von Java-Script Programmen deutlich
  • Muss eingebunden werden (entweder Download oder CDN Link)


Einbinden von jQuery mit CDN[edit]

//CDN Link vor dem "eigenen" <script> Tag einbinden
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
//eigener Code hier
</script>

Selektoren: HTML-Elemente über jQuery ansteuern[edit]

Ein jQuery Selektor ist so aufgebaut:
In diesem Beispiel werden alle p Tags ausgewählt

Beispiel: HTML Elemente über jQuery ansteuern[edit]

<body>
<h1 id="headlineElement"></h1>
<p id="pElement"></p>


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
/* Die Index-Nummer wird benötigt da jQuery ein Array zurückgibt */
$('#headlineElement')[0].innerHTML = 'Überschrift';

/* bei .text wird kein Array zurück gegeben, daher kann man sich den
* Index hier sparen */
$('#pElement').text('Hier steht ein Absatz.');
</script>

</body>


Ausgabe von Inhalten über jQuery[edit]

<body>
<p></p>
<p></p>
<p></p>
<p></p>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $('p').text('Hier steht ein Absatz');
  $("p")[2].innerHTML = "Der dritte Absatz wird gezielt angesteuert.";
</script>
</body>

Beispiel: Darstellung der roten Absätze[edit]

<body>
  <p></p>
  <p class="red"></p>
  <p></p>
  <p class="red"></p>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    /* Alle p-Tags erhalten einen Text */
    $('p').text("Hier steht ein Absatz");
    /* Array erzeugen mit allen Elementen mit der Klasse rot */
    let red= $('.red');
    /* jedes Element im Array durch gehen und style ändern */
    for (let i = 0; i < red.length; i++) {
      red[i].style.color = "red";
    }
    /* p-Tags mit der Klasse rot erhalten einen anderen Inhalt */
    $('.red').text("Diese Absätze erscheinen in roter Farbe");
  </script>
</body>

Beispiel: Verschiedene Elemente präzise ansteuern[edit]

<body>
  <h1 class="red"></h1>
  <p></p>
  <p class="red"></p>
  <p></p>
  <p class="red"></p>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $('p').text("Hier steht ein Absatz");
    let red= $('.red');
    for (let i = 0; i < red.length; i++) {
      red[i].style.color = "red";
    }
    $('p.red').text("Diese Absätze erscheinen in roter Farbe.");
    $('h1.red').text("Headline in roter Farbe");
  </script>
</body>

Inhalte der Seite mit jQuery verändern und auswerten[edit]

  • Inhalte werden über drei verschiedene Methoden ausgegeben:
    • .text()
    • .html()
    • .val()
Beispiel 1:[edit]
<body>
  <h1></h1>
  <p></p>
  <input id="input">

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    /* .text() erlaubt nur reinen Text */
    $('h1').text('Überschrift');
    /* .html() erlaubt auch html-Tags */
    $('p').html("Absatz mit einem <strong>fett</strong> gedruckten Wort");
    /* .val() erlaubt das value-Attribute vorzugeben */
    $('#input').val("Eingabefeld");
  </script>
</body>
Beispiel 2:[edit]
<body>
  <p>
    Absatz mit einem <strong>fett</strong> gedruckten Wort
  </p>
  <input id="input" value="Eingabefeld Beispiel">
  <input id="result1" size=60>
  <input id="result2" size=60>
  <input id="result3" size=60>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $('#result1').val($('p').text());
    $('#result2').val($('p').html());
    $('#result3').val($('#input').val());
  </script>
</body>
Beispiel 3:[edit]
<body>
  <input id="input" value="Eingabefeld Beispiel">

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $('#input').attr('size', 100);
    alert('Länge: ' + $("#input").attr("size"));
  </script>
</body>
Beispiel 4:[edit]
<body>
  <p id="paragraph-1">Absatz</p>
  <p id="paragraph-2">Absatz</p>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $('#paragraph-1').append(" * Am Ende eingefügter Text *");
    $('#paragraph-2').prepend(" * Am Anfang eingefügter Text *");
  </script>
</body>

before() & after():[edit]

  • Mit den Methoden before() und after() kann Inhalte vor oder nach einem bestimmten Element eingefügt werden.
<body>
  <p id="paragraph">ursprünglicher Absatz</p>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $('p').after("<p>nach dem ursprünglich eingesetzten Inhalt ein neues Element</p>");
    $('#paragraph').before("<h1>Vor dem ursprünglichen Inhalt eingefügtes Element.</h1>");
  </script>
</body>

Events mit jQuery:[edit]

  • jQuery bietet für alle gängigen Events eine Methode an, die genau gleich lautet wie dessen Bezeichnung.
Beispiel 1:[edit]
<body>
  <p>Absatz</p>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    function mouseOutMessage() {
      alert("Mouseout");
    }
    function mouseDownMessage() {
      alert("Mousedown");
    }
    $('p').mouseout(mouseOutMessage);
    $('p').mousedown(mouseDownMessage);
  </script>
</body>
Beispiel 2:[edit]
  • Weitere wichtige Methoden: on()
  • Möglichkeit, mehrere Events mit einem einzigen Element zu verbinden
<body>
  <p>Absatz</p>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    function mouseOutMessage() {
      alert("Mouseout");
    }
    function mouseDownMessage() {
      alert("Mousedown");
    }
    $('p').on({mouseout: mouseOutMessage, mousedown: mouseDownMessage});
  </script>
</body>

Spezielle Effekte mit jQuery einfügen:[edit]

  • Einfache Beispiele Methoden:
    • show() -> zeigt ein Element an, das bislang versteckt war
    • hide() -> versteckt ein Element
    • toggle() -> verbindet die Funktionalität von show() und hide()
  • Alle drei Funktionen erlauben Übergabewerte für Geschwindigkeit
  • Ähnliche Effekte bei Methoden: fadeIn(), fadeOut(), fadeToggle(), fadeTo()
    • Mit langsamen Übergang („slow“): Größe bleibt konstant, Transparenz ändert sich
  • Weitere Effekte: slideDown(), slideUp(), slideToggle()
    • Elemente in vertikaler Richtung aus-/eingefahren
<body>
  <button id="btn1" onclick="hide()" type="button">Verstecken</button>
  <button id="btn2" onclick="show()" type="button">Zeigen</button>
  <button id="btn3" onclick="toggle()" type="button">Toggle</button>
  <div id="rectangle" style="background: #ee9900; height: 200px; width: 200px;"></div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    function hide() {
      $('#rectangle').hide();
    }
    function show() {
      $('#rectangle').show("fast");
    }
    function toggle() {
      $('#rectangle').toggle("slow");
    }
  </script>
</body>

Spezielle Effekte mit jQuery einfügen[edit]

<html>
  <head>
    <meta charset="UTF-8">
    <title>Übung</title>
    <style>
      #rectangle{
        background: #ee9900; 
        height: 200px; 
        width: 200px;
        font-size: 100px; 
        position: absolute;
        /* damit entsprechendes Element seine Position
        auf der Seite verändern kann, position
        absolute, relative oder fixed notwenig. */
      }
    </style>
  </head>
  <body>
    <button id="btn1" onclick="animation()" type="button">Animation</button>
    <div id="rectangle">Text</div>

    <script src="https://code.jquery.com/jquery3.5.1.min.js"></script>
    <script>
      function animation() {
        $('#rectangle').animate({
          left: '100px',
          top: '200px',
          width: '500px',
          heigth: '50px',
          fontSize: '20px'
        }, 3000); /* 3000 Millisekunden */
      }
    </script>
  </body>
</html>
Retrieved from "http://wiki.streampy.at/index.php?title=JavaScript_2_jQuery&oldid=1764"