1 / 23

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

tana
Download Presentation

Introduction to jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Introduction to jQuery

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

  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

  4. 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

  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>

  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>

  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

  8. 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>

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

  10. 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

  11. 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

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

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

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

  15. 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

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

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

  18. 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

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

  20. 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

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

  22. 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

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

More Related