## Module 1: From JavaScript to jQuery

+

### Videos to Watch:

JavaScript to jQuery.mp4

### Location:

01-FromJavaScriptTojQuery/03-manipulating_the_dom/

### Exercises:

1. Examine index.html to understand the HTML structure
2. Review js/app.js and js/transcript.js to see pure JavaScript implementation
3. Identify areas where DOM manipulation could be simplified with jQuery
4. Note the difference in syntax and complexity between standard JS and what jQuery offers

## Module 2: jQuery Introduction

+

### Videos to Watch:

jQuery Introduction.mp4 02-jQuery-selectors.mp4 jQuery1.mp4

### Location:

02-jQueryIntroduction/

### Sub-module 1: Downloading jQuery (02-downloading_jquery/)

Exercise: Examine Cards-jquery.html, script.js, and style.css to understand how to include jQuery in a project

    // Example jQuery inclusion in HTML
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>

### Sub-module 2: jQuery Selectors (03-jquery_selectors/)

Video Solution: Review video_solution folder files to see jQuery selector examples

Challenge: Try the challenge_solution to practice selectors independently

    // jQuery Selectors Examples
    $('#myId')          // Select by ID
    $('.myClass')       // Select by Class
    $('p')              // Select by Tag
    $('div p')          // Descendant Selector
    $('div > p')        // Child Selector
    $('input[type=text]') // Attribute Selector

### Sub-module 3: Changing HTML/CSS (04-changing_html_and_css_with_jquery/)

Video Solution: Review video_solution folder files to see how to change HTML/CSS with jQuery

Challenge: Try the challenge_solution to practice HTML/CSS manipulation

    // jQuery HTML/CSS Methods
    $('#element').html()              // Get HTML content
    $('#element').html('New Content') // Set HTML content
    $('#element').text()              // Get text content
    $('#element').text('New Text')    // Set text content
    $('#element').css('color')        // Get CSS property
    $('#element').css('color', 'red') // Set CSS property
    $('#element').addClass('newClass')
    $('#element').removeClass('oldClass')
    $('#element').toggleClass('toggleClass')

### Sub-module 4: Challenge 2 (05-changing_html_and_css_with_jquery_challenge_2/)

Exercise: Work with Cards-jquery.html, script.js, statements.js, and style.css to practice HTML/CSS changes

### Sub-module 5: Challenge 3 (06-changing_html_and_css_with_jquery_challenge_3/)

Exercise: Review statements.js to understand advanced jQuery HTML/CSS manipulation

### Sub-module 6: First jQuery Script (07-writing_our_first_jquery_script/)

Video Solution: Review files in video_solution to see first jQuery scripts

Challenge: Try challenge_solution to practice writing jQuery scripts from scratch

    // Basic jQuery Document Ready Function
    $(document).ready(function() {
        // Your jQuery code here
        $('button').click(function() {
            $('p').hide();
        });
    });

    // Or shorthand version
    $(function() {
        // Your jQuery code here
    });

## Module 3: jQuery Events

+

### Videos to Watch:

jquery events introduction.mp4 05-events-in-jQuery.mp4 06-jQuery-effects.mp4 07-jQuery-method-chaining.mp4 08-the-importance-of-this-jQuery.mp4

### Location:

03-jQueryEvents/

### Sub-module 1: Events in jQuery (02-events_in_jquery/)

Video Solution: Review video_solution files to see jQuery event handling

Challenge: Try challenge_solution to practice event handling

    // jQuery Event Handling
    $('button').click(function() {
        // Handle click
    });

    $('input').keydown(function(event) {
        // Handle keydown
    });

    $('form').submit(function(event) {
        event.preventDefault(); // Prevent form submission
        // Handle form submission
    });

    // Event delegation
    $(document).on('click', '.dynamic-button', function() {
        // Handle clicks on dynamically added elements
    });

### Sub-module 2: jQuery Effects (03-jquery_effects/)

Challenge: Work with challenge_solution files to practice jQuery built-in effects

    // jQuery Effects
    $('#element').hide();
    $('#element').show();
    $('#element').toggle();

    $('#element').fadeIn();
    $('#element').fadeOut();
    $('#element').fadeToggle();

    $('#element').slideUp();
    $('#element').slideDown();
    $('#element').slideToggle();

    // With duration
    $('#element').fadeIn(1000); // 1 second

    // With callback
    $('#element').fadeOut(function() {
        alert('Fade out completed!');
    });

### Sub-module 3: Effects Challenge 2 (04-jquery_effects_challenge_2/)

Exercise: Work with Cards-jquery.html, script.js, and style.css to practice effects

### Sub-module 4: Effects Challenge 3 (05-jquery_effects_challenge_3/)

