Title: Getting Started with jQuery
1Getting Started with jQuery
2Contents
- Introduction to jQuery
- Selection and DOM manipulation
31. Getting Started with jQuery
- What is jQuery?
- Why use jQuery?
- Getting jQuery
4What 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
5Why 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
6Getting 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
72. 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
8jQuery Philosophy
Find content in the HTML document (selector)
Do something to it (method)
9jQuery 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
10A 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
11Some More Selector Examples
("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.
12Getting 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")
13DOM Manipulation
("target").addClass("css_class")
("target").toggleClass("css_class")
("p").append("ltstronggtHellolt/stronggt")
("span").appendTo("foo")
("p").after("ltbgtHellolt/bgt")
("p").before("ltbgtHellolt/bgt")
14Demonstration
- 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
15Any Questions?