Introduction to jQuery

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 • Document traversal • Event handling • Animation • Ajax

Getting JQuery • You must get the jQuerylibrary in one of three ways • It’s added automatically as part of an ASP.NET project • You can reference the libraries on the Web • You can download the library or reference it on the Web

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>

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>

jQuery Versions • There are two variants • On that you can read (for development) • jQuery.js • One without any whitespace (for production) • jQuery.min.js

Getting and Using jQuery • We need a reference to the jQuery Library <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

jQuery (.net) • Copied into the ASP project automatically

How jQuery Works • My golden rule is that it works much like CSS • The syntax is very similar • It • first selects elements using selectors • and then it performs actions on those elements • Many of these actions map to common JavaScript actions

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

A First Example • Hide all paragraph elements when the button with the ID btnToggle is clicked

$(document).ready • All jQuery statements are wrapped in $(document).ready so that the script will not run until the page is completely loaded

Selectors (The basics) • REMEMBER CSS • Select an element (paragraph) • $(“p”).hide(); • Select an ID (foo) • $(“#foo”).hide(); • Select a class (foo) • $(“.foo”).hide();

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

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();

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

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

Effects (timing) • Optional parameters allow you to control speeds and repetition

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

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”);

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

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

Introduction to jQuery