Download It
Upcoming SlideShare
Loading in...5
×
 

Download It

on

  • 1,710 views

 

Statistics

Views

Total Views
1,710
Views on SlideShare
1,710
Embed Views
0

Actions

Likes
0
Downloads
53
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Download It Download It Document Transcript

    • jQuery jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn.With our online editor, you can edit the code, and click on a button to view the result. Example <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide() }) }) </script> </head> <body> <p>If you click on me, I will disappear.</p> </body> </html> What You will Learn In this tutorial you will learn, by text and lots of on-line examples, how to apply JavaScript effects to web pages using jQuery. jQuery is a lightweight "write less, do more" JavaScript library. Basically you will learn how to select HTML elements, and how to perform actions on them like hiding, moving and manipulating their content. What You Should Already Know Before you start studying jQuery, you should have a basic knowledge of:  HTML  CSS  JavaScript If you want to study these subjects first, find the tutorials on our Home page. jQuery Examples Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself.
    • jQuery References At W3Schools you will find a complete reference of all jQuery objects and functions. jQuery Introduction jQuery can be added to your web pages with a single line of markup Basic jQuery Example The following example demonstrates the jQuery hide() function, hiding all <p> elements in an HTML document. jQuery function: $("p").hide() jQuery Features jQuery is a library of JavaScript Functions. The jQuery library contains the following features:  HTML element selections  HTML event functions  HTML element manipulation  CSS manipulation  JavaScript Effects and animations  HTML DOM traversal and modification  AJAX  Utilities Adding the jQuery Library to Your Pages The jQuery library is stored a single JavaScript file, containing all the jQuery functions. It can be added to a web page with the following mark-up: Example <head> <script type="text/javascript" src="jquery.js"></script> </head> Please note that the <script> tag should be inside the page's <head> section. You can download your own copy of jQuery from the Downloading jQuery page Library Alternatives Both Google and Microsoft have good support for jQuery. If you don't want to store the jQuery library on your own computer, you can load the CDN jQuery core file from Google or Microsoft.
    • Using Google's CDN <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> </head> Using Microsoft's CDN <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script> </head> jQuery Syntax With jQuery you select (query) HTML elements and perform "actions" on them. jQuery Syntax Examples jQuery: $(this).hide() Demonstrates the jQuery hide() function, hiding the current HTML element. jQuery: $("#test").hide() Demonstrates the jQuery hide() function, hiding the element with id="test". jQuery: $("p").hide() Demonstrates the jQuery hide() function, hiding all <p> elements. jQuery: $(".test").hide() Demonstrates the jQuery hide() function, hiding all elements with class="test". 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 • An jQuery action() to be performed upon 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"
    • jQuery Selectors Selectors allow you to manipulate HTML elements as a group or as a single element. jQuery Selection In the previous chapter we showed some examples of how to select HTML elements. It is a key point learn how jQuery selects the exact element that you want to apply an effect to. jQuery element selectors and attribute selectors allow you to select HTML elements (or groups of elements) by tag name, attribute name or by content. Selectors allow you to manipulate HTML elements as a group or as a single element. In HTML DOM terms: Selectors allow you to manipulate DOM elements as a group or as a single node. jQuery Element Selectors jQuery uses CSS style selectors to select HTML elements. $("p") selects all <p> elements $("p.intro") selects all <p> elements with class="intro". $("p#demo") selects the <p> element with id="demo". jQuery Attribute Selectors jQuery uses XPath style selectors to select elements with given attributes. $("[href]") select all elements with an href attribute. $("[href='#']") select all elements with an href value="#". $("[href!='#']") select all elements with an href attribute<>"#". $("[href$='.jpg']") select all elements with an href attribute containing ".jpg". jQuery CSS Selectors jQuery CSS selectors can be used to change CSS properties for HTML elements. Example $("p.intro").css("background-color","yellow")
    • Some more examples: Syntax Description $(this) Current HTML element $("p") All <p> elements $("p.intro") All <p> elements with class="intro" $(".intro") All elements with class="intro" $("#intro") The element with id="intro" $("ul li:first") The first <li> element of each <ul> $("[href$='.jpg']") All elements with attribute href containing ".jpg" $("div#intro .head") All elements with class="head" inside a <div> element with id="intro" For a full reference please go to our jQuery Selectors Reference jQuery Events jQuery is tailor made to handle events. jQuery Event Functions The jQuery event handling functions are core functions in jQuery. Event handling functions are functions that are automatically called when "something happens" in HTML. The term "triggered" (or "fired") by an "event" is often used. In Your <head> Since jQuery is tailor made to handle events, it is common to put jQuery code into "event handler" functions in the <head> section of web pages: 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 type="button">Click me</button> </body> </html>
    • In the example above, a click function is defined to handle the click event for the HTML button: $("button").click(function() {..some code... } ) The code inside the click function hides all <p> elements: $("p").hide(); All event functions are defined inside an "event handler" for the document itself: $(document).ready(function() {..some code ..} ) In a Separate File If your website has many pages, and you want your jQuery functions to be easy to maintain, you will soon se the benefit of putting your jQuery functions in a separate code file. Our demonstration scripts are included in the <head> section, but it is preferable to place them in a separate file (refer the file with the src attribute): Example <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my_jquery.js"></script> </head> jQuery Name Conflicts jQuery uses the $ sign as a shortcut for jQuery. Some other JavaScript libraries also use the dollar sign for their functions (like Prototype). jQuery has a method called noConflict() to deal with this. var jq=jQuery.noConflict(), lets you use your own name (like jq) instead of the dollar sign. Conclusion Since jQuery is tailor made to handle HTML events, your code will be more proper and much more easy to maintain if you:  Put all jQuery code inside event handling functions  Put all event handling functions inside the document ready event handler  Put you jQuery code in a separate .js file  Rename the jQuery library if you have name conflicts jQuery Events Here are some examples of event functions you can use in jQuery: Event Function Binds a Function to
    • (document).ready(function) The ready event of a document (when an HTML document is ready to use) * (selector).click(function) The click event of selected elements (selector).dblclick(function) The double click event of selected elements (selector).focus(function) The focus event of selected elements (selector).mouseover(function) The mouse over event of selected elements * (selector) jQuery element selector For a full reference please go to our jQuery Events Reference jQuery Effects Hide, Show, Toggle, Slide, Fade, and Animate. WOW! Examples jQuery hide() Demonstrates a simple jQuery hide() function. jQuery hide() Another hide() demonstration. How to hide parts of text. jQuery slideToggle() Demonstrates a simple slide panel effect. jQuery fadeTo() Demonstrates a simple jQuery fadeTo() function. jQuery animate() Demonstrates a simple jQuery animate() function. jQuery Hide and Show jQuery supports hide and show (HTML elements) with the two functions hide() and show(): 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 callback parameter is the name of a function to be executed after the hide (or show) function completes. You will learn more about the callback parameter in the next chapter of this tutorial. The speed parameter can take the values: "slow", "fast", "normal", or milliseconds: Example $("button").click(function(){ $("p").hide(1000) }) jQuery Toggle The jQuery toggle() function toggles the visibility of HTML elements using the show() or hide() functions. Shown elements are hidden, hidden elements are shown. Syntax: $(selector).toggle(speed,callback) The speed parameter can take the 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) function completes. jQuery Slide Functions - slideDown, slideUp, slideToggle jQuery has the following slide functions: (selector).slideDown(speed,callback) (selector).slideUp(speed,callback) (selector).slideToggle(speed,callback) The speed parameter can take the values: "slow", "fast", "normal", or milliseconds.
    • The callback parameter is the name of a function to be executed after the hide (or show) function completes. slideDown() Example $(".flip").click(function(){ $(".panel").slideDown() }) slideUp() Example $(".flip").click(function(){ $(".panel").slideUp() }) slideToggle() Example $(".flip").click(function(){ $(".panel").toggle() }) jQuery Fade Functions - fadeIn(), fadeOut(), fadeTo() jQuery has the following fade functions: (selector).fadeIn(speed,callback) (selector).fadeOut(speed,callback) (selector).fadeTo(speed,opacity,callback) The speed parameter can take the values: "slow", "fast", "normal", or milliseconds. The opacity parameter in the fadeTo() functions allows fading to a given opacity. The callback parameter is the name of a function to be executed after the hide (or show) 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 function for making custom animations is: (selector).animate({params},[duration],[easing],[callback]) The key parameter is params. It defines the 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 defines the time used to apply the animation. I takes the values "fast", "slow", "normal", or milliseconds. Example <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow") $("#box").animate({width:300},"slow") $("#box").animate({height:100},"slow") $("#box").animate({width:100},"slow") }); }); </script> jQuery Effects - From This Page Function Description (selector).hide() Hide selected elements (selector).show() Show selected elements (selector).toggle() Toggle (between hide and show) selected elements (selector).slideDown() Slide-down (show) selected elements (selector).slideUp() Slide-up (hide) selected elements (selector).slideToggle() Toggle slide-up and slide-down of selected elements (selector).fadeIn() Fade in selected elements (selector).fadeOut() Fade out selected elements (selector).fadeTo() Fadeout selected elements to an opacity (selector).animation() Run a custom animation on selected elements For a full reference please go to our jQuery Effect Reference jQuery Callback Functions Animations create the need for a callback function jQuery Animation Problems
    • Many jQuery functions involve animations. These functions may take speed or duration as an optional parameter. Example: $("p").hide("slow") Speed or duration parameters can take many different values like "slow", "fast", "normal", or milliseconds. Example $("button").click(function(){ $("p").hide(1000) }) Since JavaScript statements (instructions) are executed in a one after each other sequence, statements executed after an animation may create errors or page conflict because the animation is not yet completed. To avoid this situation Callback Functions are introduced. jQuery Callback Functions A callback function is a function that is called after the animations is 100% finished. Typical syntax: $(selector).hide(speed,callback) The callback parameter is the name of a function to be executed after the hide function completes. Example WRONG (Without Callback) $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); }) Example RIGHT (With Callback) $("button").click(function(){ $("p").hide(1000,my_alert); }) function my_halert() { alert("The paragraph is now hidden"); } Conclusion: If you want statements to be executed after a function involving animation, put these statements inside a callback function. jQuery HTML Manipulation jQuery contains very powerful functions for changing and manipulating HTML
    • Changing HTML Content (selector).html(content) The html() function changes the contents (innerHTML) of matching HTML elements. Example $("p").html("W3Schools.") Adding HTML content (selector).append(content) The append() function appends content to the inside of matching HTML elements. (selector).prepend(content) The prepend() function "prepends" content to the inside of matching HTML elements. Example $("p").append(" W3Schools.") (selector).after(content) The after() function inserts HTML content after all matching elements. (selector).before(content) The before() function inserts HTML content before all matching elements. Example $("p").after(" W3Schools.") jQuery HTML Manipulation - From This Page Function Description (selector).html(content) Changes the (inner) HTML of selected elements (selector).append(content) Appends content to the (inner) HTML of selected elements (selector).prepend(content) "Prepends" content to the (inner) HTML of selected elements (selector).after(content) Adds HTML after selected elements (selector).before(content) Adds HTML before selected elements (selector) jQuery Element Selector Syntax
    • For a full reference please go to our jQuery HTML Manipulation Reference jQuery CSS Functions jQuery CSS Manipulation jQuery has 3 important functions for CSS manipulation:  (selector).css(name,value)  (selector).css({properties})  (selector).css(name) CSS Manipulation Examples The function css(name,value) sets a value to a given CSS property for all matching elements: Example (selector).css(name,value) $("p").css("background-color","yellow") The function css({properties}) sets a value to a number of CSS properties (at the same time) for all matching elements: Example (selector).css({properties}) $("p").css({"background-color":"yellow","font-size":"200%"}) The function css(name) returns the value for a named CSS property: Example (selector).css(name) $(this).css("background-color") jQuery Size Manipulation jQuery has 2 important functions for size manipulation.  (selector).height(value)
    •  (selector).width(value) Size Manipulation Examples The function height(value) sets the height of all matching elements: Example (selector).height(value) $("#id100").height("200px") The function width(value) sets the height of all matching elements: Example (selector).width(value) $("#id200").width("300px") jQuery CSS Functions - From this Page CSS Properties Description (selector).css(name,value) Set the value of one style property for matched elements (selector).css({properties}) Set multiple style properties for matched elements (selector).css(name) Get the style property value of the first matched element (selector).height(value) Set the height of matched elements (selector).width(value) Set the width of matched elements (selector) Element selector syntax. For a full reference please go to our jQuery CSS Manipulation Reference jQuery Reference - Selectors jQuery Selectors Selector Example Selects * $("*") All elements #id $("#lastname") The element with id=lastname .class $(".intro") All elements with class="intro" element $("p") All <p> elements .class.class $(".intro.demo") All elements with class=intro and class=demo :first $("p:first") The first <p> element
    • :last $("p:last") The last <p> element :even $("tr:even") All even <tr> elements :odd $("tr:odd") All odd <tr> elements :eq(index) $("ul li:eq(3)") The third element in a list :gt(no) $("ul li:gt(3)") List elements with an index greater than 3 :lt(no) $("ul li:lt(3)") List elements with an index less than 3 :not(selector) $("input:not(:empty)") All input elements that are not empty :header $(":header") All header elements <h1><h2>... :animated All animated elements :contains(text) $(":contains('W3Schools')") All elements witch 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 an href attribute [attribute=value] $("[href='#']") All elements with href attribute value="#" [attribute!=value] $("[href!='#']") All elements with href attribute value<>"#" [attribute$=value] $("[href$='.jpg']") All elements with href attribute value containing ",jpg" :input $(":input") All <input> elements :text $(":text") All <input> elements with type="text" :password $(":password") All <input> elements with type="password" :radio $(":radio") All <input> elements with type="radio" :checkbox $(":checkbox") All <input> elements with type="checkbox" :submit $(":submit") All <input> elements with type="submit" :reset $(":reset") All <input> elements with type="reset" :button $(":button") All <input> elements with type="button" :image $(":img" All <input> elements with type="img" :file $(":file") All <input> elements with type="file" :enabled $(":enabled") All enabled input elements :disabled $(":disabled") All disabled input elements :selected $(":selected") All selected input elements :checked $(":checked") All checked input elements
    • jQuery Trigger Functions Trigger functions trigger events for all matching element. Example: $("button#demo").click() The example will trigger the click event for a button element with id="demo". Function Triggers (selector).blur() The blur event of matching elements (selector).change() The change event of matching elements (selector).click() The click event of matching elements (selector).dblclick() The double click event of matching elements (selector).error() The error event of matching elements (selector).focus() The focus event of matching elements (selector).keydown() The key down event of matching elements (selector).keypress() The key press event of matching elements (selector).keyup() The key up event of matching elements (selector).select() The select event of matching elements (selector).submit() The submit event of matching elements (selector) jQuery element selector syntax jQuery Event Functions Event functions bind a function to an event for all matching elements. Example: $("img").click(function({$("#n10").hide()}) The example code will hide an element with id="n10" when any image is clicked. Event function Binds the function to (document).ready(function) The ready event of a document (when an HTML document is ready to use) (selector).blur(function) The blur event of matching elements (selector).change(function) The change event of matching elements (selector).click(function) The click event of matching elements (selector).dblclick(function) The double click event of matching elements (selector).error(function) The error event of matching elements (selector).focus(function) The focus event of matching elements (selector).keydown(function) The key down event of matching elements (selector).keypress(function) The key press event of matching elements
    • (selector).keyup(function) The key up event of matching elements (selector).load(function) The load event of matching elements (selector).mousedown(function) The mouse down event of matching elements (selector).mouseenter(function) The mouse enter event of matching elements (selector).mouseleave(function) The mouse leave event of matching elements (selector).mousemove(function) The mouse move event of matching elements (selector).mouseout(function) The mouse out event of matching elements (selector).mouseover(function) The mouse over event of matching elements (selector).mouseup(function) The mouse up event of matching elements (selector).resize(function) The resize event of matching elements (selector).scroll(function) The scroll event of matching elements (selector).select(function) The select event of matching elements (selector).submit(function) The submit event of matching elements (selector).unload(function) The unload event of matching elements jQuery Effects Functions Hide / Show Description (selector).show(speed,callback) Show selected elements (selector).hide(speed,callback) Hide selected elements (selector).toggle(speed,callback) Toggle hide and show for selected elements Slide (selector).slideDown(speed,callback) Slide-show selected elements by adjusting height (selector).slideUp(speed,callback) Slide-hide selected elements by adjusting height (selector).slideToggle(speed,callback) Toggle slide-hide and slide-show for selected ements Fade in / out (selector).fadeIn(speed,callback) Fade in selected elements to full opacity (selector).fadeOut(speed,callback) Fade out selected elements to zero opacity (selector).fadeTo(speed,opacity,callback) Fade selected elements to a given opacity Animation (selector).animate(params,duration,effect,callback) Applies a "custom" animation for selected elements (selector).stop() Stops running animations on selected elements (selector) jQuery element selector syntax (speed) Optional parameter. Takes the values "slow", "normal", "fast" or milliseconds. (opacity) Opacity parameter. Takes values from 0 to 1 (like 0.33).
    • (callback) Optional callback function to fire (call) after completion. jQuery HTML Manipulation Functions These functions work for both XML documents and HTML documents. Exception: html() Manipulate Description (selector).html(content) Set the content (inner HTML) of selected elements (selector).text(text) same as html(), but tags will be escaped Getting Contents (selector).html() Get the contents (inner HTML) of the first selected element (selector).text() Get the text content of all selected elements (combined) Adding Content (selector).after(content) Add content after selected elements (selector).before(content) Add content before selected elements (selector).insertAfter(selector) Add selected elements after selected elements (selector).insertBefore(selector) Add selected elements before selected elements Adding Inner Content (selector).append(content) Append content to the inner content of selected elements (selector).prepend(content) "Prepend" content to the inner content of selected elements (selector).appendTo(selector) Append selected elements to the inner content of selected elements (selector).prependTo(selector) "Prepend" selected elements to the inner content of selected elements Wrapping (selector).wrap(content) Wrap selected elements within a content (selector).wrapAll(content) Wrap selected elements into one content (selector).wrap(element) Wrap selected elements inside a new DOM element (selector).wrapAll(element) Wrap selected elements into one new DOM element (selector).wrapinner(content) Wrap selected inner child contents within a content (selector).wrapinner(element) Wrap selected inner child contents within a DOM element Copy, Replace, Remove (selector).replaceAll(selector) Replace selected elements with selected elements (selector).replaceWidth(content) Replace selected elements with new content (selector).empty() Remove all child elements from selected elements (selector).remove() Remove all selected elements (selector).clone() Clone all selected elements
    • (selector) jQuery element selector syntax (content) Content including tags. (text) Text content only. Tags will be escaped. (element) A DOM element object. jQuery CSS Manipulation Functions CSS Properties Description (selector).css(name,value) Set the value of one style property for all selected elements (selector).css({properties}) Set multiple style properties for all selected elements (selector).css(name) Get the style property value of the first selected element CSS Size (selector).height() Get the pixel height of the first selected element (selector).height(value) Set the height of all selected elements (selector).width() Get the pixel width of the first selected element (selector).width(value) Set the width of all selected elements CSS Positioning (selector).offset() Get the pixel offset of the first selected element (selector).offsetParent() Get the parent pixel offset of the first selected element (selector).position() Get the top position of the first selected element (selector).scrollTop() Get the scroll top offset of the first selected element (selector).scrollTop(value) Set the scroll top offset of all selected elements (selector).scrollLeft() Get the scroll left offset of the first selected element (selector).scrollLeft(value) Set the scroll left offset of all selected elements <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(this).hide() }); }); </script> </head> <body> <button type="button">Click me</button>
    • </body> </html> <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 type="button">Click me</button> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $(".test").hide() }) }) </script> </head> <body> <h2 class="test">This is a heading</h2> <p class="test">This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2>
    • <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button type="button">Click me</button> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#test").click(function(){ $(this).fadeOut() }); }); </script> </head> <body> <div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div> <p>If you click on the box above, it will be removed.</p> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide() }) }) </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); }); </script> <style type="text/css"> div.ex {
    • background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } </style> </head> <body> <h3>Island Trading</h3> <div class="ex"> <button class="hide" type="button">Hide me</button> <p>Contact: Helen Bennett<br /> Garden House Crowther Way<br /> London</p> </div> <h3>Paris spécialités</h3> <div class="ex"> <button class="hide" type="button">Hide me</button> <p>Contact: Marie Bertrand<br /> 265, Boulevard Charonne<br /> Paris</p> </div> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>Because time is valuable, we deliver quick and easy learning.</p> <p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p> </div> <p class="flip">Show/Hide Panel</p> </body> </html>
    • <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow") $("#box").animate({width:300},"slow") $("#box").animate({height:100},"slow") $("#box").animate({width:100},"slow") }); }); </script> </head> <body> <p><a href="#" id="start">Start Animation</a></p> <div id="box" style="background:#98bf21;height:100px;width:100px;position:relative"> </div> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").html("W3Schools") }) }) </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").append(" <b>W3Schools</b>.") }) }) </script> </head> <body> <h2>This is a heading</h2>
    • <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").after(" W3Schools.") }) }) </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","yellow") }) }) </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}) }) }) </script> </head> <body> <h2>This is a heading</h2>
    • <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").click(function(){ $("#result").html($(this).css("background-color")) }) }) </script> </head> <body> <div style="width:100px;height:100px; background:#ff0000"></div> <p id="result">Click in the box</p> </body> </html>