The Complete jQuery Bootcamp : Build 20 Real Projects!

Learn how the jQuery element selector targets and manipulates page elements, including paragraphs and headings, using the $ symbol and click-driven actions to hide content.

Master the id selector (and class selectors) in jQuery to target a unique element with the hash in the query selector, then use $ to hide it by id.

Learn the class selector in jQuery, which targets multiple elements sharing a class, contrasts with the unique id selector, and enables show-hide interactions via click events.

Learn the star selector to select all elements in the body with jQuery, using a button to show or hide content and apply a style across headings and paragraphs.

Select the current element in jQuery using the dollar function and the ready handler, with a practical example of a button click hiding that element.

Learn how jQuery selectors differentiate ids and classes, target all paragraph elements by a shared class, and hide a specific paragraph with a button click.

Select the first paragraph in jQuery using a simple script triggered by a button click, with document ready and show/hide techniques demonstrated.

Learn to select the first list item from an ordered list and hide it with a button click using jQuery, covering the ready function, list items, and simple selectors.

Learn to select the first list item in every unordered list within the body using jQuery, then hide and reveal first-child items with the dollar selector and basic show/hide techniques.

Learn to use jQuery attribute selectors to target links by href, and implement interactive show and hide effects on click.

Learn to use the button element as a selector in jQuery, implement click events with the $ selector, and apply a function to drive behavior on a sample page.

Learn to create a table from scratch in Dreamweaver, set borders and headers, and apply even and odd row selectors to color alternating rows using CSS.

Learn how jQuery handles events, from mouse and keyboard interactions to form and document events, and explore practical implementations to create dynamic web pages.

Explore the click event in jQuery, attaching a click handler to elements such as a paragraph or button to trigger actions like alerts in a Dreamweaver example.

Learn how the click event in jQuery can be used in multiple ways by selecting elements with selectors, handling document ready, and applying hide and show effects.

Discover how to implement the double click event in jQuery, and how it differs from a single click, with a practical paragraph-based example using document ready and hiding content.

Explore how the bind event in jQuery attaches one or more handlers to elements, specifies the function to run when a click occurs, and shows alert examples.

Explore the blur event in jQuery and how losing focus triggers actions such as alerts on form inputs. Implement focus and blur interactions to enhance user-friendly forms.

Explore the jQuery focus event, which triggers when an element gains focus, and learn its syntax with $(selector).focus(...) through a practical form example using input and password fields.

Learn how to use the focus event to selectively disable a text box and manage input states with a short jQuery example.

Master the focus event in jQuery by dynamically changing input background colors in a sample form, including name and password fields, to enhance user focus and interactivity.

Learn to use the select event in jQuery to detect text selection in input fields and display a timed message. Create a simple two-input example with a fading notification.

Explore how the change event in jQuery handles value changes in select boxes, text boxes, checkboxes, and radio buttons, and how it shows the selected value with immediate feedback.

Learn to handle the change event for a multi-select in jQuery, capturing multiple selected options and displaying the combined values on the page.

Learn how to use the submit event in jQuery to handle form submission, trigger alerts on success, and validate fields with if conditions for reliable form behavior.

Learn how the keydown and keyup events in jQuery respond to keyboard input, binding functions to keys to change the background color and enhance interactive forms.

Explore the keypress event in jQuery, which tracks keystrokes in a text box, updates a span, and counts key presses with a loop.

Harness the jQuery mouseenter event to trigger actions when the mouse enters a DOM element, using an event handler to display messages or alerts and enhance the user interface.

Learn how to use the mouseenter event to highlight elements by changing background color with jQuery. See how mouse interactions on a paragraph attract attention and enhance UI feedback.

Learn the mouseleave event in jQuery: attach a handler to an element, display a message when the cursor leaves, and fade it out after a delay.

Learn how the hover event in jQuery combines mouseover and mouseout to trigger actions on enter and exit.

Learn to implement the hover event with multiple effects in jQuery, including fade in and fade out on list items and form elements, using append, mouse leave, and simple styling.

Learn how to use the mousedown event in jQuery by defining a handler on an element, triggering on left-click, with a simple example using alert and a fade-out effect.

Learn how mousedown and mouseup events interact to color a line red on press and green on release using jQuery and basic DOM scripting.

Explore the mouseup event in jQuery, triggered when the left mouse button is released on a selected element, with examples using ids and classes and showing messages.

Explore how the jQuery mouseover and mouseout events trigger visual feedback on web elements, using the dollar selector and document ready to change background colors and attract user attention.

Explore jQuery mouseover and mouseout events to reveal messages and style two nested boxes with CSS, creating an interactive navigation-like demo that updates text on hover.

