Editing JQuery & DOM manipulations (section)

== ''What'' elements are manipulated? - jQuery selectors==
http://api.jquery.com/category/selectors/

In order to change or retrieve HTML elements' content, attributes, style, '''we need to select those element(s) precisely'''. jQuery selector methods are masters at that. 

=== simple selectors ===
* '''element selector''': <code>$('h1')</code> will select '''all the heading1 elements'''.
* '''id selector''': <code>$('#large')</code> will select '''the element with id large'''.
* '''class selector''': <code>$('.small')</code> will select '''all the elements with class small'''.

'''See code in Codepen: 
* 1C https://codepen.io/PublicationStation/pen/BmPEzM 
* 1B https://codepen.io/PublicationStation/pen/YLqqzq  
* 1A https://codepen.io/PublicationStation/pen/OZNNPg - 

'''

<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
<body>
<h1>I am a <u>h1</u></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>

<script>
$(document).ready(
    function(){
    $('h1').text('Yes, your a h1');
    $('#large').css('font-size', '50pt');
    $('.rotate').css('transform', 'skew(0deg, 5deg)');  
    })
</script>
</body>
</html>
</source>

=== advanced selectors ===
* Descendant selectors: <code>$('ul a')</code>  will select '''all a tags inside the ul tags'''.
* Child selectors: <code>$('ul > li')</code>  will select '''all li tags that are direct children from the ul tags'''.
* Attribute selectors: <code>$('img[src="img.jpg"]')</code> will select '''all imgs that have as src the image img.jpg'''.

==== Attribute selectors example ====
'''See code in Codepen: https://codepen.io/PublicationStation/pen/OOwGWd '''

<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
    img { display: block;
          transition-duration:4s;}
</style>
  </head>
<body>
<img src="http://i.giphy.com/EsYu229wwE9R6.gif" name="lpb" />
<img src="http://i.giphy.com/5WUH6YDabP7hK.gif" />
<img src="http://i.giphy.com/CVHyjsVMGPqq4.gif" name="lpb" />
<img src="http://i.giphy.com/10HegwKCnl0krS.gif" />
<img src="http://i.giphy.com/CDMz3fckRXXDG.gif" />
<img src="http://i.giphy.com/9ZxHNOvMggGl2.gif" name="lpb" />
<img src="http://i.giphy.com/j50v9vd9rbhjG.gif" />
<img src="http://i.giphy.com/YP1hn6KUhDIgo.gif" />
<img src="http://i.giphy.com/VFzAK3xAaUCpW.gif" name="lpb" />
<img src="http://i.giphy.com/scGSxIFxfOkSs.gif" name="lpb" />
<img src="http://i.giphy.com/YP1hn6KUhDIgo.gif" />
<img src="http://i.giphy.com/zzGluVQkDjQXe.gif" />
<script>
$(document).ready(
    function(){
    $('img[name="lpb"]').css('transform', 'skewX(70deg)'); 
     //img[name="lpb"] will be skewed with
     
    })

</script>
</body>
</html>
</source>