JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<!-- Selektoren -->
 <div class="klasse">Div Container mit klasse als class</div>
 <div id="id">Div Container mit id als id</div>
 <div data="data">Div Container mit data selector</div>
 <hr>
 <form>
  <label for="name">label:</label>
  <input>
  <fieldset>
    <label for="newsletter">fieldset > label:</label>
    <input>
  </fieldset>
</form>
<input name="none">

<hr>

<div>div vor #prev</div>
<div>
  <span id="prev">span#prev</span>
  <div>div sibling 1</div>
  <div>div sibling 2 <div id="small">div niece 1</div></div>
  <span>span sibling 3 (not div)</span>
  <div>div sibling 4</div>
</div>

<hr>

<span>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul>
</span>
<span>
  <ul>
    <li>Sam</li>
  </ul>
</span>
<span>
  <ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul>
</span>

<hr>

<div class="el1">Element Klasse el1</div>
<div class="el1">Element Klasse el1</div>
<div class="el1">Element Klasse el1</div>
<div class="el2">Element Klasse el2</div>
<div class="el1">Element Klasse el1</div>
<br/>
<button id="check_el1" data-class="el1">Check el1</button>
<button id="check_el2" data-class="el2">Check el2</button>
<button id="check_el3" data-class="el3">Check el3</button>

<hr>


<label>CB1<input id="Checkbox1" type="checkbox" /></label>
<label>CB2<input id="Checkbox2" type="checkbox" checked /></label>

<hr>

  <input class="toggleall" type="checkbox" />
  <br>

  <input class="allCBs" type="checkbox" />
  <input class="allCBs" type="checkbox" />
  <input class="allCBs" type="checkbox" />
  <input class="allCBs" type="checkbox" />
  <input class="allCBs" type="checkbox" />
  <input class="allCBs" type="checkbox" />
  <input class="allCBs" type="checkbox" />
  <input class="allCBs" type="checkbox" />
  <input class="allCBs" type="checkbox" />
  
  <hr>
  
  <div class="addClass1"></div>

CSS

.bgLime{
  background-color: lime;
}

JavaScript

// Generell: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

// Selektoren
// Klasse
$(".klasse").on("click",function(){
	console.log($(this).text());
});

// ID
$("#id").on("click",function(){
	console.log($(this).text());
});

// Klasse und ID
$(".klasse,#id").on("click",function(){
	console.log($(this).text());
});

//$(document).delegate(".el","click",fucktion)

// Selektoren Element

/* Label + das direkt nachfolgende Input
*  .css() left die farbe auf Blau fest
*  .val() setzt das value der inputs auf "has label"
*/
var test = $( "label + input" );
console.log(test);
test.css( "color", "blue" ).val("has label");

/* span ID mit allen nachfolgenden div elementen
*  ~ div wendet die Funktionen auf alle gefundenen Elemente nach dem #prev Element an, recrusiv
*/
$( "#prev ~ div" ).css( "background-color", "red" );

// Child Selektoren
/* analog zu den CSS Selektoren funktionieren die auch in jQuery
*  .append() fügt text/html innerhalb! and Ende des selectierten Elementes ein
*/
$( "ul li:nth-child(2)" ).append( "<span> - zweites nachher</span>" );
$( "ul li:nth-child(2)" ).prepend( "<span>Vorher -</span>" );
// zu beachten, das einzufügende Element steht vorne, die einzufügende Stelle hinten!
$( "<li>Neues Element nach dem zweiten Element</li>"  ).appendTo("ul li:nth-child(2)");
$( "<li>Neues Element vor dem zweiten Element</li>"  ).prependTo("ul li:nth-child(2)");

// foreach
// .each durchläuft jedes gefunden Element
/*
$(".el1").each(function(){
	console.log(this);
  console.log($(this).attr("style"));
  //$(this).remove();
});
*/
$("body input").each(function(){
	//console.log(this);
  console.log($(this).val());
  //$(this).remove();
});


// existiert ein Element
/* [id^='check_'] selectiert alle Element deren id mit "check_" beginnt
*  [id$='check_'] selectiert alle Elemente deren id mit "check_" endet
*  mehr: http://www.w3schools.com/jquery/jquery_ref_selectors.asp
*/
$("button[id^='check_'],div[class^='check_']").on("click",function(){
	var...