JQuery Bootcamp 2021

Discover how jQuery simplifies JavaScript, enabling you to build interactive web elements with short code. Practice with the resource files to create menus and image sliders and enhance page visuals.

Install notepad++ to edit javascript files using this editor, download for free. Save files with the correct extensions to render and execute code.

Learn how to check and update your web browser to ensure JavaScript and web features work correctly, with practical steps for Chrome, Firefox, and other browsers.

discover how to set up the jquery library by downloading the compressed javascript file and attaching it with either an external script reference or an inline script on your page.

Learn how to display text on a web page using alert and document.write, and view results in the browser console, developer tools, and console output.

Learn how to select a div with jQuery, use the text() function to set and get text inside elements, and display it with an alert after the document is ready.

Learn how to use the built-in browser debugger and console to identify errors, inspect code in sources, and locate line numbers across Chrome and Firefox.

Learn how to use comments in JavaScript to explain code and prevent execution of dead code. Discover single-line and multi-line comments, their syntax, and how browsers treat commented text.

Learn what a variable is and how to declare, name, and initialize it in JavaScript. Explore assignment, concatenation, and printing values with alerts and text.

Learn about the boolean data type, which has two values: true and false, indicating whether a condition is true. Discover how to declare boolean variables and assign true or false.

Learn to perform addition, subtraction, multiplication, and division with variables x, y, z; understand operator precedence and parentheses to control evaluation and print results.

Explore the assignment operator by assigning values to x, updating x with x plus y, and performing subtraction, multiplication, and division to store results.

Learn how increment and decrement operators work in jQuery, including pre- and post- forms, to increase or decrease values and control when the new value is used.

Learn how if-else statements evaluate conditions using comparison operators, handle true and false branches, and control code with alerts and print statements.

Explore how to use comparison operators in conditional statements, including greater than, less than, equal, and not equal, plus the difference between equality and assignment in code.

Explore how logical operators in jQuery control condition logic, combining multiple comparisons with and, or, and not to execute code when criteria are met.

Learn to use the ternary operator to return values based on whether x is greater than 4, with examples of true and false outcomes.

Learn to define and call functions as blocks of code that perform tasks, accept arguments, and print or manipulate values for reuse.

Explore functions by declaring with three arguments a, b, and c, handling a variable number of arguments, returning sums, and printing results via alert or the page.

Learn how objects represent real-world items with properties and methods, create objects in code, access and update properties, add new properties, and delete them as needed.

Learn how to create and call methods within objects. Access and modify properties with this, pass arguments, and explore property deletion, updating values, and string concatenation.

Explore the difference between local and global variables and their scopes in JavaScript, including how local variables stay within function boundaries while global variables are accessible across the page.

Learn to define strings with double or single quotes and manage quotes inside. Master concatenating strings with the plus operator and plus-equals to build strings from variables and spaces.

Learn to convert numbers and booleans to strings and see that the original values stay unchanged. Use the length property to measure strings and indexOf to find character positions.

Learn string manipulation in jQuery: extract parts with substring, replace text leaving the original unchanged, convert case with toUpperCase or toLowerCase, and join strings or read a character with charAt.

Learn how to work with numbers in jQuery: determine not a number with isNaN, format decimals with toFixed, and retrieve or convert values using valueOf and basic numeric operations.

Explore how to convert strings to numbers in jquery using number() and parse methods like parsefloat. Learn how integers, decimals, booleans, and not-a-number results behave.

Learn to perform math tasks with the Math object: generate random numbers, compute min and max, and use floor, ceil, and round to manage decimals and nearest integers.

Learn to obtain the date using JavaScript by creating a Date object and printing it. See how GMT, pacific time, eastern time, and 1970 epoch affect date formatting and milliseconds.

Learn to format dates and times using international standards, including year-month-day formats, long and short date forms, and time components with UTC and GMT time zones.

Create a date object, convert it to a string, and display it. Convert dates to milliseconds since 1970 and parse them back to dates.

Learn to work with the JavaScript date object, convert dates to strings and numbers, and extract year, month, date, minutes, hours, seconds, and milliseconds for formatting.

Explore jQuery date methods part 3 to set full year, date, and month, adjust minutes, seconds, and milliseconds, and convert dates to milliseconds since 1970.