Exercise: Work with Cards-jquery.html, script.js, and style.css to practice advanced effects

### Sub-module 5: Effects Challenge 4 (06-jquery_effects_challenge_4/)

Exercise: Work with Cards-jquery.html, script.js, and style.css to practice complex effects

### Sub-module 6: Method Chaining (07-method_chaining/)

Video Solution: Review video_solution files to see jQuery method chaining

Challenge: Try challenge_solution to practice method chaining

    // jQuery Method Chaining
    $('#element')
        .css('color', 'blue')
        .fadeOut(1000)
        .delay(500)
        .fadeIn(1000)
        .addClass('highlight');

    // Each method returns a jQuery object, allowing chaining

### Sub-module 7: Method Chaining Challenge 2 (08-method_chaining_challenge_2/)

Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html

### Sub-module 8: Method Chaining Challenge 3 (09-method_chaining_challenge_3/)

Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html

### Sub-module 9: Importance of "this" (10-the_importance_of_this/)

Challenge: Review challenge_solution files to understand "this" in jQuery

Additional Exercises: Explore hiding_paragraphs, if_statements, mouseenter_and_mouseleave, and red_and_black_boxes

    // jQuery "this" keyword
    $('button').click(function() {
        // "this" refers to the clicked button element
        $(this).css('background-color', 'red');

        // Find elements relative to "this"
        $(this).siblings().hide();
        $(this).parent().addClass('active');
    });

## Module 4: Traversing the DOM with jQuery

+

### Videos to Watch:

jQuery_ Traversing Mt. Dom Introduction.mp4 Traversing up the DOM.mp4 Traversing Sideways.mp4 jQuery_ Other Traversing Methods.mp4

### Location:

04-jQuery-TraversingMtDOM/

### Sub-module 1: jQuery Traversing Mt DOM (01-jquery_traversing_mt_dom/)

Exercise: Work with button.html, css/, and js/ files to practice basic traversal

    // jQuery Traversing Methods
    $('#start').parent()         // Get direct parent
    $('#start').parents()        // Get all ancestors
    $('#start').parents('.class') // Get specific ancestor
    $('#start').children()       // Get direct children
    $('#start').find('.class')   // Find descendants
    $('#start').siblings()       // Get siblings
    $('#start').next()           // Get next sibling
    $('#start').prev()           // Get previous sibling

### Sub-module 2: Up and Down Tree (02-traversing_up_and_down_the_dom_tree/)

Exercise: Work with traversing_mt_dom.html, css/, and js/ files to practice parent/child traversal

### Sub-module 3: Traversing Sideways (03-traversing_sideways/)

Exercise: Work with index.html, css/, and js/ files to practice sibling traversal

### Sub-module 4: Sideways Challenge 2 (04-traversing_sideways_challenge_2/)

Exercise: Work with index.html, css/, and js/ files to practice sideways traversal

### Sub-module 5: Sideways Challenge 3 (05-traversing_sideways_challenge_3/)

Exercise: Work with index.html, css/, and js/ files to practice advanced sideways traversal

### Sub-module 6: Sideways Challenge 4 (06-traversing_sideways_challenge_4/)

Exercise: Work with index.html, css/, and js/ files to practice complex sideways traversal

### Sub-module 7: Other Methods Challenge 1 (07-other_traversing_methods_challenge_1/)

Exercise: Work with index.html, css/, and js/ files to practice other traversal methods

### Sub-module 8: Other Methods Challenge 2 (08-other_traversing_methods_challenge_2/)

Exercise: Work with index.html and js/ files to practice additional traversal methods

### Sub-module 9: Other Methods Challenge 3 (09-other_traversing_methods_challenge_3/)

Exercise: Work with index.html, css/, and js/ files to practice advanced traversal methods

## Lab Exercise Workflow

+

### For each module/sub-module:

1. Watch the corresponding video listed in the module section
2. Open both the "video_solution" and "challenge_solution" folders when available
3. Study the HTML and CSS files to understand the base structure
4. Analyze the JavaScript/jQuery code in the script files
5. Identify how jQuery simplifies the code compared to plain JavaScript
6. Try modifying the code to reinforce learning
7. Complete challenges when provided

### Helpful Tips for Success:

- Start with simple examples and gradually move to complex ones
- Always compare the vanilla JavaScript approach with the jQuery approach
- Take notes on syntax differences and shortcuts jQuery provides
- Test your code frequently in the browser
- Don't hesitate to experiment - try different jQuery methods
- Refer to jQuery documentation when exploring new methods

### Assessment Criteria:

By the end of this lab, you should be able to:

- Explain the advantages of using jQuery over vanilla JavaScript
- Convert basic JavaScript DOM manipulations to jQuery equivalents
- Use jQuery selectors effectively to target elements