element to the left, until it has reached a left property of 250px:
Example
$("button")
...
animate({left:'250px'});
});
By default, all HTML elements have a static position, and cannot be moved
...
click(function(){
$("div")
...
5',
height:'150px',
width:'150px'
});
});
Is it possible to manipulate ALL CSS properties with the animate() method?
W3schools
...
Also, color animation is not included in the core jQuery library
...
com
...
This is done by putting += or -= in front of the value:
Example
$("button")
...
animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - Using Pre-defined Values
You can even specify a property's animation value as "show", "hide", or "toggle":
Example
$("button")
...
animate({
height:'toggle'
});
});
W3schools
...
This means that if you write multiple animate() calls after each other, jQuery creates an
"internal" queue with these method calls
...
So, if you want to perform different animations after each other, we take advantage of
the queue functionality:
Example 1
$("button")
...
animate({height:'300px',opacity:'0
...
animate({width:'300px',opacity:'0
...
animate({height:'100px',opacity:'0
...
animate({width:'100px',opacity:'0
...
click(function(){
var div=$("div");
div
...
animate({fontSize:'3em'},"slow");
});
jQuery Stop Animations
The jQuery stop() method is used to stop animations or effects before it is finished
...
com
JQuery Notes
pg 19 of40
jQuery stop() Method
The jQuery stop() method is used to stop an animation or effect before it is finished
...
Syntax:
$(selector)
...
Default is false, which means that only the active animation will be
stopped, allowing any queued animations to be performed afterwards
...
Default is false
...
The following example demonstrates the stop() method, with no parameters:
Example
$("#stop")
...
stop();
});
jQuery Callback Functions
A callback function is executed after the current effect is 100% finished
...
However, with effects, the next line of
code can be run even though the effect is not finished
...
W3schools
...
A callback function is executed after the current effect is finished
...
hide(speed,callback);
Examples
The example below has a callback parameter that is a function that will be executed
after the hide effect is completed:
Example with Callback
$("button")
...
hide("slow",function(){
alert("The paragraph is now hidden");
});
});
The example below has no callback parameter, and the alert box will be displayed
before the hide effect is completed:
Example without Callback
$("button")
...
hide(1000);
alert("The paragraph is now hidden");
});
jQuery - Chaining
With jQuery, you can chain together actions/methods
...
jQuery Method Chaining
Until now we have been writing jQuery statements one at a time (one after the other)
...
com
JQuery Notes
pg 21 of40
However, there is a technique called chaining, that allows us to run multiple jQuery
commands, one after the other, on the same element(s)
...
To chain an action, you simply append the action to the previous action
...
The "p1" element first changes to red, then it slides up, and then it slides down:
Example
$("#p1")
...
slideUp(2000)
...
Tip: When chaining, the line of code could become quite long
...
This also works just fine:
Example
$("#p1")
...
slideUp(2000)
...
jQuery DOM Manipulation
One very important part of jQuery, is the possibility to manipulate the DOM
...
W3schools
...
"
Get Content - text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation is:
text() - Sets or returns the text content of selected elements
html() - Sets or returns the content of selected elements (including HTML
markup)
val() - Sets or returns the value of form fields
The following example demonstrates how to get content with the jQuery text() and
html() methods:
Example
$("#btn1")
...
text());
});
$("#btn2")
...
html());
});
The following example demonstrates how to get the value of an input field with the
jQuery val() method:
Example
$("#btn1")
...
val());
});
Get Attributes - attr()
W3schools
...
The following example demonstrates how to get the value of the href attribute in a link:
Example
$("button")
...
attr("href"));
});
jQuery - Set Content and Attributes
Set Content - text(), html(), and val()
We will use the same three methods from the previous page to set content:
text() - Sets or returns the text content of selected elements
html() - Sets or returns the content of selected elements (including HTML
markup)
val() - Sets or returns the value of form fields
The following example demonstrates how to set content with the jQuery text(), html(),
and val() methods:
Example
$("#btn1")
...
text("Hello world!");
});
$("#btn2")
...
html("
Hello world!");
});
$("#btn3")
...
val("Dolly Duck");
});
A Callback Function for text(), html(), and val()
W3schools
...
The callback function has two parameters: the index of the current
element in the list of elements selected and the original (old) value
...
The following example demonstrates text() and html() with a callback function:
Example
$("#btn1")
...
text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2")
...
html(function(i,origText){
return "Old html: " + origText + " New html: Hello
world!(index: " + i + ")";
});
});
Set Attributes - attr()
The jQuery attr() method is also used to set/change attribute values
...
click(function(){
$("#w3s")
...
w3schools
...
The following example demonstrates how to set both the href and title attributes at the
same time:
W3schools
...
click(function(){
$("#w3s")
...
w3schools
...
The callback function has
two parameters: the index of the current element in the list of elements selected and
the original (old) attribute value
...
The following example demonstrates attr() with a callback function:
Example
$("button")
...
attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery - Add Elements
With jQuery, it is easy to add new elements/content
...
com
JQuery Notes
pg 26 of40
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements
jQuery append() Method
The jQuery append() method inserts content AT THE END of the selected HTML
elements
...
append("Some appended text
...
Example
$("p")
...
");
Add Several New Elements With append() and prepend()
In both examples above, we have only inserted some text/HTML at the beginning/end of
the selected HTML elements
...
The new elements can be generated with text/HTML (like we
have done in the examples above), with jQuery, or with JavaScript code and DOM
elements
...
The elements are created
with text/HTML, jQuery, and JavaScript/DOM
...
com
JQuery Notes
pg 27 of40
function appendText()
{
var txt1="
Text
...
text("Text
...
createElement("p"); // Create with DOM
txt3
...
";
$("p")
...
The jQuery before() method inserts content BEFORE the selected HTML elements
...
after("Some text after");
$("img")
...
The new elements can be generated with text/HTML (like we
have done in the example above), with jQuery, or with JavaScript code and DOM
elements
...
The elements are created
with text/HTML, jQuery, and JavaScript/DOM
...
text("love "); // Create with jQuery
var txt3=document
...
innerHTML="jQuery!";
W3schools
...
after(txt1,txt2,txt3);
}
// Insert new elements after img
jQuery - Remove Elements
With jQuery, it is easy to remove existing HTML elements
...
Example
$("#div1")
...
Example
$("#div1")
...
W3schools
...
The following example removes all
elements with class="italic":
Example
$("p")
...
italic");
jQuery - Get and Set CSS Classes
With jQuery, it is easy to manipulate the CSS of elements
...
We will look at the following
methods:
addClass() - Adds one or more classes to the selected elements
removeClass() - Removes one or more classes from the selected elements
toggleClass() - Toggles between adding/removing classes from the selected
elements
css() - Sets or returns the style attribute
Example Stylesheet
The following stylesheet will be used for all the examples on this page:
...
blue
{
color:blue;
}
W3schools
...
Of
course you can select multiple elements, when adding classes:
Example
$("button")
...
addClass("blue");
$("div")
...
click(function(){
$("#div1")
...
click(function(){
$("h1,h2,p")
...
com
JQuery Notes
pg 31 of40
The following example will show how to use the jQuery toggleClass() method
...
click(function(){
$("h1,h2,p")
...
jQuery - css() Method
jQuery css() Method
The css() method sets or returns one or more style properties for the selected elements
...
css("background-color");
W3schools
...
css("background-color","yellow");
Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",
...
css({"background-color":"yellow","font-size":"200%"});
jQuery - AJAX Introduction
AJAX is the art of exchanging data with a server, and updating parts of a web page without reloading the whole page
...
W3schools
...
Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs
...
What About jQuery and AJAX?
jQuery provides several methods for AJAX functionality
...
This means that you will have to write
extra code to test for different browsers
...
jQuery AJAX Methods
In the next chapters we will look at the most important jQuery AJAX methods
...
The load() method loads data from a server and puts the returned data into the selected
element
...
com
JQuery Notes
pg 34 of40
$(selector)
...
The optional data parameter specifies a set of querystring key/value pairs to send along
with the request
...
Here is the content of our example file: "demo_test
...
The following example loads the content of the file "demo_test
...
load("demo_test
...
The following example loads the content of the element with id="p1", inside the file
"demo_test
...
load("demo_test
...
The callback function can have different parameters:
responseTxt - contains the resulting content if the call succeed
statusTXT - contains the status of the call
xhr - contains the XMLHttpRequest object
The following example displays an alert box after the load method() completes
...
com
JQuery Notes
pg 35 of40
$("button")
...
load("demo_test
...
status+": "+xhr
...
HTTP Request: GET vs
...
GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource
GET is basically used for just getting (retrieving) some data from the server
...
POST can also be used to get some data from the server
...
To learn more about GET and POST, and the differences between the two methods,
please read our HTTP Methods GET vs POST chapter
...
get() Method
The $
...
Syntax:
W3schools
...
get(URL,callback);
The required URL parameter specifies the URL you wish to request
...
The following example uses the $
...
click(function(){
$
...
asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
The first parameter of $
...
asp")
...
The first callback parameter holds the
content of the page requested, and the second callback parameter holds the status of
the request
...
asp"):
<%
response
...
")
%>
jQuery $
...
post() method requests data from the server using an HTTP POST request
...
post(URL,data,callback);
The required URL parameter specifies the URL you wish to request
...
The optional callback parameter is the name of a function to be executed if the request
succeeds
...
com
JQuery Notes
pg 37 of40
The following example uses the $
...
click(function(){
$
...
asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
The first parameter of $
...
asp")
...
The ASP script in "demo_test_post
...
The third parameter is a callback function
...
Tip: Here is how the ASP file looks like ("demo_test_post
...
Form("name")
city=Request
...
Write("Dear " & fname & "
...
Write("Hope you live well in " & city & "
...
com
JQuery Notes
pg 38 of40
jQuery and Other JavaScript Frameworks
As you already know; jQuery uses the $ sign as a shortcut for jQuery
...
Some of the other frameworks also use the $ character as a shortcut (just like jQuery),
and then you suddenly have two different frameworks using the same shortcut, which
might result in that your scripts stop working
...
The jQuery noConflict() Method
The noConflict() method releases the hold on the $ shortcut identifier, so that other
scripts can use it
...
noConflict();
jQuery(document)
...
click(function(){
jQuery("p")
...
The noConflict() method returns a
reference to jQuery, that you can save in a variable, for later use
...
noConflict();
jq(document)
...
click(function(){
W3schools
...
text("jQuery is still working!");
});
});
If you have a block of jQuery code which uses the $ shortcut and you do not want to
change it all, you can pass the $ sign in as a parameter to the ready method
...
noConflict();
jQuery(document)
...
click(function(){
$("p")
...
com
JQuery Notes
pg 40 of40
Title: JQuery Basic Notes.
Description: JQuery Basic Notes. I have read various books to prepare these basic notes for the beginners.