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:
Beispiele
CSS hinzufügen
|
HTML <p>test</p>
|
Script $('p').css( "background-color", "blue" ); |
Ausgabe <p style="background-color: blue;">test</p> <p style="background-color: blue;">test</p>
|
Class hinzufügen
|
HTML <p id="prevnext">test</p>
|
Script $('#prevnext').addClass('added'); |
Ausgabe <p id="prevnext" class="added">test</p> |
nach Elementen suchen (find)
|
HTML <p>test</p>
|
Script $('body').find('p').css( "background-color", "blue" ) |
Ausgabe <p style="background-color: blue;">test</p> <p style="background-color: blue;">test</p>
|
Tags entfernen - Loop (Schleife)
|
HTML <div class="test">hallo</div> <div class="test">hallo</div>
|
Script $('.test').each(function(){ |
Ausgabe hallo hallo
|
Tags tauschen - Loop (Schleife)
|
HTML <div class="test">hallo</div> <div class="test">hallo</div>
|
Script $('.test').each(function(){ |
Ausgabe <p>hallo</p> <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" ); }); $( window ).load(function() { console.log( "window loaded" ); }); </script>
