Binder 1

TRANSLATE
HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE... REFERENCES | EXAMPLES | FORUM | ABOUT
jQuery Tutorial WEB HOSTING
jQuery HOME
jQuery AJAX Methods Best Web Hosting
jQuery Intro PHP MySQL Hosting
jQuery Syntax « Previous Next Chapter »
jQuery Selectors Top 10 Web Hosting
jQuery Events UK Reseller Hosting
jQuery Effects jQuery AJAX Methods
Cloud Hosting
jQuery Callback
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the Top Web Hosting
jQuery HTML
whole page.
jQuery CSS $4.93 Domain
jQuery AJAX The following table lists all the jQuery AJAX methods:
jQuery Examples WEB BUILDING
Method Description XML Editor – Free Trial!
jQuery Quiz
$.ajax() Performs an AJAX request FREE Flash Website
jQuery Quiz
ajaxComplete() Specifies a function to run when the AJAX request completes Free Website Templates
jQuery Reference Free WordPress Themes
ajaxError() Specifies a function to run when the AJAX request completes with an error
jQuery Selectors W3SCHOOLS EXAMS
ajaxSend() Specifies a function to run before the AJAX request is sent
jQuery Events
jQuery Effects $.ajaxSetup() Sets the default values for future AJAX requests Get Certified in:
HTML, CSS, JavaScript,
jQuery HTML
ajaxStart() Specifies a function to run when the first AJAX request begins XML, PHP, and ASP
jQuery CSS
jQuery AJAX ajaxStop() Specifies a function to run when all AJAX requests have completed W3SCHOOLS BOOKS
jQuery Misc ajaxSuccess() Specifies a function to run an AJAX request completes successfully New Books:
$.get() Loads data from a server using an AJAX HTTP GET request HTML, CSS
JavaScript, and Ajax
$.getJSON() Loads JSON-encoded data from a server using a HTTP GET request
STATISTICS
$.getScript() Loads (and executes) a JavaScript from the a server using an AJAX HTTP GET
request Browser Statistics
Browser OS
load() Loads data from a server and puts the returned HTML into the selected element Browser Display
$.param() Creates a serialized representation of an array or object (can be used as URL
SHARE THIS PAGE
query string for AJAX requests)
Share with »
$.post() Loads data from a server using an AJAX HTTP POST request
serialize() Encodes a set of form elements as a string for submission
serializeArray() Encodes a set of form elements as an array of names and values
« Previous Next Chapter »
Product Spotlight
Dashboards from Excel Charts and Ranges
You and your users can design dashboards, reports, charts, and models in Excel rather than hard to
learn developer tools and you can easily deploy them with SpreadsheetGear for .NET.
Ads by Lake Quincy Media
TRANSLATE
Mature Ajax RIA Chosen by top software vendors. View 200+ examples & full docs www.SmartClient.com
Great SA Wine Adventure Join the Adventure Today! Unlock Rewards and Win Adventure Prizes GreatSAWineAdventure.com.au
PHP website in minutes Create PHP code for any database. No programming. www.XLineSoft.com/phprunner
jQuery HOME
jQuery AJAX Best Web Hosting
jQuery Events jQuery has a rich library of methods (functions) for AJAX development. UK Reseller Hosting
jQuery Effects
Cloud Hosting
jQuery Callback
jQuery HTML jQuery AJAX Example Top Web Hosting
jQuery AJAX
jQuery Examples
Let AJAX change this text WEB BUILDING
XML Editor – Free Trial!
jQuery Quiz
FREE Flash Website
jQuery Quiz
Free Website Templates
jQuery Reference Try it yourself » Free WordPress Themes
jQuery Events The example above is taken from our AJAX tutorial, but modified with jQuery syntax.
jQuery Effects Get Certified in:
jQuery HTML
XML, PHP, and ASP
jQuery CSS What is AJAX?
jQuery AJAX W3SCHOOLS BOOKS
jQuery Misc AJAX = Asynchronous JavaScript and XML.
New Books:
HTML, CSS
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the STATISTICS
server behind the scenes. This means that it is possible to update parts of a web page, without reloading
the whole page. Browser Statistics
Browser OS
You can learn more about AJAX in our AJAX tutorial. Browser Display
SHARE THIS PAGE
AJAX and jQuery Share with »
jQuery provides a rich set of methods for AJAX web development.
With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP
Get and HTTP Post.
And you can load remote data directly into selected HTML elements of your web page!
Write Less, Do More