Learn to compare dates in jQuery by creating date variables, assigning values like 2016 and 2020, and using comparisons to identify the greater date.

Practice using setInterval in jQuery to execute a function at a millisecond interval, display the current time in milliseconds, and stop after a condition such as i reaches three.

Learn to create arrays with square brackets to store multiple values, access them by zero-based indices, print or update specific values, and add more values as needed.

Explore array methods in this lecture: pop removes the last element, push adds to the end, shift removes the first, and unshift inserts at the start, highlighting index changes.

Explore array value search with indexOf, which returns the index or -1 if not found, and learn to trim spaces from strings using the trim function.

Explore array methods in jQuery bootcamp 2021, including getting the length, deleting elements by index, sorting alphabetically, reversing, slicing, and joining values.

Demonstrate the switch statement by mapping numeric marks to grades using cases, break, and default, and explain handling unmatched inputs.

Learn how the for loop repeats code using a counter, conditions, and increments, printing outputs, appending text to a div, and experimenting with starting points and termination.

Iterate from index 0 to the last index using a for loop, printing each value of the array on a new line.

Learn how to use the for-in loop to print all properties of an object, using a person object to show accessing each property and printing its value without hardcoding.

Master the while loop by initializing a counter, testing i < 5, and incrementing each iteration to repeat the code until the condition fails, with alert output and string concatenation.

Explain how to print array elements with a while loop by initializing an index at zero, iterating while the index is less than the array length, and printing each value.

Explore the do while loop: it executes at least once and checks the condition at the end, increments i, and repeats until i reaches five.

Explains break and continue statements in loops and switches, showing how break ends a loop when i equals three, and how continue skips an iteration in a for loop.

Learn how to use the typeof operator to determine the type of any value, including strings, numbers, booleans, objects, arrays, functions, undefined, and special cases like NaN.

Master element selectors with jQuery bootcamp techniques for selecting divs, headers, paragraphs, images, and iframes, and learn methods to hide and manipulate page elements using concise selectors.

Master id and class selectors in jQuery to selectively target elements, hide or reveal content, and practice selecting all elements in the body using static selectors.

Apply jQuery first and last selectors to divs, lists, and paragraphs, using first-child and last-child to target elements. Learn to hide or reveal them with tag, id, and class selectors.

Learn to use header selectors in jQuery to style all heading elements and set a 16 pixel font size. Style specific headings and try an empty selector for edge cases.

Master the jQuery empty selector to identify and style empty elements, like empty list items and paragraphs, and prep for advanced selectors and events.

Use the not selector to exclude elements from selection, applying styles to divs while omitting paragraphs, and fine-tune lists and empty items with comma-separated exclusions.

Explore jQuery's hidden and visible selectors to target elements by visibility. Learn to apply display none and show techniques on divs, paragraphs, and spans.

Learn to use the has selector in jQuery to target elements containing specific children, validate structure, apply styles, and insert or append text.

Gain hands-on with jQuery form selectors to target text fields, password fields, checkboxes, and radio buttons; apply colors and show or hide elements to preview changes.

Explore form selectors and button handling in jQuery bootcamp 2021 by targeting submit and reset buttons, using single and multiple selectors, and applying styles and behavior.

Explore how to handle file uploads and image fields with form selectors in jQuery bootcamp 2021, creating input file, selecting files, and applying styles to form elements and images.

Learn how attribute selectors target elements by attributes such as href, title, and disabled, and apply styles to inputs, selects, and checkboxes using type-based selectors.

Apply attribute selectors to style inputs, buttons, and images by type equal to text and other attributes, including empty fields and file inputs.

Learn to use attribute selectors to target links by href, id, and title. Apply styles based on attribute values to all matches or a specific element by id.

Master multiple selectors in jQuery by using commas to apply the same styles to elements, ids, and attributes across divs, paragraphs, inputs, and anchors.

Learn how to use the click event in JavaScript to toggle visibility by clicking hide and show buttons, manipulating a paragraph with id selections.

Learn how to use the double click event in jQuery to toggle visibility of elements, using div selectors, selecting and deselecting the clicked div, and applying show and hide logic.

