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!

Ver√∂ffentlichung: 31.08.2018 von Bernhard |ūüĒĒ


Top-Artikel in diesem Bereich


Regex, √úberblick, Begriffe, Parameter, Grundlagen und Beispiele

Regex ist eine universelle Beschreibungssyntax um bestimmte Teile aus Zeichenketten zu pr√ľfen oder zu filtern. Als Beispiel k√∂nnten mit Regex sehr einfach alle <h1>-√úberschriften aus einem HTML-Quellcode herausgefiltert werden. Angefangen mit PHP, habe ich Regex sp√§ter auch in PowerShell und JavaScript eingesetzt. Zugegeben, anfangs habe ich Beispiele aus dem Internet f√ľr meine Einsatzzwecke angepasst und diese nur teilweise verstanden, zumal die Regex-Syntax doch...


ein JavaScript Beispiel

Mit Javascript HTML Elemente ansprechen und manipulieren, ein einfaches Beispiel.


JavaScript Text in die Zwischenablage

Mit folgender Funktion kann √ľber JavaScript ein Text in die Zwischenablage kopiert werden:


Fragen / Kommentare