Getting Started with jQuery

1
Getting Started with jQuery
2
Contents

1. Introduction to jQuery
2. Selection and DOM manipulation

3
1. Getting Started with jQuery

• What is jQuery?
• Why use jQuery?
• Getting jQuery

4
What is jQuery?

• jQuery is a free, open-source JavaScript library
• Dramatically simplifies the task of writing
  client-side JavaScript code in your Web pages
• Hides browser-specific nuances, which is a great
  help!
• Simplifies Ajax calls
• The success story of jQuery
• First released in 2006
• Widely adopted by major Web platforms, including
  Microsoft IE6, Chrome, Firefox 2, Safari3,
  Opera 9

5
Why use jQuery?

• Here are some of the reasons jQuery is so
  popular
• Cross-browser compatibility
• Fast and small
• Short learning curve and great documentation
• Many plug-ins available
• Compliant with CSS3 selectors
• Helpful utilities
• jQuery UI
• Widespread adoption

6
Getting jQuery

• You can download jQuery from http//jquery.com
• You can then incorporate jQuery in a page as
  follows
• You can access directly at Microsoft CDN or
  Google CDN
• You can then incorporate jQuery in a page using
  one of the following

ltscript src"/js/jquery.js" type"text/javascript"
gt lt/scriptgt
ltscript src"http//ajax.microsoft.com/ajax/jq
uery/jquery-1.7.min.js" type"text/javascrip
t"gt lt/scriptgt
ltscript src"http//ajax.googleapis.com/ajax/li
bs/jquery/1.7/jquery.min.js"
type"text/javascript"gt lt/scriptgt
7
2. Selection and DOM Manipulation

• jQuery philosophy
• jQuery selector syntax
• A closer look at selector syntax
• Some more selector examples
• Getting and setting attributes
• DOM manipulation
• Demonstration

8
jQuery Philosophy
Find content in the HTML document (selector)
Do something to it (method)
9
jQuery Selector Syntax

• jQuery uses CSS3-style selector syntax to
  intelligently locate elements etc. in your page
• You can locate elements based on nesting, IDs,
  tag names, etc.
• Example

lttable id"employeesTable"gt lttrgt
lttdgtJoelt/tdgtlttdgtAllenlt/tdgtlttdgt100000lt/tdgt
lt/trgt lttrgt lttdgtNathanlt/tdgtlttdgtDyerlt/tdgtlttdgt1
20000lt/tdgt lt/trgt
ltscript type"text/javascript"gt (document).ready(
function () ("tableemployeesTable
trnth-child(even)").addClass("even") )
lt/scriptgt
10
A Closer Look at Selector Syntax
ltscript type"text/javascript"gt (document).ready(
function () ("tableemployeesTable
trnth-child(even)").addClass("even") )
lt/scriptgt

• ()
• Short-hand for jQuery(), a powerful function for
  DOM queries
• (document)
• Returns the document object on the page
• (document).ready
• Binds a function when the DOM is ready to be
  manipulated
• ("tableemployeesTable trnth-child(even)")
• Finds lttablegt element whose ID is employeesTable
• Then finds all its lttrgt child elements at even
  index
• .addClass("even")
• jQuery method to add a CSS class to specified DOM
  object

11
Some More Selector Examples

• CSS style
• Hierarchy
• Form

("myID") // Find by id.
(".myClass") // Find by class
name. ("myTag") // Find by tag
(element name). ("id, .class, tag") //
Find by multiple criteria.
("form input") // Find descendant.
("main gt ") // Find child.
("prev div") // Find sibling.
("form radio") // Find radio elements
in forms. ("dvMainForm checkbox") // Find
checkbox in a form. ("inputdisabled") //
Find disabled input elements.
12
Getting and Setting Attributes

• Getting attributes
• Setting attributes

("em").attr("title") ("label").html()
("pfirst").text() ("input").val()
("em").attr("title", "hello") ("label").html("h
ello") ("pfirst").text("hello")
("input").val("hello")
13
DOM Manipulation
("target").addClass("css_class")
("target").toggleClass("css_class")
("p").append("ltstronggtHellolt/stronggt")
("span").appendTo("foo")
("p").after("ltbgtHellolt/bgt")
("p").before("ltbgtHellolt/bgt")
14
Demonstration

• Let's take a look at a demonstration of how to
  use jQuery to select and manipulate DOM objects
• The demo is located in the following folder
• C\JavaScriptWebDev\Demos\08-GettingStartedWithjQu
  ery
• Code
• Go to the HellojQuery sub-folder
• Open HellojQuery.sln in Visual Studio
• Demo instructions
• See Demo_SelectionDomManipulation.docx

15
Any Questions?