jQuery 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'>");