What is jQuery?
jQuery is a library of JavaScript Functions. jQuery is a lightweight "write less, do more" JavaScript
library. The jQuery library contains the following features: HTML element selections HTML element manipulation CSS manipulation HTML event functions JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities
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 markup: <head> <script type="text/javascript" src="jquery.js"></script> </head> Please note that the <script> tag should be inside the page's <head> section
Example
Basic jQuery Example The following example demonstrates the jQuery hide() method, hiding all <p> elements in an HTML document. Example <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head>
<body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
jQuery Syntax
The jQuery syntax is tailor made for selecting HTML
elements and perform some action on the element(s). Basic syntax is: $(selector).action() A dollar sign to define jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s) Examples: $(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"
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...
}); This is to prevent any jQuery code from running before the document is finished loading (is ready). Here are some examples of actions that can fail if functions are run before the document is fully loaded:
Trying to hide an element that doesn't exist Trying to get the size of an image that is not loaded
jQuery Selectors
jQuery Element Selectors
jQuery uses CSS selectors to select HTML elements. $("p") selects all <p> elements.
$("p.intro") selects all <p> elements with class="intro".
$("p#demo") selects the first <p> element with
id="demo".
jQuery Selectors
jQuery Attribute Selectors 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");
Some examples
jQuery Event Functions
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 (or "fired") by an event" is often used. It is common to put jQuery code into event handler methods in the <head> section: Example <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head>
<body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body></html>
jQuery Event
jQuery Name Conflicts
jQuery uses the $ sign as a shortcut for jQuery.
Some other JavaScript libraries also use the dollar sign
for their functions. The jQuery noConflict() method specifies a custom name (like jq), instead of using the dollar sign.
jQuery Effects
jQuery Hide and Show With jQuery, you can hide and show HTML elements with the hide() and show() methods: Example $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 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 $("button").click(function(){ $("p").hide(1000); });
jQuery Effects
jQuery Toggle The jQuery toggle() method toggles the visibility of HTML
elements using the show() or hide() methods. Shown elements are hidden and hidden elements are shown. Syntax: $(selector).toggle(speed,callback) The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds. Example $("button").click(function(){ $("p").toggle(); }); The callback parameter is the name of a function to be executed after the hide (or show) method completes.
jQuery Slide - slideDown, slideUp, slideToggle The jQuery slide methods gradually change the height for selected
elements. jQuery has the following slide methods: $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback) The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds. The callback parameter is the name of a function to be executed after the function completes. slideDown() Example $(".flip").click(function(){ $(".panel").slideDown(); });
lideUp() Example
$(".flip").click(function(){
$(".panel").slideUp() }) slideToggle() Example $(".flip").click(function(){ $(".panel").slideToggle(); });
jQuery Fade - fadeIn, fadeOut, fadeTo The jQuery fade methods gradually change the opacity for
selected elements. jQuery has the following fade methods: $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback) The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds. The opacity parameter in the fadeTo() method allows fading to a given opacity. The callback parameter is the name of a function to be executed after the function completes.
fadeTo() Example
$("button").click(function(){
$("div").fadeTo("slow",0.25); }); fadeOut() Example $("button").click(function(){ $("div").fadeOut(4000); });
jQuery Custom Animations The syntax of jQuery's method for making custom animations is: $(selector).animate({params},[duration],[easing],[callback]) The
key parameter is params. It defines the CSS properties that will be animated. Many properties can be animated at the same time: animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"}); The second parameter is duration. It specifies the speed of the animation. Possible values are "fast", "slow", "normal", or milliseconds.
Example 1 <script type="text/javascript">
$(document).ready(function(){ $("button").click(function(){ $("div").animate({height:300},"slow"); $("div").animate({width:300},"slow"); $("div").animate({height:100},"slow"); $("div").animate({width:100},"slow"); }); }); </script>
Example 2
<script type="text/javascript">
$(document).ready(function(){ $("button").click(function(){ $("div").animate({left:"100px"},"slow"); $("div").animate({fontSize:"3em"},"slow"); }); }); </script>
jQuery Effects
jQuery HTML Manipulation
jQuery contains powerful methods (functions) for
changing and manipulating HTML elements and attributes. Changing HTML Content $(selector).html(content) The html() method changes the contents (innerHTML) of matching HTML elements. Example $("p").html("W3Schools");
jQuery HTML Manipulation
Adding HTML content
$(selector).append(content) The append() method appends content to the inside of
matching HTML elements. $(selector).prepend(content) The prepend() method "prepends" content to the inside of matching HTML elements. Example $("p").append(" W3Schools");
jQuery HTML Manipulation
$(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.");
jQuery CSS Manipulation
jQuery css() Method
jQuery has one important method for CSS
manipulation: css() The css() method has three different syntaxes, to perform different tasks. css(name) - Return CSS property value css(name,value) - Set CSS property and value css({properties}) - Set multiple CSS properties and values
jQuery CSS Manipulation
Return CSS Property Use css(name) to return the specified CSS property value of the
FIRST matched element: Example $(this).css("background-color"); Set CSS Property and Value Use css(name,value) to set the specified CSS property for ALL matched elements: Example $("p").css("background-color","yellow"); 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%"});
jQuery CSS Manipulation
jQuery height() and width() Methods jQuery has two important methods for size manipulation. height() width() Size Manipulation Examples The height() method sets the height of all matching elements: Example $("#div1").height("200px"); The width() method sets the width of all matching elements: Example $("#div2").width("300px");
