jQuery Examples

jQuery Examples: Hands-On Solutions for Web Development

The best way to understand jQuery is through practical examples. These examples cover a wide range of common tasks, from DOM manipulation to event handling, effects, and AJAX. Each example is crafted to provide a clear understanding of how jQuery can simplify complex operations.

Basic jQuery Example

Example: Changing Text Content

html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Change Text</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#btnChangeText').click(function () {
                $('#exampleText').text('Hello, jQuery!');
            });
        });
    </script>
</head>
<body>
    <p id="exampleText">Click the button to change this text.</p>
    <button id="btnChangeText">Change Text</button>
</body>
</html>

jQuery Selectors

Example: Highlight All Paragraphs

html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Selectors</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('p').css('background-color', 'yellow');
        });
    </script>
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</body>
</html>

jQuery Events

Example: Mouseover and Mouseout Events

html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Events</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#hoverDiv').mouseover(function () {
                $(this).css('background-color', 'green');
            }).mouseout(function () {
                $(this).css('background-color', 'red');
            });
        });
    </script>
</head>
<body>
    <div id="hoverDiv" style="width: 100px; height: 100px; background-color: red;"></div>
</body>
</html>

jQuery Effects

Example: Fade In and Fade Out

html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Effects</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#btnFadeToggle').click(function () {
                $('#box').fadeToggle();
            });
        });
    </script>
</head>
<body>
    <button id="btnFadeToggle">Fade Toggle</button>
    <div id="box" style="width: 100px; height: 100px; background-color: blue; margin-top: 10px;"></div>
</body>
</html>

jQuery AJAX

Example: Load Data from a Server

html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery AJAX Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#btnLoad').click(function () {
                $('#content').load('https://jsonplaceholder.typicode.com/posts/1', function (response) {
                    $('#content').text(response);
                });
            });
        });
    </script>
</head>
<body>
    <button id="btnLoad">Load Content</button>
    <div id="content" style="margin-top: 10px;"></div>
</body>
</html>

Chaining Methods

Example: Apply Multiple Effects

html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Chaining</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#btnChain').click(function () {
                $('#chainBox').slideUp(1000).slideDown(1000).fadeOut(1000).fadeIn(1000);
            });
        });
    </script>
</head>
<body>
    <button id="btnChain">Start Chain</button>
    <div id="chainBox" style="width: 100px; height: 100px; background-color: orange; margin-top: 10px;"></div>
</body>
</html>

Form Validation

Example: Validate Required Fields

html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Form Validation</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#btnSubmit').click(function (e) {
                if ($('#name').val() === '') {
                    e.preventDefault();
                    alert('Name is required!');
                }
            });
        });
    </script>
</head>
<body>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <button type="submit" id="btnSubmit">Submit</button>
    </form>
</body>
</html>