JQuery Tutorial - Joshua Pelletier

[TUTORIAL
ON JQUERY] 1

Tutorial on jQuery
A guide to getting started with jQuery
Joshua Pelletier
IT704 2013
W
Whhaatt iiss JJQ
Quueerryy??

JQuery is a JavaScript library. A JavaScript library, like JQuery, takes all the
functions of regular JavaScript and brings them together in a simpler way.
Doing this results in less amount of code needing to be written by the
developer. JQuery is entirely free to download and it is an open source. The
advantages of JQuery being an open source are that anyone can add any type
of plug-in they want. It also allows the developer to use the code in anyway
they see fit to get their task done.

What do you need for JQuery to Work?

First thing you will need is the jQuery library. You can download the
jQuery library directly from their website (http://jquery.com/download/).
They have a number of versions on there. It is up to you which version
you use. You have the option of downloading the commpressed or the
uncompressed verisons.

There is also the option of finding a CDN (content dilivery system)
which hosts jQuery. You can then access jQuery through that. There
are a number of different CDNs that host jQuery. Some examples are
Google and Microsoft CDNs.

Some sort of text editor to be able to create HTML and JavaScript
documents with.

Basic knowledge of how JavaScript works. However it is not required.
Use this site to help you get the basic knowledge of
jQuery(http://try.jquery.com/levels/1/challenges/1) .

How do you use jQuery in your site?

I found that using the jQuery library that was hosted on a CDN was not only
easy but less time consuming. The jQuery website even helps you out by
adding quick access to it at the bottom of their webpage.

The above picture was taken directly from the jQuery download page
(http://jquery.com/download/). JQuery in fact has its own CDN where you
can access the versions of jQuery. In order to start using jQuery you will
need to insert the following line of code into your HTML document inside of
the <head>:

These lines of code will link your document with the jQuery CDN. There will
be no need for you to download jQuery to your computer to start using it if

you use these lines code.

JQuery UI Plug-ins

A plug-in is just an extension of the already existing JQuery code. It allows
for more features that web developers find useful. In my exploring with
JQuery I found that all the cool things that you were able to do with JQuery
were in fact incorporated through plug-ins.

JQuery also has a vast library of plug-ins. Everyday web developers in fact
constructed most of the plug-ins supported by JQuery. Because JQuery is
open source, it allows people to submit patches and to create plug-ins for
other developers to use. There is literally thousands of JQuery plug-ins and
most of them can be found here: (http://plugins.jquery.com/).

You incorporate a plug-in the same way you would incorporate the JQuery
library. One would simply put it inside of the <script> tag. Like so:

More often than not the developer must also include some more coding to
make their plug-ins work. For my example, I had to include a link to a CSS
page hosted on the JQuery CDN. I incorporated the CSS page like this:

Example of JQuery and a Plug-in working together

I will now be showing you an example of how to make some tabs with
information in them, which is called an accordion function. I will then add
some code to make these tabs resizable. These functions are possible with
regular JavaScript, but it will take more lines of code than it would JQuery
and the plug-ins available. I will assume you all know HTML and know how
to make divs and paragraphs underneath headings. My HTML and JQuery
code looks like this:

The HTML code here creates a <div> with an ID equal to accordion-resizer. I

then give the <div> a class name of ui-widget-content. The class name is
not required. However, when you view the page in a web browser with the
class name of ui-widget-content the tabs look like they are inside of a box.
Contrary to that, if you do not have the class name of ui-widget-content the
tabs do not look like they are inside of a box. I feel that having the class name
be ui-widget-content is a little bit easier on your eyes, but you be the judge.

With class name ui-widget-content Without class name ui-widget-content
The JQuery code starts with opening the <script> tag and then calls a
function by doing $(function). It then goes inside of the HTML, looking for an
element with the ID of accordion. In JQuery, IDs are selected using the #
and classes are selected using a .. Once it has selected the right element it
calls the function accordion, which is a built in plug-in function. The
accordion function extends or contracts things that are selected. As you can
see from the pictures above, when a section, is not selected it is contracted
down so you cannot see its content. JQuery then goes inside of the HTML
document and gets the same element with ID of accordion and calls the
resizable function on it. The resizable function allows you to resize the tabs
so that you can display their entire content.

As you can see from the picture, section 3 has more content that cannot be
displayed because of the size. The resizable function allows you to resize the
box by clicking and dragging on the little grey arrow in the bottom right
corner of the box surrounding the tabs.

The picture shows what it would look like if you were to resize the tabs so
that all of its content could be displayed.

Code examples used from the JQuery UI website:
http://jqueryui.com/accordion/

Conclusion

This was just a very simple example of how you can use JQuery to
accomplish some tasks. JQuery can be used to do far more complex things
and should be. This tutorial was to just show you how easy it is to
incorporate JQuery into your HTML and how simple it is to learn. This
tutorial also was meant to show you how extensive and helpful the JQuery
plug-ins can be. In this example, both of the functions I used (accordion and
resizable) were plug-ins. Since JQuery is the largest JavaScript library in use
today and is an open source, it only means that it is always evolving and
expanding.

Resources
http://en.wikipedia.org/wiki/JQuery

http://jquery.com/download/

http://jqueryui.com/

http://try.jquery.com/levels/1/challenges/1

http://www.w3schools.com/jquery/default.asp

JQuery Tutorial - Joshua Pelletier

Uploaded by

Copyright:

Available Formats

JQuery Tutorial - Joshua Pelletier

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JQuery Tutorial - Joshua Pelletier

Uploaded by

Copyright:

Available Formats

[TUTORIAL

What do you need for JQuery to Work?

How do you use jQuery in your site?

be no need for you to download jQuery to your computer to start using it if

Example of JQuery and a Plug-in working together

The HTML code here creates a <div> with an ID equal to accordion-resizer. I

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.