introduction to jquery
DESCRIPTION
Introduction to jQuery. Lecture Overview. What is jQuery ? Getting and using jQuery jQuery versions How jQuery works. 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 - PowerPoint PPT PresentationTRANSCRIPT
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/