(0)
Artikel
bewerten
(100% positiv)
(1)

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>
letzte Änderung dieses Artikels: 31.08.2018 09:54




Kommentare