Learn Jquery - 9 Code Examples & CST Typing Practice Test

jQuery is a fast, small, and feature-rich JavaScript library designed to simplify DOM manipulation, event handling, animations, and AJAX interactions. It provides a unified API that works consistently across all major browsers.

View all 9 Jquery code examples →

jQuery Simple Counter jQuery Counter with Step jQuery Counter with Min/Max jQuery Counter with Auto Increment jQuery Counter with Double Increment jQuery Counter with Even/Odd Indicator jQuery Counter with Max/Min and Step jQuery Counter with LocalStorage jQuery Counter with Color Themes

Learn JQUERY with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

jQuery Simple Counter

$(document).ready(function() {
    var count = 0;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Basic counter with increment, decrement, reset, and theme toggle.

Let’s Try →

jQuery Counter with Step

$(document).ready(function() {
    var count = 0;
    var step = 5;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count += step; updateCounter(); });
    $('#decrement').click(function() { count -= step; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Counter increments/decrements by a custom step value.

Let’s Try →

jQuery Counter with Min/Max

$(document).ready(function() {
    var count = 0;
    var min = 0;
    var max = 10;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { if(count < max) count++; updateCounter(); });
    $('#decrement').click(function() { if(count > min) count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Counter that respects minimum and maximum limits.

Let’s Try →

jQuery Counter with Auto Increment

$(document).ready(function() {
    var count = 0;
    var isDark = false;
    var auto = false;
    var timer;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
        $('#auto-btn').text(auto ? 'Stop Auto' : 'Start Auto');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });
    $('#auto-btn').click(function() {
        auto = !auto;
        if(auto) timer = setInterval(function(){ count++; updateCounter(); }, 1000);
        else clearInterval(timer);
        updateCounter();
    });

    updateCounter();
});

Counter automatically increments every second.

Let’s Try →

jQuery Counter with Double Increment

$(document).ready(function() {
    var count = 0;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#double-increment').click(function() { count += 2; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Special button increments counter by 2.

Let’s Try →

jQuery Counter with Even/Odd Indicator

$(document).ready(function() {
    var count = 0;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#parity').text(count % 2 === 0 ? 'Even' : 'Odd');
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Shows whether the counter value is even or odd.

Let’s Try →

jQuery Counter with Max/Min and Step

$(document).ready(function() {
    var count = 0;
    var step = 5;
    var min = 0;
    var max = 50;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { if(count + step <= max) count += step; updateCounter(); });
    $('#decrement').click(function() { if(count - step >= min) count -= step; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Counter with custom step value and boundaries.

Let’s Try →

jQuery Counter with LocalStorage

$(document).ready(function() {
    var count = parseInt(localStorage.getItem('count') || 0);
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
        localStorage.setItem('count', count);
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Persists counter value in localStorage.

Let’s Try →

jQuery Counter with Color Themes

$(document).ready(function() {
    var count = 0;
    var themes = ['light-theme','dark-theme','blue-theme'];
    var current = 0;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').attr('class', themes[current]);
        $('#theme-btn').text('Switch Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { current = (current + 1) % themes.length; updateCounter(); });

    updateCounter();
});

Cycles through multiple color themes.

Let’s Try →

Frequently Asked Questions about Jquery

What is Jquery?

What are the primary use cases for Jquery?

Legacy websites and enterprise systems. WordPress plugins and themes. Quick DOM scripting and UI enhancements. Form validation and AJAX requests. Projects needing wide browser compatibility

What are the strengths of Jquery?

Very easy to learn. Massive ecosystem and community. Ideal for simple interactive scripts. Works everywhere - even IE. Minimal setup required

What are the limitations of Jquery?

Not suited for modern SPA architecture. Heavy DOM mutation patterns. Less relevant with modern browser APIs. Harder to scale in large apps. Performance issues with deeply nested DOM updates

How can I practice Jquery typing speed?

CodeSpeedTest offers 9+ real Jquery code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

jQuery Simple Counter

$(document).ready(function() {
    var count = 0;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Basic counter with increment, decrement, reset, and theme toggle.

Let’s Try →

jQuery Counter with Step

$(document).ready(function() {
    var count = 0;
    var step = 5;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count += step; updateCounter(); });
    $('#decrement').click(function() { count -= step; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Counter increments/decrements by a custom step value.

Let’s Try →

jQuery Counter with Min/Max

$(document).ready(function() {
    var count = 0;
    var min = 0;
    var max = 10;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { if(count < max) count++; updateCounter(); });
    $('#decrement').click(function() { if(count > min) count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Counter that respects minimum and maximum limits.

Let’s Try →

jQuery Counter with Auto Increment

$(document).ready(function() {
    var count = 0;
    var isDark = false;
    var auto = false;
    var timer;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
        $('#auto-btn').text(auto ? 'Stop Auto' : 'Start Auto');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });
    $('#auto-btn').click(function() {
        auto = !auto;
        if(auto) timer = setInterval(function(){ count++; updateCounter(); }, 1000);
        else clearInterval(timer);
        updateCounter();
    });

    updateCounter();
});

Counter automatically increments every second.

Let’s Try →

jQuery Counter with Double Increment

$(document).ready(function() {
    var count = 0;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#double-increment').click(function() { count += 2; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Special button increments counter by 2.

Let’s Try →

jQuery Counter with Even/Odd Indicator

$(document).ready(function() {
    var count = 0;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#parity').text(count % 2 === 0 ? 'Even' : 'Odd');
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Shows whether the counter value is even or odd.

Let’s Try →

jQuery Counter with Max/Min and Step

$(document).ready(function() {
    var count = 0;
    var step = 5;
    var min = 0;
    var max = 50;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { if(count + step <= max) count += step; updateCounter(); });
    $('#decrement').click(function() { if(count - step >= min) count -= step; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Counter with custom step value and boundaries.

Let’s Try →

jQuery Counter with LocalStorage

$(document).ready(function() {
    var count = parseInt(localStorage.getItem('count') || 0);
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
        localStorage.setItem('count', count);
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Persists counter value in localStorage.

Let’s Try →

jQuery Counter with Color Themes

$(document).ready(function() {
    var count = 0;
    var themes = ['light-theme','dark-theme','blue-theme'];
    var current = 0;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').attr('class', themes[current]);
        $('#theme-btn').text('Switch Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { current = (current + 1) % themes.length; updateCounter(); });

    updateCounter();
});

Cycles through multiple color themes.

Let’s Try →

Frequently Asked Questions about Jquery

What is Jquery?

What are the primary use cases for Jquery?

Legacy websites and enterprise systems. WordPress plugins and themes. Quick DOM scripting and UI enhancements. Form validation and AJAX requests. Projects needing wide browser compatibility

What are the strengths of Jquery?

Very easy to learn. Massive ecosystem and community. Ideal for simple interactive scripts. Works everywhere - even IE. Minimal setup required

What are the limitations of Jquery?

Not suited for modern SPA architecture. Heavy DOM mutation patterns. Less relevant with modern browser APIs. Harder to scale in large apps. Performance issues with deeply nested DOM updates

How can I practice Jquery typing speed?

CodeSpeedTest offers 9+ real Jquery code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.