Introduction

What is JQuery?

• JavaScript Library
• User does something, now need to respond
• Leverages CSS
• Works with sets of elements
• Performs multiple operations on a set of elements with one line of code ( known as statement chaining)
• Hides various browser quirks (so you can concentrate on the end result)
• Is extensible ( so you can use third-party-plugins to perform specialized tasks, or write your own)
•  

 

 

 

 

CHAPTER 01

Downloading JQuery ( www.jquery.com )

Development – easier to debug and learn

Production – compressed so smaller/faster

 

 

 

 

 

CREATING A SIMPLE JQUERY-ENABLED PAGE

 

 

 

 

Document.ready event

• This event will occur when the entire DOM has been loaded.
• Better than window.onload

        $("document").ready(function() {

            alert("The page just loaded!");

        });

 

 

JQUERY 8 CATEGORIES

 

1. Core Functionality
2. Selection and Traversal
3. Manipulation and CSS
4. Events
5. Effects
6. AJAX
7. User Interface
8. Extensibility

 

 

jQuery Selectors and Filters: Overview

 

 

Using Basic  jQuery Selectors

 

 

 

• Using jQuery vs. using the plain browser DOM

 

Get all <p> tags (jQuery):

$(“p”);

$(“#list1”);

 

Using Basic jQuery Selectors

Select all <p> tags and put a red border

<script type="text/javascript" src="jquery/Exercise Files/jquery-1.3.2.js"></script>

<script>

$("document").ready(function(){

        $("p").css("border","3px solid red")

        });

</script>

 

 

jQuery Selectors and Filters: Using Filters

 

• Filters work witj selectors to provide even more fine-grained control over how elements are selected in the document
• jQuery filters fall into six different categories

 

• You can refine a selector by including elements that match certain conditions, like position or index

 

 

<script type="text/javascript" src="jquery/Exercise Files/jquery-1.3.2.js"></script>

<script>

$("document").ready(function(){

        $("p").css("border","3px solid red")

        });

</script>