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
![Page 1: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/1.jpg)
Introduction to jQuery
![Page 2: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/2.jpg)
Slide 2
Lecture Overview What is jQuery? Getting and using jQuery jQuery versions How jQuery works
![Page 3: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/5.jpg)
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>
![Page 6: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/6.jpg)
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>
![Page 7: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/8.jpg)
Slide 8
jQuery (.net) Copied into the
ASP project automatically
![Page 9: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/12.jpg)
Slide 12
A First Example Hide all paragraph elements when the
button with the ID btnToggle is clicked
![Page 13: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/13.jpg)
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();
![Page 14: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/15.jpg)
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();
![Page 16: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/16.jpg)
Slide 16
Selectors (More) “:” syntax is also used to get input
elements
![Page 17: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/18.jpg)
Slide 18
Effects (timing) Optional parameters allow you to
control speeds and repetition
![Page 19: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/20.jpg)
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”);
![Page 21: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to jQuery](https://reader036.vdocument.in/reader036/viewer/2022081503/568165fe550346895dd92dc3/html5/thumbnails/22.jpg)
Slide 22
Resources http://jquery.com/ http://jqueryui.com/