The jQuery load() method is a simple (but very powerful) AJAX function. It has the following syntax:
$(selector).load(url,data,callback)
Use the selector to define the HTML element(s) to change, and the url parameter to specify a web
address for your data.
Try it yourself »
Only if you want to send data to the server, you need to use the data parameter. Only if you need to
trigger a function after completion, you will use the callback parameter.
TRANSLATE
jQuery HOME
jQuery CSS Manipulation Best Web Hosting
jQuery Effects jQuery css() Method
Cloud Hosting
jQuery Callback
jQuery has one important method for CSS manipulation: css() Top Web Hosting
jQuery HTML
jQuery CSS The css() method has three different syntaxes, to perform different tasks. $4.93 Domain
jQuery AJAX
jQuery Examples css(name) - Return CSS property value WEB BUILDING
css(name,value) - Set CSS property and value
jQuery Quiz css({properties}) - Set multiple CSS properties and values
FREE Flash Website
jQuery Quiz
jQuery Reference Return CSS Property Free WordPress Themes
jQuery Selectors Use css(name) to return the specified CSS property value of the FIRST matched element: W3SCHOOLS EXAMS
jQuery Events
Example HTML, CSS, JavaScript,
jQuery HTML
XML, PHP, and ASP
jQuery CSS
jQuery AJAX $(this).css("background-color"); W3SCHOOLS BOOKS
jQuery Misc
New Books:
Try it yourself » HTML, CSS
STATISTICS
Set CSS Property and Value Browser Statistics

Browser OS
Use css(name,value) to set the specified CSS property for ALL matched elements: Browser Display
SHARE THIS PAGE

Example Share with »
$("p").css("background-color","yellow");
Try it yourself »
Set Multiple CSS Property/Value Pairs

Use css({properties}) to set one or more CSS property/value pairs for the selected elements:
Example
$("p").css({"background-color":"yellow","font-size":"200%"});
Try it yourself »
jQuery height() and width() Methods

TRANSLATE
YOUR FREE WEBSITE
Free Flash Website

Free Website Builder
Free Web Design
jQuery HOME
jQuery Callback Functions Best Web Hosting
jQuery Events A callback function is executed after the current animation is 100% finished. UK Reseller Hosting
jQuery Effects
Cloud Hosting
jQuery Callback
jQuery HTML Top Web Hosting
jQuery CSS
jQuery Callback Functions
$4.93 Domain
jQuery AJAX
A callback function is executed after the current animation (effect) is finished.
JavaScript statements are executed line by line. However, with animations, the next line of code can be XML Editor – Free Trial!
jQuery Quiz run even though the animation is not finished. This can create errors.
FREE Flash Website
jQuery Quiz
To prevent this, you can create a callback function. The callback function will not be called until after the Free Website Templates
animation is finished. Free WordPress Themes
jQuery Reference
jQuery Events jQuery Callback Example Get Certified in:
jQuery Effects
jQuery HTML Typical syntax: $(selector).hide(speed,callback) XML, PHP, and ASP
jQuery CSS
jQuery AJAX The callback parameter is a function to be executed after the hide effect is completed: W3SCHOOLS BOOKS
jQuery Misc
New Books:
Example with Callback HTML, CSS
$("p").hide(1000,function(){
alert("The paragraph is now hidden"); STATISTICS
}); Browser Statistics
Browser OS
Browser Display
Try it yourself »
SHARE THIS PAGE
Without a callback parameter, the alert box is displayed before the hide effect is completed: Share with »
Example without Callback

$("p").hide(1000);
alert("The paragraph is now hidden");
Try it yourself »
Product Spotlight
Ajax Application Generator
Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning,
feature-rich apps that are easy to customize and ready to deploy. Download Now!
TRANSLATE
YOUR FREE WEBSITE Drop-Down Menus Create cross-browser & feature-rich menus-No programming skills needed! www.likno.com
Free Flash Website Great SA Wine Adventure Join the Adventure Today! Unlock Rewards and Win Adventure Prizes GreatSAWineAdventure.com.au
Free Website Builder Download CSS Editor Create, Edit & Validate CSS files Cross platform easy to use www.oxygenxml.com
Free Web Design
jQuery HOME
jQuery CSS Methods Best Web Hosting
jQuery Effects jQuery CSS Methods
Cloud Hosting
jQuery Callback
The following table lists all the methods used to manipulate CSS properties. Top Web Hosting
jQuery HTML
jQuery AJAX Method Description
jQuery Examples addClass() Adds one or more classes to selected elements WEB BUILDING
css() Sets or returns one or more style properties for selected elements XML Editor – Free Trial!
jQuery Quiz
hasClass() Checks if any of the selected elements have a specified class FREE Flash Website
jQuery Quiz
height() Sets or returns the height of selected elements Free Website Templates
offset() Sets or returns the position (relative to the document) for selected elements
jQuery Events offsetParent() Returns the first parent element that is positioned
position() Returns the position (relative to the parent element) of the first selected element
jQuery HTML
removeClass() Removes one or more classes from selected elements XML, PHP, and ASP
jQuery CSS
jQuery AJAX scrollLeft() Sets or returns the horizontal position of the scrollbar for the selected elements W3SCHOOLS BOOKS
jQuery Misc
scrollTop() Sets or returns the vertical position of the scrollbar for the selected elements New Books:
toggleClass() Toggles between adding/removing one or more classes from selected elements HTML, CSS
width() Sets or returns the width of selected elements
STATISTICS
Browser Statistics
Browser OS
« Previous Next Chapter » Browser Display
SHARE THIS PAGE

