Editing JQuery & DOM manipulations (section)

==''When'' are elements manipulated? - jQuery manipulation==
http://api.jquery.com/category/events/

Actions like the page loading, moving a mouse, typing a key, or resizing the browser window are events that take place in the web page.
For creating a interactive web-page, your scripts has to  write to respond to events.

In the previous examples we already used 1 listener: <code>$(document).ready()</code> that is triggered with the whole page is loaded.

(lets use adventure time example:)

* <code>.click()</code>
** is triggered when the user clicks on the element:
<source lang="javascript">
$('img[name="lpb"]').click( 
    function(){ $(this).css('width', '250'); }
)
</source>

* <code>.mouseover()</code>
<source lang="javascript">
$('img[name="lpb"]').mouseover( 
    function(){ $(this).css('width', '250'); }
)
</source>

* <code>.mouseout()</code>
<source lang="javascript">
$('img[name="lpb"]').mouseout( 
    function(){ $(this).css('width', '500'); }
)
</source>

* <code>.resize()</code>
<source lang="javascript">
$(window).resize(
     function(){$('body').prepend('<h1>resizing window</h1>')}
);
</source>


* <code>.keydown()</code>
<source lang="javascript">
$('body').keydown(
  function(){ 
    var size = Math.random() * (4000 - 100) + 100; //random value btw 100-4000 
    $('img').css('width', size); //resize
    var deg = 'rotate('+(Math.random() * (360 - 0) + 0)+'deg)'; //random value btw 100-4000 
$('img').css('transform', deg); 
})
</source>


'''Example in codepen:''' https://codepen.io/PublicationStation/pen/EbpJLw

 clicking evil cats: resize, add link;

<source lang="html4strict">

<!DOCTYPE html>
<html>
  <head>
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
  <body>
    <h1>Content...</h1>
    <h1>for jQuery</h1>
    <h1></h1>  
    <p id="large">I am p#large and will become large</p>
 
    <p class="rotate">I am p.rotate and will tilt</p>
    <h2 class="rotate">I am a h2.rotate and even I will shift position</h2>
    <img class="rotate" src="" />
    <br/>
    <img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1619/1619140-bigthumbnail.jpg" />
    <img src="https://s-media-cache-ak0.pinimg.com/236x/35/98/76/359876a0f522051e747e878b9a6f551f.jpg" />
 
    <script>
      $(document).ready(function() {
        $("img").click(function() {
          var src = $(this).attr("src");
          $(this)
            .css("height", "100px")
            .after("<a href='" + src + "'>link</a>");
        });
      });
    </script>
  </body>
</html>
</source>