Introduction to jQuery

Introduction to jQuery

Slide 2

Lecture Overview What is jQuery? Getting and using jQuery jQuery versions How jQuery works

Slide 3

What is jQuery? It’s a library (framework) written in

JavaScript There are other JavaScript frameworks

It’s free It makes JavaScript easier to use

Document traversal Event handling Animation Ajax

Slide 4

Getting JQuery You must get the jQuery library in one of

three ways It’s added automatically as part of an

ASP.NET project You can reference the libraries on the Web

I prefer this method as the pages are cached by the browser

You can download the library or reference it on the Web

Slide 5

Local jQuery Inclusion Just use the src attribute to reference

the jQuery script file FYI – text/javascript is not necessary

because it’s the default scripting language in HTML5

<script type="text/javascript" src="jquery.js">

</script>

Slide 6

Referencing jQuery Or use one of the network providers

(Google for example)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Slide 7

jQuery Versions There are two variants

On that you can read (for development) jQuery.js

One without any whitespace (for production)

jQuery.min.js

Slide 8

jQuery (.net) Copied into the

ASP project automatically

Slide 9

How jQuery Works My golden rule is that it works much like

CSS The syntax is very similar

It first selects elements using selectors then performs actions on those elements

Many of these actions map to common JavaScript actions

Slide 10

jQuery Syntax We put jQuery inside of the <script>

tag It can be combined with JavaScript

because it is JavaScript $(selector).action()

It always begins with a $ sign The selector finds HTML elements

Same syntax as CSS selectors The action() is performed on the

selected elements

Slide 11

$(document).ready All jQuery statements are wrapped in $(document).ready so that the script will not run until the page is ready to be manipulated

Slide 12

A First Example Hide all paragraph elements when the

button with the ID btnToggle is clicked

Slide 13

Selectors (The basics) REMEMBER CSS Select an element (paragraph)

$(“p”).hide(); Select an ID (foo)

$(“#foo”).hide(); Select a class (foo)

$(“.foo”).hide();

Slide 14

Selectors (More) Select all elements

$(“*”).hide(); Select elements with attribute (href)

$(“[href]”).hide(); Select element list (ol, ul, li)

$(“ol,ul,li”).hide();

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

Slide 15

Selectors (More) Select all paragraphs with the class

intro $(“p.intro”).hide();

Use the “:” after another element to select a specific element from the list (:first, :last, :even, :odd) $(“p.first”).hide();

Use :header to get all header elements $(“:header”).hide();

Slide 16

Selectors (More) “:” syntax is also used to get input

elements

Slide 17

Effects Change visibility – show(), hide(),

toggle() Change opacity (fade) – fadeIn(),

fadeOut(), fadeTo(), fadeToggle() Sliding (expand or contract regions) -

slideDown, slideUp, slideToggle

http://w3schools.com/jquery/jquery_ref_effects.asp

Slide 18

Effects (timing) Optional parameters allow you to

control speeds and repetition

Slide 19

jQuery Events An event fires as a result of user action.

Your program can handle these events. Conceptually, it’s no different than vb and

the JavaScript that you have learned

Slide 20

jQuery and CSS jQuery works closely with CSS We can use it to get a CSS property or

to set one Get the background color of the first

matched elements $("p").css("background-color");

Set the background color of all matched elements $("p").css("background-color“,”green”);

Slide 21

For Further Study All of the jQuery actions in a function

are added to a queue. We can get at that queue

We can completely change the structure of a document

Slide 22

Resources http://jquery.com/ http://jqueryui.com/