Learn how to use mouse enter and mouse leave events in JQuery bootcamp 2021, applying hover effects to a div and triggering alerts and notifications on enter and leave.

Demonstrate mouse over/out events in a styled div, triggering alerts and text changes as the user hovers and clicks, within a jQuery context.

Demonstrate handling mouse up and mouse down events on a button, update on-screen text, and observe how clicks trigger event handlers and text changes.

Learn to implement the mousemove event to track a div and display the cursor's x and y coordinates using the event object's clientX and clientY, with optional pageX and pageY.

Explore the hover event in jQuery by attaching enter and leave handlers to elements and creating or removing visual effects.

Explore chaining in jQuery by applying multiple events to a single selector, such as mouseenter and mouseleave, and see how event order affects behavior.

Explore keyboard events, including key down, key up, and key press, and observe form focus and submission events that update text in fields.

Explore focus and blur events in forms by watching how focusing a field and clicking outside blurs it, and observe how submitting the form can change field values.

Explore focus in and focus out events, learn how to apply focus to a div and its child elements, and preview handling the upcoming change event.

Learn how the change event detects input and select value changes, updates text in spans, textareas, and prints different text based on selections.

Learn to use the select event in jquery to capture values from input fields and textareas, handle text selection, and apply the event to form submissions.

Explore the submit event in jQuery by creating a simple form, submitting it, and displaying submitted text in an h1 heading, with beginner-level event handling and page updates.

Explore the resize event in jQuery to detect window size changes and apply styles, such as turning the body red, with proper placement before the closing body tag.

Learn how to use the scroll event on a textarea to capture scrollTop and display the current scroll position in a span, with initialization on page load.

Learn to handle the bottom scroll bar by applying scroll left to position elements from the left and display the scroll left value in a text span.

Apply multiple event handlers to elements using jQuery, including click, double click, and focus, and learn how to attach them with a single on call and run corresponding functions.

Learn to implement multiple jQuery event handlers, including click and double-click, display alerts, and update span text to reflect user interactions.

Learn how to use jQuery's off event handler to remove and move events, with practical examples on a paragraph and a button demonstrating dynamic event management.

Learn to use the one-time event handler in jQuery with the .one method to trigger an alert on a single click, and apply it to paragraphs or buttons.

Learn to hide and show elements with jQuery, control durations with slow, fast, or milliseconds, and use a callback function to run code after each animation completes.

Learn how to toggle effects with a single button in jQuery, mastering hide and show, animation speeds, and callback functions to run code when the toggle completes.

Explore how to implement jQuery fade in and fade out effects, control speed with slow, fast, or specific milliseconds, and use callback functions to run actions on completion.

Apply chaining in jQuery event handling to fade elements in and out with configurable delay and speed, reuse the same effects on multiple selectors, and use callbacks and toggle.

Learn the jQuery fade toggle effect by fading a paragraph in and out with a button click, adjusting speed in milliseconds and using an optional callback function.

Explore using the jQuery fadeTo effect to adjust opacity, control duration, and run a callback when the animation completes, with slide down and slide up transitions.

Apply the slide up and slide down effect in jQuery by wiring a button to show and hide a paragraph, using id selectors, speed, and callbacks.

Learn to chain jQuery animations with slide up and down, implement delays, and control sliding effects using button interactions, including slideUp, slideDown, and slideToggle.

Explore the jQuery slide toggle effect, including slide up and slide down, and click events. Learn how to configure speed and callbacks with predefined values.

Explore creating animations with jQuery by moving and resizing elements via the animate function, with speed, callbacks, and camelCase property names.

Apply relative values to element properties using plus-equal and minus-equal operators to resize and reposition divs, adjusting width, height, top, and left in real-time.

Explore predefined values in jQuery, learn how setting a height or padding affects element visibility, and use toggling to show or hide elements with animations.

Learn to build and control animation sequences with the jQuery queue, chaining multiple animations with distinct durations for height, position, and other properties to run in order.

Explore chaining and delay in animations, applying chaining on the same element to queue effects, set a two-second delay, and observe the sequence.

Explore how to stop and clear a jQuery animation queue with the clear queue function, control animations on divs, and apply to slide, fade, and other effects.

