Debug School

rakesh kumar
rakesh kumar

Posted on

jQuery Selectors and Events

jQuery Selectors and Events
click here for reference
click here for reference
Selecting Elements by ID
Selecting Elements by Class Name
Selecting Elements by Name
Selecting Elements by Attribute
Selecting Elements by Compound CSS Selector
jQuery Custom Selector
The click() Method
The keypress() Method
The keyup() Method
The change() Method
The submit() Method

Selecting Elements by ID

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by ID</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Highlight element with id mark
    $("#mark").css("background", "yellow");
});
</script> 
</head>
<body>
    <p id="mark">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p>This is one more paragraph.</p>
    <p><strong>Note:</strong> The value of the id attribute must be unique in an HTML document.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

output
Image description

Selecting Elements by Class Name

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Class</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Highlight elements with class mark
    $(".mark").css("background", "yellow");
});
</script>
</head>
<body>
    <p class="mark">This is a paragraph.</p>
    <p class="mark">This is another paragraph.</p>
    <p>This is one more paragraph.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

output
Image description

Selecting Elements by Name

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Name</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "yellow");
});
</script>
</head>
<body>
    <h1>This is heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is another block of text.</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

output
Image description

Selecting Elements by Attribute

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Attribute</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "yellow");
});
</script>
</head>
<body>
    <form>
        <label>Name: <input type="text"></label>
        <label>Password: <input type="password"></label>
        <input type="submit" value="Sign In">
    </form>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

output

Image description
after enter

Image description

Image description

Selecting Elements by Compound CSS Selector

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Compound Selector</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");

    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");

    // Highlight li elements inside the ul elements
    $("ul li").css("background", "yellow");

    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "red");

    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");

    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script>
</head>
<body>
    <p>This is a paragraph.</p>
    <p class="mark">This is another paragraph.</p>
    <p>This is one more paragraph.</p>
    <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
    <ul id="mark">
        <li>List item one</li>
        <li>List <span>item two</span></li>
        <li>List item three</li>
    </ul>
    <ul class="mark">
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
    <p>Go to <a href="https://www.tutorialrepublic.com/" target="_blank">Home page</a></p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

output

jQuery Custom Selector
Image description

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Custom Selector</title>
<style>
    /* Some custom style */
    *{
        padding: 5px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");

    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");

    // Highlight first paragraph element
    $("p:first").css("background", "red");

    // Highlight last paragraph element
    $("p:last").css("background", "green");

    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");

    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");

    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Carter</td>
                <td>johncarter@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John Rambo</td>
                <td>johnrambo@mail.com</td>
            </tr>
        </tbody>
    </table>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p>This is one more paragraph.</p>
    <form>
        <label>Name: <input type="text"></label>
        <label>Password: <input type="password"></label>
        <input type="submit" value="Sign In">
    </form>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

output
Image description

jQuery Events

The click() Method

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Click Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: khaki;
    }
</style>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
</head>
<body>
    <p>Click on me and I'll disappear.</p>
    <p>Click on me and I'll disappear.</p>
    <p>Click on me and I'll disappear.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

output
Image description
after click
Image description

Image description

The keypress() Method

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Keypress Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    div{
        margin: 20px 0;
    }
</style>
<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
</head>
<body>
    <input type="text">
    <div>Keypress: <span>0</span></div>
    <div><strong>Note:</strong> Enter something inside the input box and see the result.</div>
    <p>Keypress is triggered.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The keyup() Method

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Keyup Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    div{
        margin: 20px 0;
    }
</style>
<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
</head>
<body>
    <input type="text">
    <div>Keyup: <span>0</span></div>
    <div><strong>Note:</strong> Enter something inside the input box and see the result.</div>
    <p>Keyup is triggered.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The change() Method

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Change Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>
</head>
<body>
    <form>
        <label>City:</label>
        <select>
            <option>London</option>
            <option>Paris</option>
            <option>New York</option>
        </select>
    </form>
    <p><strong>Note:</strong> Select any value from the dropdown select and see the result.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

output
Image description
after select in dropdown

Image description

The submit() Method

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Form Submit Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    .error{
        color: red;
    }
</style>
<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>
</head>
<body>
    <p><strong>Note:</strong> If try to submit any invalid value. It will produce an error.</p>
    <form action="/examples/html/action.php" method="post" id="users">
        <label for="firstName">First Name:</label>
        <input type="text" name="first-name" id="firstName">
        <input type="submit" value="Submit">
        <div id="result"></div>
    </form>    
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

output
Image description
after enter
Image description

after submit
Image description

Top comments (0)