Learn jQuery - For Beginners

Discover how JavaScript libraries simplify coding by using the jQuery library for DOM and CSS manipulation, effects, animations, and Ajax, and learn why major companies rely on it.

Embed the jQuery library into a web page by loading the latest version from Google's CDN and inserting the script tag in the head of your html.

Learn how jQuery uses the dollar sign to select elements, nest methods, and run code on document ready. Create a script that hides paragraph text with a button click.

Master the jQuery id selector by assigning an id to a target element and using #id in your script to hide only that element when a button is clicked.

Learn jQuery basics by converting an id selector to a class selector, replacing the pound sign with a period to hide the heading, matching the previous exercise.

Explore jQuery selectors beyond id and class, including the universal asterisk selector and this selector, and see how to hide elements with the button selector.

Create a new file named jq_functions.js, paste the function into it, save changes, and call the script from the main HTML document to verify it works.

Learn how jQuery events respond to user actions on an HTML page, including clicks, hovers, and page loads, and see how a click hides text or double click changes behavior.

Demonstrates how jQuery mouseenter and mouseleave events trigger alerts as the cursor enters or leaves a paragraph element, using document.ready and an id selector in code.

Learn how jQuery handles mousedown and mouseup events to trigger actions, such as alerts, on the element with id p1 when the mouse is pressed and released.

Discover how to attach multiple jQuery events to a paragraph, changing color on mouse enter to yellow, on mouse leave to pink, and on click, via a document ready function.

Learn jQuery - for beginners shows how to hide and show paragraph text with click events on two buttons, #hidden and #visible, using a 1000 millisecond duration to toggle visibility.

Toggle an element with a toggle button using a click event to hide and show a paragraph over one second (1000 milliseconds), demonstrating the toggle action in jQuery.

Learn to use jQuery to fade in divs on a button click with staggered intervals and the fade out counterpart, by adjusting display none and time delays.

Learn to implement a jQuery fade toggle to show and hide elements with a button. Use fadeToggle for divs and restore display none to keep elements hidden on page load.

Learn to use jQuery’s fadeTo method to fade elements to a target opacity, as four blue square divs demonstrate fading from 20% to 80% over one second.

Learn jQuery basics for beginners by clicking the top bar to slide down a hidden panel with text, using a 1000 ms animation.

Use the jQuery slide up method to move an element upward. Remove the display none prop and show the panel on load; clicking the view panel div slides it up.

Learn how to use jQuery slideToggle to switch a panel between slide up and slide down, by updating the script and previewing in the browser.

Learn to create custom animations with the jQuery animate method by moving a square from left to right on a start animation click, using absolute positioning and a 1-second duration.

Extend the jQuery animate method by adding multiple parameters to adjust position, opacity, and height; save and preview to see opacity and height toggle to zero.

define width and height relative to the element’s current size using the estimate method, scaling or contracting by a relative amount such as 200 pixels, then preview in the browser.

Learn how to build a sequence of animations with jQuery animate calls using queue functionality. See a square div animated four times, changing height, width, and opacity on click.

Discover how the jQuery stop method halts animations—sliding, fading, and custom effects—before completion. See practical examples with start and stop buttons controlling a blue square, moving left 800px in 300ms.

Understand how jQuery callback functions ensure one action runs after another, preventing simultaneous animations. See an example where hiding an element triggers an alert only after the height animation finishes.

Master jQuery chaining by triggering slide up, color change to red, and slide down on the same element after a button click.

Learn to create draggable elements with jQuery UI, a widget and interaction library built on jQuery, by enabling a blue 150 by 150 div in a document ready script.

Create an accordion menu with jQuery and jQuery UI by placing headings and panels inside a div id accordion and applying the accordion method in document ready to enable expand/collapse.

Explore jQuery basics by retrieving element content with text and html methods. See how two button clicks reveal the paragraph text as plain text and as html markup via alerts.

Learn to retrieve an input’s value in jQuery with the val() method. Click the Get value button to alert name from an input with id name set to John Smith.

Learn how to use the jQuery attr method to retrieve attribute values, such as a link's href, by clicking a button and displaying the result in an alert.

Explore how to set content with jQuery using text, html, and val methods by wiring three buttons to update text 1, text 2, and the name input.

Learn to use the jQuery attr method to set and change an element’s href. A button click updates the link from excel.com to a new url, visible on hover.

Learn how jQuery append and prepend manipulate page content by appending text to a paragraph and adding a new list item to an ordered list via button clicks.

Learn to use jQuery before and after methods to insert content around an image by clicking two buttons with IDs button1 and button2.

Explore jQuery remove and empty methods that delete elements and their contents. See a button click remove a div and its contents, while empty clears only the element's contents.

Click the remove button to delete paragraphs 2, 3, and 4 using jQuery's remove method with filters REM 1 and REM 2.

Learn to use the add class method to apply red to headings and paragraphs and to apply big and red to divs, creating red text and bold, extra large lines.

Remove a class from h1, h2, and paragraph elements with jQuery by replacing add with remove and updating the button label to reflect the change.

Learn to switch between adding and removing classes with the toggle class method, replacing remove class with toggle class, and using the same button for add and remove class events.