Explore the jQuery mouse out event, its syntax, and how it fires when the mouse leaves a selected element or its child elements, contrasting it with mouse leave.

Learn how the load event in jQuery fires when an image finishes loading and how to handle missing images with a fallback message, demonstrated with code.

Explore how the unload event in jQuery fires when users navigate away, reload, or close the page, and how to attach an event handler with a simple example.

Explore how the delegate event in jQuery attaches one or more event handlers to child elements of a selected parent, enabling handling for both current and future elements.

Explore the on event in jQuery through simple and multi‑purpose examples that attach multiple event handlers, hide content on click, and change background colors on mouse enter and leave.

Explore jQuery effects, including display, fading, and sliding animations. Learn how to show, hide, toggle, fade in/out, and slide elements with selectors and events.

Demonstrate the hide effect in jQuery by using the hide method with optional speed, easing, and a callback to hide elements on a button click.

Explore what a user interface is, its visual role, how users interact with software through command line, menus, and graphical interfaces, and abstraction and the background process.

Discover jQuery UI, a free, open-source JavaScript library and mobile-first framework that enables faster, easier web development with animated visuals and UI plugins—the second most popular library on the web.

Explore jQuery UI features, including draggable,Resizable, selectable, and sortable plugins, and widgets like datepicker, dialog, tabs, progress bar, and slider, with open source, cross-browser support, and good documentation.

Explore how to implement draggable elements in jQuery with default functionality, configure options like disabled and distance, and control drag behavior through the options method.

Explore the three key options for draggable elements—disable, delay, and distance—and see how to implement them in a sample html/js setup, including ids, spans, and script syntax.

Discover how to use the advanced helper option in draggable to duplicate elements, create a clone effect, and customize the clone’s style with jQuery.

Learn how to retrieve the value of the current option in a jQuery context, trigger a popup on click, and validate with alert messages.

Learn how to use actions in jQuery draggable to control behavior, including how actions differ from options and how to disable, enable, or destroy elements with parameterized strings.

Explore droppable options with default functionality to control drag-and-drop behavior, including options, parameters, and how elements drop into specified targets.

Discover the three most important droppable options and learn how to implement drag and drop with tolerance and disable settings in a practical, step-by-step example.

Explore draggable and droppable interactions in jQuery, learn how accept and scope options govern what items can be dropped, and see practical demonstrations across cricket, football, and tennis examples.

Explore how to implement droppable interactions in jQuery by applying active and droppable classes, configuring drop behavior, and displaying a message when content is dropped at the target location.

Master the second method of droppable actions in jQuery, using disable and destroy to control or remove drop functionality with class or id selectors and JavaScript.

explore jQuery UI droppable events, including activate, drop, and out, with a hands-on code example that demonstrates drag interactions, tolerance options, and live feedback messages.

Learn how to apply jQuery UI's resizable to any element, using id or class selectors, and configure options like ghost helper, delay, distance, and auto-hide for a smooth resize.

Learn to configure the jQuery UI resizable feature with animate and ghost options, observing animated resizing and a semi transparent ghost during drag.

Identify and implement distance, delay, and auto hide options for the resizable component, including a practical example with code that auto hides the handle after a delay.

Explore the resizable method and its options, including distance delay and the also resize option, to resize multiple elements together via two IDs.

Demonstrates how the resizable method in jQuery works, with actions such as disable, enable, and destroy to manage resize behavior.

Explore the jquery ui selectable feature to select items individually or in groups, using selection or control buttons, while configuring options like delay and filters and styling selected versus unselected.

Understand how to configure the selectable method with delay and distance options, using a Dreamweaver example to start selection after thousand milliseconds or a hundred-pixel drag and reduce unwanted selections.

Learn to use the selectable action method to perform actions on selectable elements by passing an action string, enabling, disabling, or destroying selectability, and configuring options.

Explore using the jQuery UI selectable's selected event with index values to map chosen items and update the display. Style the list and leverage id and class attributes, tracking indices.

Learn how to implement sortable with default functionality in a list using jQuery, enabling drag-and-drop to reorder items with axis options, placeholders, helpers, and related settings.

Learn to use delay and distance options in sortable to control drag timing and movement, with hands-on examples showing 200 ms delay and 100-pixel distance.

Explore implementing the placeholder option in sortable lists, using the highlight class to indicate the drop target and styling with borders, background, and font changes, in a Dreamweaver example.

Learn advanced sortable features in part-3 by implementing connect with and drop on to create an interactive drag-and-drop roster across teams, with styling and options.

Explore the sortable actions in the jQuery bootcamp, including disable, enable, destroy, and cancel, and learn how to serialize the sorted order and capture item ids.

Learn to use events in the sortable method with jQuery, including start, stop, and receive, and connect two lists for sortable interactions.