Getting Started with jQuery - PowerPoint PPT Presentation

1 / 15
About This Presentation
Title:

Getting Started with jQuery

Description:

Getting Started with jQuery Introduction to jQuery Selection and DOM manipulation Contents * What is jQuery? Why use jQuery? Getting jQuery 1. Getting Started with ... – PowerPoint PPT presentation

Number of Views:281
Avg rating:3.0/5.0
Slides: 16
Provided by: AndyO2
Category:

less

Transcript and Presenter's Notes

Title: 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?
Write a Comment
User Comments (0)
About PowerShow.com