Learning 200 jQuery Functions with 800 Examples

Keep javascript separate from html by using an external jQuery file and linking it with a script tag, then attach a click handler to a paragraph by its id.

Learn how to use the document ready event in jQuery to fade in a hidden message on page load, and wire up initialization and external scripts for dynamic content.

Discover how to use jQuery's document ready and ready handler to run code as soon as the DOM is ready, including creating an external JavaScript file and including it.

Build a jQuery font size switcher that uses selectors and event handlers to increase or decrease paragraph font sizes via bigger and smaller links.

Learn how to enable a submit button after selecting a file using jQuery by listening to the file input's change event and toggling the disabled attribute.

Explore the jQuery click and double-click events by building an inline javascript free page that shows and hides elements, handles events, and reveals a dynamic menu on double click.

Learn how to handle key up and key down events in jQuery, updating text as you type, and use change events on a select element to display the selected value.

Master the submit event handler in jQuery to process a newsletter sign-up form, perform front-end email validation, and display feedback. Then explore toggle and hover event handlers with practical examples.

Create a text area and use the jQuery scroll event to provide dynamic feedback, displaying the current scroll position as users move through the content.

Demonstrate how to use the select event handler with a textarea to detect and respond to user text selection, updating feedback in a span via a simple jQuery setup.

Learn to use jQuery focus in and focus out to show and hide text for form fields, compare with click events, and manage event handlers while avoiding duplicate code.

Explore the bind event handler in jQuery for mouse enter and mouse leave, using toggleClass to efficiently apply or remove a bold class on hover.

Learn to build a dynamic character counter for a textarea using jQuery, with a max length, a live characters remaining feedback div, and front end validation.

Toggle a message div to hide and show with a link, while dynamically updating the link text from hide to show using jQuery toggle and event handlers.

Learn to build a hover description box with jQuery by attaching a hover text attribute to elements, tracking mouse movement, and displaying a styled box that follows the cursor.

Apply a hover over effect with jQuery by updating a hover text div on mouseover, positioning it near the cursor, and hiding it on mouseout, reusable across elements like images.

Learn to use the jQuery html method to copy content from a source paragraph to a target paragraph via a copy button, preserving HTML tags.

Learn to fetch user input and attributes with jQuery using val and attr, then display results with text, and enhance by adding, removing, or toggling via addClass, removeClass, and toggle.

Demonstrate toggling classes and managing attributes with jQuery, including highlight and bold styles, and enabling or disabling a button via a checkbox using the remove attribute.

Explore the jQuery each function as it traverses text inputs, combines their values, and updates the page, with a simple validation example to ensure all fields are filled.

Explore jQuery traversal techniques by using first, last, next, nextAll, prev, and prevAll with find, and apply dynamic menu visibility with toggle and show on selected elements.

Explore jQuery find and query selectors to enlarge strong text to 120 percent, traverse lists with has and length checks, and use show, hide, and callback effects.

Learn how to implement fade in, fade out, and fade toggle effects with jQuery, targeting elements by id, using ready, speeds, and callbacks to reveal or hide content.

Learn how to master stop and slide toggle to pause jQuery animations with start and stop buttons, and use delay to chain fade out and fade in with mid-sequence pauses.

Create a jQuery gallery fading effect by fading a clicked image to 0.4 opacity with fadeTo, and reveal it on hover, excluding the current image with a not selector.

Learn to clone elements in jQuery and append the clone to the end of a paragraph, placing the copy there instead of moving the original.

Learn to retrieve and apply the height and width properties in jQuery to measure any element, including the document and the window. See how to resize divs and images based on window size, ensure integer results, and use height and width for reliable, dynamic layouts.

Showcases how to obtain the current scroll top value of a text area and reflect it in a live feedback area via a scroll event.

Center a div in the window using width, height, and absolute positioning. Update its top and left on window resize by subtracting half the object's dimensions.

Learn to enforce minimum text lengths on fields with jQuery using focus, blur, and keyup events, displaying a dynamic 'characters required' message that hides when met.

Learn to implement a smooth go-to-top feature with jQuery by assigning a top class to links, handling clicks, and animating the page scroll to the top.

Learn to enable a checkbox by scrolling to the bottom of a terms text area with jQuery, using height checks and scroll top to remove the disabled state.

Discover how to use the inArray utility in jQuery to check if a value exists in an array, and interpret its index or minus one in front-end code.

Learn how to use the each utility to loop through arrays, insert values with push, and display results on the page using a dynamic form and click handling.

Learn to use jQuery to compute days until a future event by retrieving the current time, calculating the difference with a specified event time, and updating the page.

