Startseite Beiträge verschlagwortet mit "jQuery"

Schlagwort: jQuery

[AJAX] $.post()

Allgemein

$.post(URL, data, callback);

Beispiel

// https://www.w3schools.com/jquery/jquery_ajax_get_post.asp
$("btn1").click(function(){
    // url
    $.post("btn1_post.php",
    // data
    {
        data1: "some data1",
        data2: "some data2"
    },
    // callback
    function(data, status){
        console.log("Data: " + data);
        console.log("Status: " + status);
    });
});

[AJAX] $.get()

Allgemein

$.get(URL, callback);

Beispiel

// https://www.w3schools.com/jquery/jquery_ajax_get_post.asp
$("btn1").click(function(){
    // url
    $.get("btn1_get.php",
    // callback
    function(data, status){
        console.log("Data: " + data);
        console.log("Status: " + status);
    });
});

[jQuery] Eventhandler entfernen 

// https://api.jquery.com/click/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery Button-Klick</title>
</head>
<body>
  <button id="btn1">Klick mich!</button>
</body>
</html>

// Button mit id="btn1": Eventhandler registrieren
$("#btn1").on("click", function(evt){
  console.log(evt.target);
  $(this).fadeOut();
});

// Button mit id="btn1": Eventhandler deregistrieren
$("#btn1").off("click");

[jQuery] Eventhandler registrieren 

// https://www.w3schools.com/jquery/jquery_events.asp

// Beispiel ($(document).ready)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// mehrere Eventhandler für ein Objekt registrieren
$(document).ready(function(){
    $("#p1").on({
    	mouseenter : function(){
            $(this).html("Entered");
    	},
    	mouseleave : function(){
            $(this).html("Left");
    	}
		})
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>

[jQuery] Eventhandler registrieren – shortcut 

// https://www.w3schools.com/jquery/jquery_events.asp

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery Button-Klick</title>
</head>
<body>
  <button id="btn1">Klick mich!</button>
</body>
</html>

// Button mit id="btn1": Eventhandler mit Parameter "evt" registrieren
$("#btn1").click(function(evt){
  // target ausgeben
  console.log(evt.target);
  // Button ausblenden
  $(this).fadeOut();
});

[jQuery] Elemente verändern

Beispiel 1

$("div").html()                // HTML des divs
$("div").html("<b>Hallo!</b>") // Ersetzt HTML

$("div").css("color", "red");  // CSS setzen
$("div").addClass("class");    // Klasse hinzufügen
$("div").removeClass("class"); // Klasse entfernen
$("div").hasClass("class");    // Klasse prüfen

$("div").attr("name");         // Attribut "name" auslesen
$("div").attr("name", "neu");  // Attribut "name" setzen

$("input:text").val();         // Wert von Eingabefeld auslesen
$("input:text").val("Horst");  // Wert von Eingabefeld setzen

Beispiel 2

<!DOCTYPE html>
<html>
  <script type="text/javascript" src="jquery.js"></script>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery Example1</title>
</head>
<body>
  <div></div>
</body>
</html>

// Verketteter Aufruf von div-Element: setzen von Text und CSS
$("div").html("<b>Hallo!</b>").css("color", "red");