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

From Publication Station
Line 27: Line 27:
There are different ways to load it, inside the HTML <head></head> with::
There are different ways to load it, inside the HTML <head></head> with::
* '''Download the jQuery file''' (latest version & compressed, production)from http://jquery.com/download/ and loading it:
* '''Download the jQuery file''' (latest version & compressed, production)from http://jquery.com/download/ and loading it:
<source lang="html4strict">
  <head>  
  <head>  
  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  </head>
  </head>
</source>
   
   
* Load it '''from online resource''' (CDN)
* Load it '''from online resource''' (CDN)
<source lang="html4strict">
  <head>
  <head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
  </head>
</source>


==Basic: loading code==
==Basic: loading code==

Revision as of 11:46, 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!

Basic: 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 type="text/javascript" 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>

Basic: loading 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>


Basic: jQuery syntax - elements

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=2449’