Learn to use a jQuery ajax load to insert a page into a div with a load button. The lesson covers loading HTML or PHP content and image header considerations.

Explore how to perform ajax-like get and post requests with jQuery to send data to a PHP file, reverse a string, and update the page without refreshing.

Explore jQuery ajax load and synchronous ajax requests by loading content into a div via a button, handling success, error, and complete callbacks, and managing status codes like 404.

Learn to build an email validation form using jQuery and AJAX with a PHP backend, including focus and blur events and live feedback.

Learn to validate email addresses via AJAX and PHP by posting data, using the filter validate email, and returning results to an email feedback span for live feedback.

Update database table values with jQuery and Ajax by posting to a PHP page using a user id in a where clause, updating fields with a loading indicator and confirmation.

Discover how to search for, install, and use jQuery plugins, compare descriptions and versions, and avoid conflicts while keeping pages lean and maintainable.

Create a basic jQuery plugin that applies target blank to all links via a selector, demonstrates plugin structure with the dollar alias, and tests behavior in the browser.

learn how to install a jQuery highlight plugin, set up a search form, and dynamically highlight matching terms across the page while removing prior highlights.

Learn to build a jQuery countdown plugin with options (from) and a callback triggered at zero, enabling actions such as alerts or page navigation.

Create a hover text plugin using jQuery that reads the link title attribute to display a positioned tooltip div, styled with css, and applied to all links on the page.

Learn to create a hover plugin that tracks the mouse position using clientX and clientY, updates a div's top and left to follow the cursor, and manage visibility and tooltips.

Learn to build and debug a hover plugin in jQuery by handling mouse in and mouse out, manipulating the title attribute, and applying plugin settings such as fade in.

Learn to build a jQuery countdown plugin that accepts a date string, converts it to a timestamp, and continuously updates days, hours, minutes, and seconds in the target elements.

Create a jQuery countdown timer plugin that updates days, hours, minutes, and seconds using setInterval, adds leading zeroes, validates numeric input, and fires a callback when the date arrives.

Discover how jQuery UI provides abstractions for interaction, animation, and widgets built on jQuery, and explore rich effects like dragging, calendars, and progress bars.

Install the latest version of jQuery UI compatible with jQuery 1.3.2 onwards by building a custom download, extracting the zip, and including the UI file to enable draggable interactions.

Master the draggable interaction with the jQuery library, configure axis constraints and containment, and respond to drag start, move, and stop events including cursor, grid, opacity, and revert options.

Explore draggable interactions with containment options, including window vs document boundaries, and practical examples using a 200x200 div, with coordinates, cursor, opacity, and grid snapping.

Explore draggable interactions with snapping to a grid, revert to the original position with configurable revert duration, and start, drag, and stop events using callback functions in trackable.

Explore how to implement droppable regions with jQuery UI by configuring accept criteria, enabling drag and drop between named items, and handling hover, drag, and drop events.

Create a sortable list with jQuery to enable drag-and-drop and cross-list interaction. Configure containment, tolerance, cursor, revert, and opacity to refine the sorting behavior and visual feedback.

This lecture shows how to connect two sortable lists with the connect with option, implement update events to track and display the new order in a jQuery sortable setup.

Learn the resizable interaction in jQuery UI by creating a 100x100 box, applying resizable, and constraining it with a parent container to explore containment and sizing.

Explore advanced resizable interactions in jQuery UI, enabling animated resizing with ghost previews, custom durations and easings, aspect-ratio constraints, auto hide handles, and grid snapping.

Master resizing elements with a snapping 50 by 50 grid, enforce minimum and maximum width and height, and tailor handles by direction for edge-accurate dragging.

Explore the jQuery accordion widget, learning how headers reveal content and how to customize behavior, icons, and sizing by applying the widget to a content div.

Explore accordion customization with fill space, fixed height, and icon options for headers, plus hover and click events, collapsable behavior, and active panel controls.

Learn to bind a date picker to an input field in jQuery, show the widget on click, and auto-insert the date into the field. Explore date formats and localization.

Create a jQuery UI dialog that opens on a button click, using a div to show content and set title and text via attributes, with an OK button to close.

Bind title and text in a reusable jQuery dialog using the text function, then customize with the dialog widget—buttons, close on escape, draggable, and resizable options.

Explore jQuery UI dialog enhancements with animations, modal behavior, background effects, and flexible positioning options, including top, bottom, center, and coordinate-based placements.

Learn to implement a jQuery progress bar widget from 0 to 100 with a start button, live percentage display, and setInterval-driven progress.

