<div style="height:100px;width:100px;background:red;margin:8px" id="block"></div>
<button onclick="sh(event)">hide</button>
<script>
  function sh(e) {
    if ($(e.target).text() == "hide") {
      $("#block").hide();
      $(e.target).text("show");
    } else {
      $("#block").show();
      $(e.target).text("hide");
    }
  };
</script>

<div id="elemAttr" yolo="nop">Element with attribute</div>
<button onclick="addAttribut()">Add attribute</button>
<button onclick="removeAttribut()">Remove attribute</button>

<script>
  function addAttribut() {
    $("#elemAttr").attr("yolo", "yep")
  };
  function removeAttribut() {
    $("#elemAttr").removeAttr("yolo");
  };
</script>

<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="targetAddBefore" style="background-color: yellow">.prepend()</div>
  <button id ="addBefore">add "text" before</button>
</div>
<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="targetMoveBefore" style="background-color: yellow">.prependTo()</div>
  <div id="elementMoveBefore">text</div>
  <button id ="moveBefore">move "text" before</button>
</div>
<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="targetAddAfter" style="background-color: yellow">.append()</div>
  <button id ="addAfter">add "text" after</button>
</div>
<div style="height: 100px;width: 140px;display: inline-block;">
  <div id="elementMoveAfter">text</div>
  <div id="targetMoveAfter" style="background-color: yellow">.appendTo()</div>
  <button id ="moveAfter">move "text" after</button>
</div>
<script>
  $("#addBefore").click(function() {
    $("#targetAddBefore").prepend("<div>text</div>");
  });
  $("#moveBefore").click(function(){
    $("#elementMoveBefore").prependTo("#targetMoveBefore");
  });
  $("#addAfter").click(function(){
    $("#targetAddAfter").append("<div>text</div>");
  });
  $("#moveAfter").click(function(){
    $("#elementMoveAfter").appendTo("#targetMoveAfter");
  });
</script>

<div style="display: inline-block;">
  <div style="background-color: red" id="rm">Element will be remove</div>
  <button onclick="remove()">Remove</button>
</div>
<div style="display: inline-block;">
  <figure id="empty">
    <figcaption>Elements will be remove :</figcaption>
    <div style="background-color: green">Element one</div>
    <div style="background-color: purple">Element two</div>
  </figure>
  <button onclick="removeAll()">Empty content</button>
</div>
<div style="display: inline-block;">
  <dew>Text one</dew><br>
  <dew>Text two</dew><br>
  <button onclick="warp()">warp</button>
  <button onclick="unwrap()">unwrap</button>
</div>
<script>
  function remove() {
    $("#rm").remove();
  }
  function removeAll() {
    $("#empty").empty();
  }
  function warp() {
    $("dew").wrap("<div style='border: 2px solid blue'></div>");
  }
  function unwrap() {
    $("dew").unwrap();
  }
</script>

<style>
  .cube {
    height: 100px;
    width: 100px;
    display: inline-block;
  }

  .sel {
    border: solid 2px blue;
  }
</style>

<div id="cubes">
  <div class="cube" style="background: red;"></div>
  <div class="cube" style="background: yellow;"></div>
  <div class="cube" style="background: red;"></div>
  <div class="cube sel" style="background: green;"></div>
  <div class="cube" style="background: green;"></div>
  <div class="cube" style="background: red;"></div>
  <div class="cube" style="background: yellow;"></div>
</div>
<button onclick="next()">next</button>
<button onclick="nextAll()">nextAll</button>
<button onclick="prev()">prev</button>
<button onclick="prevAll()">prevAll</button>
<button onclick="first()">first</button>
<button onclick="last()">last</button>
<button onclick="parent()">parent</button>
<button onclick="childrenF()">children</button>
<button onclick="filterRed()">filter red</button>
<button onclick="filterGreen()">filter green</button>
<button onclick="filterYellow()">filter yellow</button>
<button onclick="notRed()">not red</button>
<button onclick="notGreen()">not green</button>
<button onclick="notYellow()">not yellow</button>

<script>
  function next() {
    $(".sel").removeClass("sel").next().addClass("sel");
  }

  function nextAll() {
    $(".sel").removeClass("sel").nextAll().addClass("sel");
  }

  function prev() {
    $(".sel").removeClass("sel").prev().addClass("sel");
  }

  function prevAll() {
    $(".sel").removeClass("sel").prevAll().addClass("sel");
  }

  function first() {
    $(".sel").removeClass("sel");
    $("#cubes").children().first().addClass("sel");
  }

  function last() {
    $(".sel").removeClass("sel");
    $("#cubes").children().last().addClass("sel");
  }

  function parent() {
    $(".sel").removeClass("sel").parent().addClass("sel");
  }

  function childrenF() {
    $(".sel").removeClass("sel").children().addClass("sel");
  }

  function filterRed() {
    $(".sel").removeClass("sel");
    $("#cubes").children().filter(function (index) {
      return this.style["background-color"] == "red";
    }).addClass("sel");
  }

  function filterGreen() {
    $(".sel").removeClass("sel");
    $("#cubes").children().filter(function (index) {
      return this.style["background-color"] == "green";
    }).addClass("sel");
  }

  function filterYellow() {
    $(".sel").removeClass("sel");
    $("#cubes").children().filter(function (index) {
      return this.style["background-color"] == "yellow";
    }).addClass("sel");
  }

  function notRed() {
    $(".sel").removeClass("sel");
    $("#cubes").children().not(function (index) {
      return this.style["background-color"] == "red";
    }).addClass("sel");
  }

  function notGreen() {
    $(".sel").removeClass("sel");
    $("#cubes").children().not(function (index) {
      return this.style["background-color"] == "green";
    }).addClass("sel");
  }

  function notYellow() {
    $(".sel").removeClass("sel");
    $("#cubes").children().not(function (index) {
      return this.style["background-color"] == "yellow";
    }).addClass("sel");
  }
</script>