jQuery Beispiele

➦ JavaScript ➨ JavaScript regex - Einführung und Beispiele

Hier ein paar Beispiele zu jQuery

Einbinden in HTML

Diese Beispiele setzen das Einbinden von jQuery voraus, wie in jQuery start beschrieben

Der Quellcode sollte also ca. so aussehen:

<!doctype html>

<html><head><meta charset="utf-8" /><title>jQueryTest</title></head>

<body>

// hier der Script Quellcode der folgenden Beispiele

</script>

</body>

</html>

Ausgabe: ist der generierte Quellcode im Browser

Beispiele

CSS hinzufügen

HTML

Script

$('p').css( "background-color", "blue" );

Ausgabe

Class hinzufügen

HTML

Script

$('#prevnext').addClass('added');

Ausgabe

nach Elementen suchen (find)

HTML

Script

$('body').find('p').css( "background-color", "blue" )

Ausgabe

Tags entfernen - Loop (Schleife)

HTML

<div class="test">hallo</div>

Script

$('.test').each(function(){
$(this).replaceWith($(this).html())
})

Ausgabe

hallo

Tags tauschen - Loop (Schleife)

HTML

<div class="test">hallo</div>

Script

$('.test').each(function(){
$(this).replaceWith('<p>' + $(this).html() + '</p>')
})

Ausgabe

<p>hallo</p>

nur kurz notiert

CSS manipulieren

$($('.bs-docs-section').find('ul').get().reverse()).each(function(){
$(this).replaceWith($($(this).html()))
})

$($('.bs-docs-section').find('.newest1').get().reverse()).each(function(){
$(this).replaceWith($('<div class="col-md-4">'+$(this).html()+'</div>'))
})
$($('.panel').find('.ndate').get().reverse()).each(function(){
$(this).replaceWith($('<div class="panel-heading">'+$(this).html()+'</div>'))
})
$($('.panel').find('.ndesc').get().reverse()).each(function(){
$(this).replaceWith($('<div class="panel-body">'+$(this).html()+'</div>'))
})

HTML in den Header einfügen:

$("head").append("<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>");

div in ein anderes div verschieben:

$('#footer-info li').appendTo("#firstHeading");

Text ersetzen

$('#footer-info li').html($('#footer-info li').text().replace('Diese Seite wurde zuletzt am','Version: <br>'));

document ready: wenn dom fertig

<script>

$( document ).ready(function() {

console.log( "document loaded" );

});

// oder wenn alle Objekte geladen

$( window ).load(function() {

console.log( "window loaded" );

});

</script>

^{({{pro_count}})}

Beitrag bewerten:
{{percentage}} % positiv

^{({{con_count}})}

DANKE für deine Bewertung!

Veröffentlichung: 31.08.2018 von Bernhard |🔔

➨ jQuery start | ➦ JavaScript | JavaScript regex - Einführung und Beispiele ➨

Top-Artikel in diesem Bereich

Regex, Überblick, Begriffe, Parameter, Grundlagen und Beispiele

Regex ist eine universelle Beschreibungssyntax um bestimmte Teile aus Zeichenketten zu prüfen oder zu filtern. Als Beispiel könnten mit Regex sehr einfach alle <h1>-Überschriften aus einem HTML-Quellcode herausgefiltert werden. Angefangen mit PHP, habe ich Regex später auch in PowerShell und JavaScript eingesetzt. Zugegeben, anfangs habe ich Beispiele aus dem Internet für meine Einsatzzwecke angepasst und diese nur teilweise verstanden, zumal die Regex-Syntax doch...

ein JavaScript Beispiel