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

From Publication Station
(Created page with "what about jQuery")
 
Line 1: Line 1:
what about jQuery
=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::
* '''Download the jQuery file''' (latest version & compressed, production)from http://jquery.com/download/ and loading it:
<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:
 
<source lang="JavaScript" >
<script>
$(document).ready(
    function(){
      //your jQuery/JS code goes here
    })
</script>
</source>
 
 
==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()

Revision as of 11:45, 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=2448’