Product Spotlight Share with »
Dashboards from Excel Charts and Ranges
You and your users can design dashboards, reports, charts, and models in Excel rather than hard to
learn developer tools and you can easily deploy them with SpreadsheetGear for .NET.
Stylus Studio® XML Development Environment
Stylus Studio® 2011 XML Enterprise Suite raises the bar for productivity in XML development tools.
Millions of XML developers and data integration specialists turn to Stylus Studio's comprehensive and
intuitive XML toolset to tackle today's advanced XML data transformation and aggregation challenges.
XML Pipeline Editor, Debugger and Code Generator

DataDirect XML Converters
XQuery Mapper, Editor, Debugger, and Profiler
XSLT Mapper, Editor, Debugger, Designer, and Profiler
Java and C# for .Net Code Generation
XML Schema Designer With Documentation Generator
XML Editor With Full XPath Integration
TRANSLATE
YOUR FREE WEBSITE
Free Flash Website

Free Web Design
jQuery HOME
jQuery Effect Methods Best Web Hosting
jQuery Effects jQuery Effect Methods
Cloud Hosting
jQuery Callback
The following table lists all the methods used to create animation effects. Top Web Hosting
jQuery HTML
jQuery AJAX Method Description
jQuery Examples animate() Performs a custom animation (of a set of CSS properties) for selected elements WEB BUILDING
clearQueue() Removes all queued functions for the selected element Download XML Editor
jQuery Quiz
delay() Sets a delay for all queued functions for the selected element FREE Flash Website
jQuery Quiz
dequeue() Runs the next queued functions for the selected element Free Website Templates
fadeIn() Gradually changes the opacity, for selected elements, from hidden to visible
jQuery Events fadeOut() Gradually changes the opacity, for selected elements, from visible to hidden
fadeTo() Gradually changes the opacity, for selected elements, to a specified opacity
jQuery HTML
hide() Hides selected elements XML, PHP, and ASP
jQuery CSS
jQuery AJAX queue() Shows the queued functions for the selected element W3SCHOOLS BOOKS
jQuery Misc
show() Shows hidden selected elements New Books:
slideDown() Gradually changes the height, for selected elements, from hidden to visible HTML, CSS
slideToggle() Toggles between slideUp() and slideDown() for selected elements
STATISTICS
slideUp() Gradually changes the height, for selected elements, from visible to hidden
Browser Statistics
stop() Stops a running animation on selected elements Browser OS
toggle() Toggles between hide() and show(), or custom functions, for selected elements Browser Display
SHARE THIS PAGE