Apply and clear animation queues in jQuery using fade out and slide effects; manage fade out, slide up, slide down, and pausing or finishing queued animations.

Learn how the finish function stops and completes all animations instantly, then observe its effect on height and position as you interact with the animation sequence.

Learn to apply the finish function to queued animations on an element, then slide up, slide down, and fade, with a clear function demonstrated, and note stop differs from click.

Explore how stop queue halts the current animation or mission and then starts the next one. Learn how to stop all animations and handle finish states.

Master stopping and controlling a fade and slide animation in jQuery, learning to pause, stop, and control slide up and slide down effects with practical demonstrations.

Learn to toggle a text block with a click by hiding and showing a div, swapping the link text between hide and show, and configuring the animation speed.

Learn to create a gallery fading effect by manipulating image opacity with jQuery, applying the effect across multiple images, and coordinating which image fades most.

Learn to set the text of a div or any element using the text function, and to get text from elements.

Learn how to use jQuery's text function to get and set the text of elements, using a callback with index to access or modify each element in a selection.

Learn to set and get html content with jQuery by inserting elements, selecting divs and the body, and using html and text methods.

Practice using jQuery to read and set text with the text function and a callback, targeting body elements like div, span, and script, and manage form field values.

Discover how to get values from input fields and set the field text using jQuery's val function, use callback to handle input, then print or alert and update the display.

Learn to assign different attributes to elements using name-value pairs, including anchors, divs, and form fields, with multiple attributes per element and setting type, id, and title values.

Learn to get the value of any attribute and remove it with jQuery, selecting the element, retrieving the attribute, and removing it to affect the link behavior.

Read and set attributes in jQuery using the attribute function, referencing this, and update a span with the href value to create dynamic Google search links.

Learn how to use jQuery to append and prepend text to a paragraph, selecting the target element and applying end and start text with concatenation and variables.

Learn to use appendTo and prependTo to insert elements into divs, selecting and clearing targets, and dynamically add paragraphs and links in the DOM.

Demonstrates how to use jQuery's before and after functions to insert and read text around elements, and compares behavior with append to place content inside or adjacent to elements.

Learn how to use jQuery's remove function to delete elements and their child elements from the page, using selectors and ids.

Discover how the empty function in jQuery clears an element's children while keeping the element itself, and compare removing, deleting, and hiding elements like divs, cards, and paragraphs.

Learn to add CSS classes to elements with jQuery, selecting headings and other targets, applying single or multiple classes, and observing how classes change size and color.

Learn to remove classes from elements using selectors in jQuery, and to add or toggle classes to change styles, like blue or red colors, across elements.

Apply and remove classes on divs and paragraphs by clicking a button, using the toggle class technique to control styling and text across elements.

Select elements and apply css properties with the jQuery css function. Learn to set individual and multiple properties, including background color, text color, borders, padding, and margins.

Master part 2 of applying css on elements by examining why some property values work with quotes and why the standard method puts properties in single or double quotes.

Learn to get the dimensions of any element, especially a div, with jQuery using height() and width(), print results with alert, and set new height and width.

Learn to clone a div and copy its properties, including borders and margins. Then append the clone to the body to create additional copies.

This lecture demonstrates using the hasClass method to check element classes, selecting divs and a paragraph by class, and using contains to search text within elements.

Use the contains selector in jQuery to search text inside elements and return matching elements you can style or highlight.

Learn to replace all body elements with new elements using a replace all function, including creating elements with text and replacing paragraphs and headings.

Select the elements in the body with jQuery and replace them with simple text. Replace the paragraphs with the new text without inserting new elements.

Using jQuery offset, learn to read an element’s left and top coordinates. Adjust these offsets by setting top and left with position absolute.

Learn how to locate and style parent elements with jQuery using the parent() function. Discover targeting the span's parents, chaining methods, and returning ancestors up to body or div.

Learn to select and traverse children elements in jQuery, using the children method for direct div children and find to locate nested paragraphs and spans.

Learn how to identify and style siblings in the DOM using jQuery, selecting elements that share the same parent and applying effects to their siblings, such as coloring text red.

Learn how to use jQuery's next() to select the next sibling of a chosen element, filter by specific elements like div or span, and retrieve all or between two points.

