presentation_jquery_ppt.pptx

 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.

 HTML
 CSS
 JavaScript

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> OR

 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) to "query (or find)" 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".

$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running before the document
is finished loading (is ready).
 Trying to hide an element that is not created yet
 Trying to get the size of an image that is not loaded yet

$(function(){
// jQuery methods go here...
});
Use the syntax you prefer.

 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

 The jQuery element selector selects elements based on their tag
names.
 Example :
$(“#button").click(function(){
$("p").hide();
});
});

 The jQuery #id selector uses the id attribute of an HTML tag to find
the specific element.
 Example :
$("#test").hide();
});
});
EX: idselector.html
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide
_id

 The jQuery class selector finds elements with a specific class.
 Example :
$(".test").hide();
});
});
Ex : classselector.html
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide
_class

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
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to
"_blank"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements

 jQuery hide() , show(), toggle()
 Syntax:
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
$(selector).toggle(speed, callback);
 Speed and callback are optional parameters.
 The optional speed parameter specifies the speed of the hiding/showing, and can
take the following values: "slow", "fast", or milliseconds.
 The following example demonstrates the speed parameter with hide():
 Example
 $("button").click(function(){
$("p").hide(1000);
});
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow
Example : showhidetoggle.html
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

 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
 $("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Example : fadein.html
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein

 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

 The jQuery animate() method lets you create custom animations.
 Syntax :
$(selector).animate( { params }, speed, callback);
 The required params parameter defines the CSS properties to be
animated.
 The optional speed parameter specifies the duration of the effect. It
can take the following values: "slow", "fast", or milliseconds.
 The optional callback parameter is the name of a function to be
executed after the animation completes.
 By default, all HTML elements have a static position, and cannot be
moved. To manipulate the position, remember to first set the CSS
position property of the element to relative, fixed, or absolute!
 Example : animate.html, animate1.html

 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 parameter specifies whether also the animation
queue should be cleared or not. Default is false, which means that only
the active animation will be stopped, allowing any queued animations to
be performed afterwards.
 The optional goToEnd parameter specifies whether or not to complete
the current animation immediately. Default is false.
 So, by default, the stop() method kills the current animation being
performed on the selected element.
 Example : stop.html

 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 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

 Syntax :
$(selector).text( string) ; Set the content of selector
$(selector).html( string) ; Set the content with html markup of selector
$(selector).val(string ) ; Set value of form elements
$(selector).attr( attribute name, attribute value) ; Set value of elements
attribute
Example : setcontentattributes.html, setcontentattributes1.html

 With jQuery, it is easy to add new elements/content.
 Methods :
 append() - Inserts content at the end of the selected elements
 prepend() - Inserts content at the beginning of the selected elements
 after() - Inserts content after the selected elements
 before() - Inserts content before the selected elements
Example : append.html

 To remove elements and content, there are mainly two jquery
methods:
 remove() - Removes the selected element (and its child elements)
 empty() - Removes the child elements from the selected element
 Syntax :
$(selector).remove( ) ;
$(selector).empty( string) ; string optional parameter.
-- string => can be class or id
-- selector => can be element, class or id
Example : remove.html

 With jQuery, it is easy to manipulate the CSS of elements.
 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
 Example : addclass.html

 The css() method sets or returns one or more style properties for the
selected elements.
 To return the value of a specified CSS property, use the following
syntax:
$(selector).css("property name");
 To Set a CSS Property , use the following syntax:
$(selector). css("propertyname", “value");
 Example : css.html

presentation_jquery_ppt.pptx

More Related Content

Similar to presentation_jquery_ppt.pptx

Recently uploaded

presentation_jquery_ppt.pptx