Demonstrates implementing a progress bar using a 50 ms setInterval to increment a value, update the bar and percentage, and clear at 100 to save resources.

Implement a jQuery slider on a page and display its value in a div, while configuring min, max, and step options for currency-like ranges such as pounds.

Learn to implement a jQuery UI slider with single-value and range modes, configure orientation and steps, and use stop events for practical tasks like price ranges and donations.

Learn to build a tabs interface with the jQuery UI tabs widget by structuring divs and links, wiring content panels, styling with CSS, and loading external content via Ajax.

Configure tabs with ajax options to load content into a target area, handle could not load page errors, and enable mouse over, collapsible, and sortable tabs on the x axis.

Learn to make tabs sortable, target specific tab elements, and persist the active tab with a cookie option and expiry time, using jquery ui and the cookie plugin.

Create a simple drag and drop list by dragging items from an unordered list into a target div, appending their text with jQuery and styling with CSS.

Drag and drop items into a targeted list, using a hover border change and item class filter. Start the drag to capture text, then drop to append it.

Create a dynamic username checker that validates availability as you type, via an Ajax post against the users table, with a loading indicator and real-time feedback.

Check username availability by querying users table for a count of matches, ensuring non-empty input and escaping to prevent SQL injection, and return available or taken according to the result.

Trigger a sliding down message on a button click using jQuery, showing user settings updates with a notice div styled to overlay content.

Learn to create a reusable slide notice in jQuery that displays messages on button clicks, slides down with animation, delays, and slides back up, using headers and CSS styling.

Explore building a dynamic countdown to redirect using jQuery and JavaScript. Learn to set a one-second interval, update a page element, and redirect when the counter reaches zero.

Initialize a javascript countdown with jquery, set the starting time in the counter, update it every second, clear the interval when time reaches one, and redirect with window.location.

Create a dynamic content loader using AJAX and jQuery's load function to fetch external pages into a content area with a fade-in effect when menu links are clicked.

Enable ajax content loading with a fade effect by wiring a jQuery script that reads the clicked link’s href from the menu_top class and loads content into content area div.

Load content into a content area div via a lightweight ajax call using jQuery, loading home, portfolio, and contact pages from the menu. Hide before loading to enable fade.

Build an instant search experience with jQuery and AJAX that queries a MySQL database as you type, returning and filtering matching places in real time.

Master instant search with a keyup event on the search input and a jQuery post request using a search term. Learn to display results in a div via a callback.

Extend the instant search with dynamic plural suffix logic and real-time results messaging in jQuery, echoing the search term and the number of results, and displaying place names and descriptions.

Learn how to build a simple chat-style online users app with jQuery document ready, window handling, and a database backend that updates the user list every 500 ms.

Develops a live users online sample app using jQuery. Prompts for a username, sends it to a database, periodically fetches the user list, and removes the user on unload.

Extend the users online sample app by posting with three parameters and a callback, fetch usernames from the database, and display the user list in the users online div.

Shows a live users online sample app using jQuery to add, relay, and delete usernames via ajax, with onload and window close handling, and input sanitization considerations.

Create a dynamic, multiple file upload form with add more functionality, using input type file fields that can be added on demand, and manage file inputs with jQuery selectors.

Learn to implement multiple file uploads with jQuery by dynamically prepending new file inputs, naming them file_1, file_2, and handling backend processing for uploaded files.

Create a div that follows you down the page with absolute positioning using jQuery, and hide it on click. Style it with CSS to fix it to the page edge.

Initialize on document ready, then create a follow div that fades in and updates its top CSS with the window scrollTop to track scrolling via jQuery.

Create a follow-along div using jQuery that tracks scrolling by updating its top value from the page scroll, staying 10 pixels from the top, with a click-to-hide fade.

Learn to build a textarea emoticon inserter with jQuery, using buttons to insert emoticons into a comment and keep focus and spaces correct as you type.

This lecture shows using jQuery to create emoticon buttons that insert emoji codes into a textarea, covering document ready, event handlers, and appending button values with spacing.

Learn to build a text area emoticon inserter with focus management, whitespace trimming, and dynamic spacing using jQuery utilities, delivering a fluid, user-friendly typing experience.

Learn to append a show password checkbox after every password input with jQuery, assign a change event to reveal the password, and ensure cross compatible behavior across all password fields.

Demonstrates how to toggle a password field to plain text using jQuery by swapping input types, while preserving attributes and user-entered values.

Learn to implement a show-hide password feature in jQuery by toggling input type between password and text, using a ternary condition and DOM replacement while preserving max length across fields.

Learn to submit a form automatically when a select option changes in jQuery, avoiding submission on the default value and showing the selected option.