Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/03"

From Publication Station
Line 22: Line 22:
But jquery makes your life to much easier, let's see how!
But jquery makes your life to much easier, let's see how!


==Basic: loading jQuery library==
== Structure ==
I will introduce jQuery in 3 steps:
* '''What''' elements are manipulated? - jQuery selectors
* '''How''' are elements manipulated? - jQuery manipulation
* '''When''' are elements manipulated? - jQuery listeners
 
==Loading jQuery library==
'''jQuery is simply an external JavaScript file that you load on to your HTML page.'''
'''jQuery is simply an external JavaScript file that you load on to your HTML page.'''


Line 40: Line 46:
</source>
</source>


==Basic: loading code==
==loading your code==
Once you loaded the jQuery library (file), you need to '''load your jQuery code'''.
Once you loaded the jQuery library (file), you need to '''load your jQuery code'''.


Line 55: Line 61:




==Basic: jQuery syntax - selectors==
 
In order to change or retrieve HTML elements' content, attributes, style, '''we need to select those element(s) precisely'''. jQuery is master in those selection.  
 
== 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 ===
=== simple selectors ===
Line 128: Line 138:
</html>
</html>
</source>
</source>
=='''How''' are elements manipulated? - jQuery manipulation==
http://api.jquery.com/category/manipulation/
In the previous example we have already began manipulating the elements within the page, by using the jQuery method <code>.css()</code> and <code>.text()</code>. Let's look at them more in depth. <u>Will be using example simple selectors</u>.
* .html() - inserts html in the place of content $('p.rotate').html('<span style="background:red">replaces <i>html<i> contente</span>')
* .text() - inserts/changes text content of a tag $('h1').text('I am changing you')


==Jquery classes??==  
==Jquery classes??==  

Revision as of 13:44, 30 November 2015

jQuery

What is jQuery

jQuery is a JavaScript library makes programming in JS a lot simpler and a lot less messy.

There are many JavaScript libraries, that make certain aspects of programming in JS easier - e.g. working with SVG, maps, making visualizations, etc, etc.

jQuery is on of the most popular and general purpose JavaScript libraries

http://jquery.com/

JS, made easy

Like with JS you can use jQuery to:

  • change HTML content
  • change element attributes
  • change an element style
  • retrieve the window size
  • listen to an even (e.g. a mouse click)
  • make a timer
  • validate data

But jquery makes your life to much easier, let's see how!

Structure

I will introduce jQuery in 3 steps:

  • What elements are manipulated? - jQuery selectors
  • How are elements manipulated? - jQuery manipulation
  • When are elements manipulated? - jQuery listeners

Loading jQuery library

jQuery is simply an external JavaScript file that you load on to your HTML page.

There are different ways to load it, inside the HTML <head></head> with:: 

 <head> 
 <script src="jquery-1.11.3.min.js"></script>
 </head>
  • Load it from online resource (CDN)
 <head>
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 </head>

loading your code

Once you loaded the jQuery library (file), you need to load your jQuery code.

the most secure way, that ensures the code is run only after all the contents from the page are loaded is: 

<script>
$(document).ready(
    function(){
      //your jQuery/JS code goes here
    })
</script>



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: $('h1') will select all the heading1 elements.
  • id selector: $('#large') will select the element with id large.
  • class selector: $('.small') will select all the elements with class small.
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
<body>
<h1>I am a 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>

<script>
$(document).ready(
    function(){
    alert("be alert for the changes in the elements' text and CSS");
    $('h1').text('Yes, your a h1');
    $('#large').css('font-size', '50pt');
    $('.rotate').css('transform', 'skew(0deg, 5deg)');  
    })
</script>
</body>
</html>

advanced selectors

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

Attribute selectors example

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
    img { display: block;}
</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(){
    alert("be alert for what will happen to LPB");
    $('img').css('width', '100'); // all imgs will be 100px width       
    $('img[name="lpb"]').css('display','block').css('width', '100%'); //but img[name="lpb"] will be 1000px with

    })
</script>
</body>
</html>


How are elements manipulated? - jQuery manipulation

http://api.jquery.com/category/manipulation/

In the previous example we have already began manipulating the elements within the page, by using the jQuery method .css() and .text(). Let's look at them more in depth. Will be using example simple selectors.

  • .html() - inserts html in the place of content $('p.rotate').html('replaces html contente')
  • .text() - inserts/changes text content of a tag $('h1').text('I am changing you')



Jquery classes??

  • change HTML content - .text() ??
  • change element attributes - .attr()
  • change an element style - .css()
  • retrieve the window size - window.attr('width'
  • listen to an even (e.g. a mouse click) $('body').click()
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2/03&oldid=2454’