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 kommt der HTML Quellcode der nachfolgenden Beispiele rein-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script>
 // hier der Script Quellcode der folgenden Beispiele
</script>
</body>
</html>
 
Ausgabe: ist der generierte Quellcode im Browser 

Beispiele

CSS hinzufügen

HTML

<p>test</p>
<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>
<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(){
$(this).replaceWith($(this).html())
})

Ausgabe

hallo

hallo

 

 

Tags tauschen - Loop (Schleife)

HTML

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

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

 

Script

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

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&amp;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>
positive Bewertung({{pro_count}})
Beitrag bewerten:
{{percentage}} % positiv
negative Bewertung({{con_count}})

DANKE für deine Bewertung!



Fragen / Kommentare


Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf unsere Website zu analysieren. Außerdem geben wir Informationen zu Ihrer Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Details anzeigen.