JQuery: Essentials

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Tags