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.

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.

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.

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.

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.

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

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

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

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.

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 snapping to a grid, revert to the original position with configurable revert duration, and start, drag, and stop events using callback functions in trackable.

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.

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.

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.

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.

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.

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.

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.

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 submit a form automatically when a select option changes in jQuery, avoiding submission on the default value and showing the selected option.