Explore selecting previous sibling elements in jQuery. Learn to target a single previous sibling, all prior siblings, and boundaries between two elements with practical div and paragraph examples.

Explore selecting the first and last paragraphs, applying filters to target by class or ID, and using not to exclude elements, then apply styles to the chosen elements.

Explore how the has and is methods in jQuery check for descendants and matched elements, allowing conditional styling and form validation examples with spans, classes, and IDs.

Learn how the each function traverses list items and runs a callback for every matched element.

Build an interactive email input that shows a default text, clears on focus, and reappears when empty, using jQuery to set and compare the field value.

Learn to implement live search for a list using jQuery: capture input, normalize spaces, compare against list items with contains, and highlight matches by toggling a class.

Harness a jQuery font switcher to increase or decrease a paragraph’s font-size with two buttons, parse the current size, and apply a new size.

Enable the upload button after selecting a file by handling the file input change event to update the upload button's disabled state, showing the file name or address.

Learn to show a submission message with jQuery after a sign-up form submission, capture the name, and display a thank-you message prompting users to check their email.

Set up a textarea with a 50-character limit and display the remaining characters in a span as users type, updating the remaining count in real time.

Learn to implement a hover gloss that reveals text from a custom data attribute on images and paragraphs via a positioned, bordered, padded div that updates on hover.

Learn to dynamically add text from an input into a dropdown list using jQuery, including input handling, trimming spaces, validating non-empty values, and creating new option elements.

Learn to center a div on a page using absolute positioning, calculating top and left from window height and width, and updating on resize with a reusable function.

Implement a minimum length validation for a form field, display a 'five characters' message when input is shorter than five, and update the user interface as the user types.

Develop a smooth scroll-to-top feature using an anchor link and a click event, setting the body's scrollTop to zero in about 300 milliseconds.

Learn to build a jquery form with form validation that requires all fields, shows a top message when fields are missing, displays submitted information, and clears inputs after sign up.

Learn to create a field and a list, add items to the list with a button, and update the displayed array using a show list function and each iteration.

Explore how to enable an install button by requiring users to check a policy checkbox, using a change event to toggle the button's disabled attribute when terms are agreed.

Create a search box to query a list in a jQuery app, use a function to compare input with the array, and display found or not found based on index.

Build a future event countdown that shows days remaining by converting dates to milliseconds, computing the difference, and displaying days left for events like concerts.

Build a settings save panel that appears when you click save, slides into view, centers its text, and hides again with a slide up after a delay.

Learn to create a scrolling div that overlays a paragraph by using absolute positioning, setting top and left values, and syncing the box with page scroll.

Learn to implement a show/hide password feature by toggling the input field type between password and text via a checkbox change event, focusing on the type attribute.

Build a five-image slider with high-quality, same-sized images in a container of 600 pixels high, and add previous and next buttons with centered alignment and overflow hidden.

Apply fading slider functionality to cycle through images using image IDs, global slide variables, and next/previous controls, with looping logic and display handling.

Control the image slider with previous and next buttons by updating present and next image IDs. Implement wrap-around and restart the loop to handle first and last image transitions.

Learn to control a jQuery slider by detecting the most over image, stop and start the loop with interval timing, and execute functions to apply changes to the images.

Install xampp on Windows, Linux, or Mac, set up a local host, delete files in htdocs, place your code in htdocs, and start the two services to run ajax-powered pages.

Learn how ajax sends a request from a browser form to a server, where a server-side language processes it and updates the page on screen.

Learn to load content from another page into a paragraph on the current page with a load function, triggered by a button click, using a local host setup.

Learn to perform ajax requests with the get method in jQuery by sending form data (name and email) to a page, handling the response, and updating the page.

discover how callback functions in jQuery bootcamp trigger on request outcomes, with success, error, and complete callbacks that run after a request is sent.

Learn how to implement Ajax using the post method in jQuery, compare get versus post for data transmission, and adapt code by renaming functions and handling requests securely.

Master jQuery ajax to submit form data by reading input values, posting to the index file, and displaying the response on the page.

Explore jQuery ajax status codes, including 200 ok and 404 not found, and learn how success callbacks indicate completed requests and how pages respond when resources are missing.