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!



Kommentare


Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Mehr Details