« Previous Next Chapter » Share with »
Product Spotlight
SpreadsheetGear: ASP.NET Excel Reporting
Easily create richly formatted Excel reports without Excel using the new generation of spreadsheet
technology built from the ground up for scalability and reliability. learn more
Altova® XMLSpy® - The industry's leading XML editor!
Whether you're new to XML or already an advanced user, the user-friendly views and powerful entry
helpers, wizards, and debuggers in XMLSpy are designed to meet your XML and Web development needs
from start to finish. New features in Version 2011!
XML editor
Graphical XML Schema / DTD editors
XSLT 1.0/2.0 editor, debugger, profiler
TRANSLATE
jQuery HOME
jQuery Effects Best Web Hosting
jQuery Events Hide, Show, Toggle, Slide, Fade, and Animate. WOW! UK Reseller Hosting
jQuery Effects
Cloud Hosting
jQuery Callback
jQuery HTML Click Here to Show/Hide Panel Top Web Hosting
jQuery AJAX
jQuery Examples Examples WEB BUILDING
jQuery hide() XML Editor – Free Trial!
jQuery Quiz Demonstrates a simple jQuery hide() method. FREE Flash Website
jQuery Quiz
jQuery hide() Free Website Templates
jQuery Reference Another hide() demonstration. How to hide parts of text. Free WordPress Themes
jQuery Selectors jQuery slideToggle() W3SCHOOLS EXAMS
jQuery Events Demonstrates a simple slide panel effect.
jQuery HTML jQuery fadeTo() XML, PHP, and ASP
jQuery CSS Demonstrates a simple jQuery fadeTo() method.
jQuery Misc jQuery animate()
Demonstrates a simple jQuery animate() method. New Books:
HTML, CSS
jQuery Hide and Show STATISTICS
With jQuery, you can hide and show HTML elements with the hide() and show() methods: Browser Statistics
Browser OS
Browser Display
Example
SHARE THIS PAGE
$("#hide").click(function(){ Share with »
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Try it yourself »
Both hide() and show() can take the two optional parameters: speed and callback.
Syntax:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
The speed parameter specifies the speed of the hiding/showing, and can take the following values:
"slow", "fast", "normal", or milliseconds:
Example
TRANSLATE
jQuery HOME
jQuery Event Methods Best Web Hosting
jQuery Effects jQuery Event Methods
Cloud Hosting
jQuery Callback
Event methods trigger, or bind a function to an event for all matching elements. Top Web Hosting
jQuery HTML
jQuery CSS Trigger example: $4.93 Domain
jQuery AJAX
jQuery Examples $("button").click() - triggers the click event for a button element. WEB BUILDING
Download XML Editor
jQuery Quiz Binding example:
FREE Flash Website
jQuery Quiz $("button").click(function(){$("img").hide()}) - binds a function to the click event.
jQuery Reference The following table lists all the methods used to handle events. Free WordPress Themes
jQuery Events Method Description
bind() Add one or more event handlers to matching elements HTML, CSS, JavaScript,
jQuery HTML
blur() Triggers, or binds a function to the blur event of selected XML, PHP, and ASP
jQuery CSS
jQuery AJAX elements
W3SCHOOLS BOOKS
jQuery Misc change() Triggers, or binds a function to the change event of
New Books:
selected elements HTML, CSS
click() Triggers, or binds a function to the click event of selected JavaScript, and Ajax
elements
STATISTICS
dblclick() Triggers, or binds a function to the dblclick event of
Browser Statistics
selected elements
Browser OS
delegate() Add one or more event handlers to current, or future, Browser Display
specified child elements of the matching elements
SHARE THIS PAGE
die() Remove all event handlers added with the live() function
Share with »
error() Triggers, or binds a function to the error event of selected
elements
event.currentTarget The current DOM element within the event bubbling phase
event.data Contains the optional data passed to jQuery.fn.bind when
the current executing handler was bound
event.isDefaultPrevented() Returns whether event.preventDefault() was called for the
event object
event.isImmediatePropagationStopped() Returns whether event.stopImmediatePropagation() was
called for the event object
event.isPropagationStopped() Returns whether event.stopPropagation() was called for
the event object
event.pageX The mouse position relative to the left edge of the
document
event.pageY The mouse position relative to the top edge of the
document
event.preventDefault() Prevents the default action of the event
event.relatedTarget The other DOM element involved in the event, if any
TRANSLATE
BEST WEB HOSTING PHP website in minutes Create PHP code for any database. No programming. www.xlinesoft.com/phprunner
Mature Ajax RIA Chosen by top software vendors. View 200+ examples & full docs www.SmartClient.com
‫ ا د آ

ﺏ آ
ن آر ر اﻝه وأن ﺏ أﺏ ﺏ اﻝه‬www.XForex.com
jQuery HOME
jQuery Events Best Web Hosting
jQuery Events jQuery is tailor made to handle events. UK Reseller Hosting
jQuery Effects
Cloud Hosting
jQuery Callback
jQuery CSS
jQuery Event Functions
$4.93 Domain
jQuery AJAX
The jQuery event handling methods are core functions in jQuery.
Event handlers are method that are called when "something happens" in HTML. The term "triggered Download XML Editor
jQuery Quiz (or "fired") by an event" is often used.
FREE Flash Website
jQuery Quiz
It is common to put jQuery code into event handler methods in the <head> section: Free Website Templates
jQuery Selectors Example W3SCHOOLS EXAMS
jQuery Events
jQuery Effects <html> Get Certified in:
<head> HTML, CSS, JavaScript,
jQuery HTML
<script type="text/javascript" src="jquery.js"></script> XML, PHP, and ASP
jQuery CSS
jQuery AJAX <script type="text/javascript">
W3SCHOOLS BOOKS
jQuery Misc $(document).ready(function(){
$("button").click(function(){ New Books:
$("p").hide(); HTML, CSS
}); JavaScript, and Ajax
});
STATISTICS
</script>
</head> Browser Statistics
Browser OS
<body> Browser Display
<h2>This is a heading</h2>
SHARE THIS PAGE
<p>This is a paragraph.</p>
<p>This is another paragraph.</p> Share with »
<button>Click me</button>
</body>
</html>
Try it yourself »
In the example above, a function is called when the click event for the button is triggered:
$("button").click(function() {..some code... } )
The method hides all <p> elements:
$("p").hide();
Functions In a Separate File

If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, put
your jQuery functions in a separate .js file.
TRANSLATE
YOUR FREE WEBSITE Drop-Down Menus Create cross-browser & feature-rich menus-No programming skills needed! www.likno.com
Free Flash Website PHP website in minutes Create PHP code for any database. No programming. www.xlinesoft.com/phprunner
Free Website Builder Great SA Wine Adventure Join the Adventure Today! Unlock Rewards and Win Adventure Prizes GreatSAWineAdventure.com.au
Free Web Design
jQuery HOME
jQuery Examples Best Web Hosting
jQuery Events Do you want to develop your jQuery selector skills? UK Reseller Hosting
jQuery Effects
Cloud Hosting
jQuery Callback
jQuery HTML
Please try our excellent jQuery Selector Tester Top Web Hosting
jQuery AJAX
jQuery Examples jQuery Syntax Examples WEB BUILDING
$(this).hide() XML Editor – Free Trial!
jQuery Quiz Demonstrates the jQuery hide() method, hiding the current HTML element. FREE Flash Website
jQuery Quiz
$("p").hide() Free Website Templates
jQuery Reference Demonstrates the jQuery hide() method, hiding all <p> elements. Free WordPress Themes
jQuery Selectors $(".test").hide() W3SCHOOLS EXAMS
jQuery Events Demonstrates the jQuery hide() method, hiding all elements, with class="test".
jQuery HTML $("#test").hide() XML, PHP, and ASP
jQuery CSS Demonstrates the jQuery hide() method, hiding the element, with id="test".
jQuery Misc Examples explained
New Books:
HTML, CSS
Hiding - Sliding- Fading
STATISTICS
jQuery fadeOut()
Demonstrates a simple jQuery fadeout() method. Browser Statistics
Browser OS
jQuery hide() Browser Display
Demonstrates a simple jQuery hide() method.
SHARE THIS PAGE
Hide explanations Share with »
Demonstrates how to hide parts of text.
Slide panel
Demonstrates a simple Slide Panel effect.
jQuery animate()
Demonstrates a simple jQuery animate() method.
Examples explained
HTML Manipulation
Change the Content of an HTML element
Append content to HTML elements
Append content after HTML elements
Examples explained
CSS Manipulation
TRANSLATE
jQuery HOME
jQuery HTML Manipulation Best Web Hosting
jQuery Events jQuery contains powerful methods (functions) for changing and manipulating HTML UK Reseller Hosting
jQuery Effects
jQuery Callback
elements and attributes. Cloud Hosting
jQuery CSS
jQuery AJAX Changing HTML Content $4.93 Domain

$(selector).html(content)
Download XML Editor
jQuery Quiz
The html() method changes the contents (innerHTML) of matching HTML elements. FREE Flash Website
jQuery Quiz
jQuery Reference Example Free WordPress Themes
jQuery Events $("p").html("W3Schools");
jQuery HTML Try it yourself » XML, PHP, and ASP
jQuery CSS
jQuery Misc
New Books:
Adding HTML content HTML, CSS
$(selector).append(content)
STATISTICS
The append() method appends content to the inside of matching HTML elements. Browser Statistics
Browser OS
$(selector).prepend(content) Browser Display
The prepend() method "prepends" content to the inside of matching HTML elements. SHARE THIS PAGE
Share with »
Example
$("p").append(" W3Schools");
Try it yourself »
$(selector).after(content)
The after() method inserts HTML content after all matching elements.
$(selector).before(content)
The before() method inserts HTML content before all matching elements.
Example
$("p").after(" W3Schools.");
Try it yourself »
TRANSLATE
BEST WEB HOSTING
jQuery HOME
jQuery HTML Methods Best Web Hosting
jQuery Effects jQuery HTML Methods
Cloud Hosting
jQuery Callback
The following table lists all the methods used to manipulate the DOM. Top Web Hosting
jQuery HTML
jQuery CSS The methods below work for both HTML and XML documents. Exception: the html() method. $4.93 Domain
jQuery AJAX
Method Description
addClass() Adds one or more classes (for CSS) to selected elements XML Editor – Free Trial!
jQuery Quiz
FREE Flash Website
jQuery Quiz after() Inserts content after selected elements
append() Inserts content at the end of (but still inside) selected elements
appendTo() Inserts content at the end of (but still inside) selected elements
jQuery Events attr() Sets or returns an attribute and value of selected elements
before() Inserts content before selected elements HTML, CSS, JavaScript,
jQuery HTML
XML, PHP, and ASP
jQuery CSS clone() Makes a copy of selected elements
jQuery AJAX detach() Removes (but keeps a copy of) selected elements W3SCHOOLS BOOKS
jQuery Misc
empty() Removes all child elements and content from selected elements New Books:
HTML, CSS
hasClass() Checks if any of the selected elements have a specified class (for CSS) JavaScript, and Ajax
html() Sets or returns the content of selected elements
STATISTICS
insertAfter() Inserts HTML markup or elements after selected elements Browser Statistics
insertBefore() Inserts HTML markup or elements before selected elements Browser OS
Browser Display
prepend() Inserts content at the beginning of (but still inside) selected elements
prependTo() Inserts content at the beginning of (but still inside) selected elements SHARE THIS PAGE
Share with »
remove() Removes selected elements
removeAttr() Removes an attribute from selected elements
removeClass() Removes one or more classes (for CSS) from selected elements
replaceAll() Replaces selected elements with new content
replaceWith() Replaces selected elements with new content
text() Sets or returns the text content of selected elements
toggleClass() Toggles between adding/removing one or more classes (for CSS) from selected
elements
unwrap() Removes the parent element of the selected elements
val() Sets or returns the value attribute of the selected elements (form elements)
wrap() Wraps specified HTML element(s) around each selected element
wrapAll() Wraps specified HTML element(s) around all selected elements
wrapInner() Wraps specified HTML element(s) around the content of each selected element

TRANSLATE
YOUR FREE WEBSITE PHP website in minutes Create PHP code for any database. No programming. www.XLineSoft.com/phprunner
Free Flash Website Drop-Down Menus Create cross-browser & feature-rich menus-No programming skills needed! www.likno.com
Free Website Builder Best XML Editor Create and Transform XML documents Flexible & easy to use! Free trial www.oxygenxml.com
Free Web Design
jQuery HOME
jQuery Introduction Best Web Hosting
jQuery Events The jQuery library can be added to a web page with a single line of markup. UK Reseller Hosting
jQuery Effects
Cloud Hosting
jQuery Callback
jQuery CSS
What You Should Already Know
$4.93 Domain
jQuery AJAX
Before you start studying jQuery, you should have a basic knowledge of:
HTML XML Editor – Free Trial!
jQuery Quiz CSS
JavaScript FREE Flash Website
jQuery Quiz
If you want to study these subjects first, find the tutorials on our Home page. Free WordPress Themes
jQuery Reference
jQuery Events What is jQuery? Get Certified in:
jQuery Effects
jQuery HTML jQuery is a library of JavaScript Functions. XML, PHP, and ASP
jQuery CSS
jQuery AJAX jQuery is a lightweight "write less, do more" JavaScript library. W3SCHOOLS BOOKS
jQuery Misc
The jQuery library contains the following features: New Books:
HTML, CSS
HTML element selections JavaScript, and Ajax
HTML element manipulation
CSS manipulation STATISTICS
HTML event functions Browser Statistics
JavaScript Effects and animations Browser OS
HTML DOM traversal and modification Browser Display
AJAX
Utilities SHARE THIS PAGE
Share with »
Adding the jQuery Library to Your Pages

The jQuery library is stored as a single JavaScript file, containing all the jQuery methods.
It can be added to a web page with the following mark-up:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
Please note that the <script> tag should be inside the page's <head> section.
Basic jQuery Example

The following example demonstrates the jQuery hide() method, hiding all <p> elements in an HTML
document.
Example
TRANSLATE
YOUR FREE WEBSITE Mature Ajax RIA Chosen by top software vendors. Live editable examples & full docs www.SmartClient.com
Free Flash Website Great SA Wine Adventure Join the Adventure Today! Unlock Rewards and Win Adventure Prizes GreatSAWineAdventure.com.au
Free Website Builder JavaScript Drop-Down Menu Create JavaScript Drop Down Menus in just minutes with AllWebMenus! www.likno.com
Free Web Design
jQuery HOME
jQuery Miscellaneous Methods Best Web Hosting
jQuery Effects jQuery Misc Methods
Cloud Hosting
jQuery Callback
jQuery HTML Method Description Top Web Hosting
jQuery CSS data() Attaches data to, or gets data from, selected elements $4.93 Domain
jQuery AJAX
jQuery Examples each() Run a function for each element matched by the jQuery selector
WEB BUILDING
get() Get the DOM elements matched by the selector
Download XML Editor
jQuery Quiz index() Search for a given element from among the matched elements FREE Flash Website
jQuery Quiz
$.noConflict() Release jQuery's control of the $ variable Free Website Templates
jQuery Reference $.param() Creates a serialized representation of an array or object (can be used as URL Free WordPress Themes
jQuery Selectors query string for AJAX requests)
W3SCHOOLS EXAMS
jQuery Events removeData() Removes a previously-stored piece of data
size() Return the number of DOM elements matched by the jQuery selector HTML, CSS, JavaScript,
jQuery HTML
XML, PHP, and ASP
jQuery CSS toArray() Retrieve all the DOM elements contained in the jQuery set, as an array
jQuery Misc
New Books:
« Previous Next Chapter » HTML, CSS
Free Online Website Builder - No Downloading Needed STATISTICS

Browser Statistics
Create a free Flash website with our simple, online web design editing platform. Stunning templates and Browser OS
user-friendly tools make website building easy and fun. Browser Display
Start Creating your free website now! SHARE THIS PAGE

Share with »
Altova® MissionKit® - Integrated Suite of XML Tools
The Altova MissionKit is an integrated suite of tools ideal for:
XML development
Web & Web services development
Data mapping & integration
Rendering & publishing XML & database data
XBRL validation, taxonomy editing, transformation &
rendering
Chart & report generation for XML & XBRL
The MissionKit for XML Developers includes XMLSpy® - the

industry-leading XML editor; MapForce® - a graphical data
mapping, conversion, and integration tool; StyleVision® - a visual
XSLT stylesheet and report designer; DiffDog® - an XML-aware
diff/merge tool; and 2 additional tools.
TRANSLATE
jQuery HOME
jQuery Selectors Best Web Hosting
jQuery Events jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element. UK Reseller Hosting
jQuery Effects
Cloud Hosting
jQuery Callback
jQuery HTML jQuery Selectors Top Web Hosting
jQuery AJAX In the previous chapter we looked at some examples of how to select different HTML elements.
It is a key point to learn how jQuery selects exactly the elements you want to apply an effect to.
Download XML Editor
jQuery Quiz
jQuery selectors allow you to select HTML elements (or groups of elements) by element name, attribute FREE Flash Website
jQuery Quiz
name or by content.
In HTML DOM terms:
jQuery Events Selectors allow you to manipulate DOM elements as a group or as a single node.
jQuery HTML
XML, PHP, and ASP
jQuery CSS
jQuery AJAX jQuery Element Selectors W3SCHOOLS BOOKS
jQuery Misc
jQuery uses CSS selectors to select HTML elements. New Books:
HTML, CSS
$("p") selects all <p> elements. JavaScript, and Ajax
$("p.intro") selects all <p> elements with class="intro". STATISTICS

Browser Statistics
$("p#demo") selects the first <p> element with id="demo". Browser OS
Browser Display
jQuery Attribute Selectors SHARE THIS PAGE

Share with »
jQuery uses XPath expressions to select elements with given attributes.
$("[href]") select all elements with an href attribute.
$("[href='#']") select all elements with an href value equal to "#".
$("[href!='#']") select all elements with an href attribute NOT equal to "#".
$("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".
jQuery CSS Selectors

jQuery CSS selectors can be used to change CSS properties for HTML elements.
The following example changes the background-color of all p elements to yellow:
Example
$("p").css("background-color","yellow");
Try it yourself »
TRANSLATE
YOUR FREE WEBSITE
Free Flash Website

Free Web Design
jQuery HOME
jQuery Selectors Best Web Hosting
jQuery Effects jQuery Selectors
Cloud Hosting
jQuery Callback
Use our excellent jQuery Selector Tester to experiment with the different selectors. Top Web Hosting
jQuery HTML
jQuery AJAX Selector Example Selects
jQuery Examples * $("*") All elements WEB BUILDING
#id $("#lastname") The element with id=lastname Download XML Editor
jQuery Quiz
.class $(".intro") All elements with class="intro" FREE Flash Website
jQuery Quiz
element $("p") All p elements Free Website Templates
.class.class $(".intro.demo") All elements with the classes "intro" and "demo"
jQuery Events
:first $("p:first") The first p element
jQuery HTML
:last $("p:last") The last p element XML, PHP, and ASP
jQuery CSS
jQuery AJAX :even $("tr:even") All even tr elements W3SCHOOLS BOOKS
jQuery Misc
:odd $("tr:odd") All odd tr elements New Books:
HTML, CSS
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
STATISTICS
:gt(no) $("ul li:gt(3)") List elements with an index greater than 3
Browser Statistics
:lt(no) $("ul li:lt(3)") List elements with an index less than 3 Browser OS
:not(selector) $("input:not(:empty)") All input elements that are not empty Browser Display
SHARE THIS PAGE

:header $(":header") All header elements h1, h2 ... Share with »
:animated $(":animated") All animated elements
:contains(text) $(":contains('W3Schools')") All elements which contains the text

:empty $(":empty") All elements with no child (elements) nodes
:hidden $("p:hidden") All hidden p elements
:visible $("table:visible") All visible tables
s1,s2,s3 $("th,td,.intro") All elements with matching selectors
[attribute] $("[href]") All elements with a href attribute

[attribute=value] $("[href='default.htm']") All elements with a href attribute value equal to
"default.htm"
[attribute!=value] $("[href!='default.htm']") All elements with a href attribute value not equal to
"default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending with
".jpg"
TRANSLATE
YOUR FREE WEBSITE
Free Flash Website

Free Web Design
jQuery HOME
jQuery Syntax Best Web Hosting
jQuery Events With jQuery you select (query) HTML elements and perform "actions" on them. UK Reseller Hosting
jQuery Effects
Cloud Hosting
jQuery Callback
jQuery CSS
jQuery Syntax Examples
$4.93 Domain
jQuery AJAX
$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.
jQuery Quiz $("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with id="test". FREE Flash Website
jQuery Quiz
$("p").hide() Free WordPress Themes
jQuery Reference Demonstrates the jQuery hide() method, hiding all <p> elements.
jQuery Events $(".test").hide()
jQuery Effects Demonstrates the jQuery hide() method, hiding all elements with class="test". Get Certified in:
jQuery HTML
XML, PHP, and ASP
jQuery CSS
jQuery AJAX jQuery Syntax W3SCHOOLS BOOKS
jQuery Misc
The jQuery syntax is tailor made for selecting HTML elements and perform some action on the New Books:
HTML, CSS
element(s).
Basic syntax is: $(selector).action()
STATISTICS
A dollar sign to define jQuery Browser Statistics
A (selector) to "query (or find)" HTML elements Browser OS
A jQuery action() to be performed on the element(s) Browser Display
Examples: SHARE THIS PAGE

Share with »
$(this).hide() - hides current element
$("p").hide() - hides all paragraphs
$("p.test").hide() - hides all paragraphs with class="test"
$("#test").hide() - hides the element with id="test"
jQuery uses a combination of XPath and CSS selector syntax.

You will learn more about the selector syntax in the next chapter of this tutorial.
The Document Ready Function

You might have noticed that all jQuery methods, in our examples, are inside a document.ready()
function:
$(document).ready(function(){
// jQuery functions go here...

TRANSLATE
jQuery HOME
jQuery Tutorial Best Web Hosting
jQuery Syntax « W3Schools Home Next Chapter »
jQuery Effects jQuery is a JavaScript Library. Cloud Hosting
jQuery Callback
jQuery CSS
jQuery greatly simplifies JavaScript programming.
$4.93 Domain
jQuery AJAX
jQuery Examples jQuery is easy to learn. WEB BUILDING
jQuery Quiz
FREE Flash Website
jQuery Quiz
jQuery Reference "Try it yourself" Examples in Each Chapter Free WordPress Themes
jQuery Events With our online editor, you can edit the code, and click on a button to view the result.
jQuery HTML
jQuery CSS
Example XML, PHP, and ASP
<html>
jQuery Misc
New Books:
<head> HTML, CSS
<script type="text/javascript" src="jquery.js"></script> JavaScript, and Ajax
<script type="text/javascript">
$(document).ready(function(){ STATISTICS
$("p").click(function(){ Browser Statistics
$(this).hide(); Browser OS
}); Browser Display
});
</script> SHARE THIS PAGE
</head> Share with »
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
Try it yourself »
Click on the "Try it yourself" button to see how it works.
jQuery Examples
Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
jQuery Examples

Binder 1

Uploaded by

Copyright:

Available Formats

You might also like

Binder 1

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Binder 1

Uploaded by

Copyright:

Available Formats

TRANSLATE

jQuery Tutorial WEB HOSTING

« Previous Next Chapter »

jQuery Tutorial WEB HOSTING

SHARE THIS PAGE

AJAX and jQuery Share with »

jQuery provides a rich set of methods for AJAX web development.

Write Less, Do More

jQuery Tutorial WEB HOSTING

Set CSS Property and Value Browser Statistics

SHARE THIS PAGE

Set Multiple CSS Property/Value Pairs

jQuery height() and width() Methods

YOUR FREE WEBSITE

Free Flash Website

jQuery Tutorial WEB HOSTING

Example without Callback

« Previous Next Chapter »

jQuery Tutorial WEB HOSTING

SHARE THIS PAGE

Stylus Studio® XML Development Environment

XML Pipeline Editor, Debugger and Code Generator

YOUR FREE WEBSITE

Free Flash Website

jQuery Tutorial WEB HOSTING

SHARE THIS PAGE

Altova® XMLSpy® - The industry's leading XML editor!

jQuery Tutorial WEB HOSTING

jQuery Hide and Show STATISTICS

jQuery Tutorial WEB HOSTING

‫ ا  د آ

jQuery Tutorial WEB HOSTING

$("button").click(function() {..some code... } )

The method hides all <p> elements:

Functions In a Separate File

jQuery Tutorial WEB HOSTING

Append content to HTML elements

Append content after HTML elements

jQuery Tutorial WEB HOSTING

jQuery Examples WEB BUILDING

BEST WEB HOSTING

jQuery Tutorial WEB HOSTING

« Previous Next Chapter »

jQuery Tutorial WEB HOSTING

Adding the jQuery Library to Your Pages

It can be added to a web page with the following mark-up:

Basic jQuery Example

jQuery Tutorial WEB HOSTING

Free Online Website Builder - No Downloading Needed STATISTICS

Start Creating your free website now! SHARE THIS PAGE

The Altova MissionKit is an integrated suite of tools ideal for:

The MissionKit for XML Developers includes XMLSpy® - the

jQuery Tutorial WEB HOSTING

$("p.intro") selects all <p> elements with class="intro". STATISTICS

jQuery Attribute Selectors SHARE THIS PAGE

$("[href]") select all elements with an href attribute.

$("[href='#']") select all elements with an href value equal to "#".

jQuery CSS Selectors

‫ ا د آ