Scribd
Upload
23 views

Jquery Presentation

Uploaded by

anitarooge
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views

Jquery Presentation

Uploaded by

anitarooge
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

Jquery

- A JavaScript Library

By : Anita M. Rooge
What is Jquery ?
 JQuery is a lightweight, "write less, do
more", JavaScript library.

 An open source JavaScript library that


simplifies the interaction between HTML
and JavaScript.

 Jquery is easy to learn and master.


Installing JQuery
Steps for adding Jquery to your web pages :

 Go to http://docs.jquery.com/Main_Page OR
 Go to https://
ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
 Use following code snippet

<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
</body>
</html>
jQuery Syntax
 With jQuery you select (query) HTML elements and
perform "actions" on them.
 Basic syntax is: $(selector).action()
 A $ sign to define/access jQuery
 A (selector) HTML elements
 A jQuery action() to be performed on the
element(s)

 Examples:
 $("p").hide() - hides all <p> elements.
 $("#test").hide() - hides the element with id="test".
 $(".test").hide() - hides all elements with
class="test".
The Document Ready Event

$(document).ready(function(){

// jQuery methods go here...

});

This is to prevent any jQuery code from running


before the document is finished loading (is
ready).
Jquery Selectors
 jQuery selectors allow you to select and manipulate
HTML element(s).
 With jQuery selectors you can find elements based on
their id, classes, types, attributes, values of attributes
and much more. It's based on the existing
CSS Selectors, and in addition, it has some own
custom selectors.
 All type of selectors in jQuery, start with the dollar
sign and parentheses: $().
 Types of jquery selectors :
 Element selector
 Id (#) selector
 Class (.) selector
Element Selector
 The jQuery element selector selects elements
based on their tag names.
 Example :

$(document).ready(function(){
$(“#button").click(function(){
$("p").hide();
});
});
HTML Tag <P> is specified as element here
Written as <p> text goes here</p>
Id (#) Selector
 The jQuery #id selector uses the id attribute of
an HTML tag to find the specific element.
 Example :

$(document).ready(function(){
$(“#bt1").click(function(){
$("#test").hide();
});
});
#button and #test used as id here. The html tags
used as
<input type =“button” id = “bt1” value =“Click”>
<p id = “test”>Para txt goes here </p>
Class (.) Selector
 The jQuery class selector finds elements with a
specific class.
 Example :

$(document).ready(function(){
$(“#button").click(function(){
$(".test").hide();
});
});
.test used as class here. The html tags used as
<p class = “test”>Para txt goes here </p>
More Jquery Selectors
Syntax Description
$("*") Selects all elements

$(this) Selects the current HTML element

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

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

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


Jquery Hide and Show Methods
 With jQuery you can Hide or Show an element visibility.
 jQuery has the following methods:

 hide() : used to hide element


 show() : used show element
 toggle() : toggle between hide and fade show

 Syntax :
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
$(selector).toggle(speed, callback);

Example : hodeshow.html
Jquery Fading
Methods
 With jQuery you can fade an element in and out of visibility.
 jQuery has the following fade methods:

 fadeIn() : used to fade in a hidden element


 fadeOut() : used to fade out a visible element
 fadeToggle() : toggle between fade in and fade out
 fadeTo() : used to fade element to opacity value (0 and 1)

 Syntax :
$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
$(selector).fadeToggle(speed, callback);
$(selector).fadeTo(speed, callback);

Example : fadeinout1.html
Jquery Effects : Sliding
 With jQuery you can create a sliding effect on elements.
 jQuery has the following slide methods :

slideDown() : used to slide down an element


slideUp() : used to slide up an element
slideToggle() : toggles between the slideDown() and slideUp()

 Syntax :

$(selector).slideDown(speed, callback);
$(selector). slideUp(speed, callback);
$(selector).slideToggle(speed, callback);

 Example : slide.html
Jquery Effects :
Animation
The jQuery animate() method lets you create custom
animations.
 Syntax :
$(selector).animate( { params }, speed, callback);
 Here is the description of all the parameters used by this
method
 params − A map of CSS properties that the animation will
move toward.
 speed − This is optional parameter representing how long
the animation will run.
 callback − This is optional parameter representing a
function to call once the animation is complete

 Example : animate.html
Jquery Effects :Stop
 The jQuery stop() method is used to stop an
animation or effect before it is finished.
 The stop() method works for all jQuery effect
functions, including sliding, fading and custom
animations.
 Syntax :
$(selector).stop(stopAll , goToEnd );
 The optional stopAll Boolean parameter specifies
whether to remove queued animation or not. Default
value is false, that means only the current animation
will be stopped, rest of the animations in the queue will
run afterwards.
 The optional goToEnd Boolean parameter specifies
whether to complete the current animation
immediately. Default value is false.
Jquery : Callback
 A callback function is executed after the current effect is 100%
finished.
 JavaScript statements are executed line by line. However, with
effects, the next line of code can be run even though the effect is
not finished. This can create errors.
 To prevent this, you can create a callback function.
 Syntax :

$(selector).hide(speed, callback);

 Example : callback1.html
Jquery : chaining
 The jQuery provides another robust feature called method
chaining that allows us to perform multiple action on the same set
of elements, all within a single line of code.
 This is possible because most of the jQuery methods return a
jQuery object that can be further used to call another method.

 Syntax :

$(selector).hide(speed, callback);

 Example : chain.html
Jquery : Get & Set Content &
Attributes
 jQuery contains powerful methods for changing and manipulating
HTML elements and attributes.
 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

 Syntax :

$(selector).text( ) ; Get the content of selector


$(selector).html( ) ; Get the content with html markup of selector
$(selector).val( ) ; Get value of form elements
$(selector).attr( attribute name) ; Get value elements attribute

Example : contentattributes.html
jQuery text() Method : get text
The jQuery text() method is either used to get the
combined text contents of the selected elements,
including their descendants

jQuery text() Method : set text


The jQuery text() method is also used to set the
combined text contents of the selected elements,
including their descendants.
settext.html
Usesettext.html
jQuery html() Method

The jQuery html() method is used to get or set the


HTML contents of the elements.

If multiple elements are selected, the html() method


only returns the HTML contents of the first element
from the set of matched elements.

Get content eg. : gethtml.html

Set content eg : sethtml.html


jQuery attr() Method
 You can use the jQuery attr() method to
either get the value of an element's
attribute or set one or more attributes for
the selected element.

 Getattr.html
 Setattr.html
jQuery val() Method
 You can use the jQuery val() method to
either get the value of an form elements or
set value for selected form element.

 getsetval.html
Jquery : Add remove
Elements/Content
 With jQuery, it is easy to add new elements/content.
 append() : The jQuery append() method is used to

insert specified content as the last child (at the end

of) the selected elements in the jQuery collection.


 remove() :The jQuery remove() method is used to

remove the selected elements out of the DOM.

Example :appdel.html
jquery - Get and Set CSS Classes
 Query provides several methods as follows to
manipulate the CSS classes assigned to HTML
elements.
 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

 Example : addclass.html

You might also like