Introduction to jQuery: A Comprehensive Guide, Slides of Computer Programming

Download Introduction to jQuery: A Comprehensive Guide and more Slides Computer Programming in PDF only on Docsity!

Introduction to jQuery

Lecture Overview

 What is jQuery?  Getting and using jQuery  jQuery versions  How jQuery works

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  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 HTML

---

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

---

---

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 **

$(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 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 (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