jQuery $('input') vs $(':input') Selectors

jQuery $(‘input’) vs $(‘:input’) Selectors with Examples

In this article, I am going to discuss jQuery $(‘input’) vs $(‘:input’) Selectors with Examples. Please read our previous article, where we discussed jQuery Case Insensitive Attribute Value Selector. At the end of this article, you will understand everything about the jQuery jQuery $(‘input’) vs $(‘:input’) selectors and the differences between them.

jQuery $(‘input’) Selector:

This selector is a jQuery Element Selector. This selector targets all the <input> tags. But in our form generally there are more useful tags other than input tags such as <select>, <button>, <textarea> etc. $(‘input’) will not target these tags.

jQuery $(‘:input’) Selector:

This selector in jQuery targets all the input fields in our document including <select>, <button>, <textarea>

Example: Understand the use of jQuery $(‘input’) vs $(‘:input’) Selectors

Let us see understand how these two selectors work with an example.

We are making a simple form in HTML. In the below example, notice carefully that when we are using the selector as $(‘input’) then we are getting only those input tags (excluded textarea, select, and button). But when we are targeting all input fields by $(‘:input’). Then all input fields are targeted here.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery $('input') vs $(':input') Selectors</title>
</head>
<body>
    <section>
        <form action="/">
            <label for="name">Name: </label>
            <input type="text" name="Name" />

            <label for="email">Email: </label>
            <input type="email" name="Email" /> </br> </br>

            <fieldset>
                <legend>Skillset: </legend>
                <label>HTML:
                    <input type="checkbox" value="HTML" name="checkgroup[]" /></label>
                <label>CSS:
                    <input type="checkbox" value="CSS" name="checkgroup[]" /></label>
                <label>JavaScript:
                    <input type="checkbox" value="JavaScript" name="checkgroup[]" /></label>
                <label>jquery:
                    <input type="checkbox" value="jquery" name="checkgroup[]" /></label>
            </fieldset> </br>

            <label>Enter your DOB</label>
            <input type="datetime-local" name="datetime" /> </br> 

            <label>Upload your Photo: </label>
            <input type="file" name="file" /> </br> 

            <label>Years of experience: </label>
            <input type="number" name="number" /> </br> 

            <label>Password: </label>
            <input type="password" name="password" /> </br> 

            <fieldset>
                <legend>Male</legend>
                <label>Male:
                    <input type="radio" value="Male" name="radiogroup" /></label>
                <label>Female:
                    <input type="radio" value="Female" name="radiogroup" /></label>
            </fieldset> </br>

            <label>Enter your contact number </label>
            <input type="tel"  name="tel" /> </br> 

            <label>Enter your website </label>
            <input type="url"  name="url" /> </br> 

            <label>Select the position</label>
            <select name="select2" size="3" multiple>
                <option>Web developer</option>
                <option>Web Designer</option>
            </select> </br> </br>
            <fieldset>
                <legend>Enter your university </legend>
                <input type="text" name="datalist" list="samplelist">
                <datalist id="samplelist">
                    <option>MAKAUT</option>
                    <option>Techno India</option>
                    <option>If other please specify</option>
                </datalist>
            </fieldset> </br>
             <label>Any other comments</label>
            <textarea name="textarea"></textarea>
        </form>
    </section> 
    <button id="demo">Submit</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
           const allInput = $('input').length;
           const allInputSelector = $(':input').length;
           console.log(`Total number of <input> tags are ${allInput} and total number of <:inputs> are ${allInputSelector}` );
           console.log($('input'));
           console.log($(':input'));
        });
    </script>
</body>
</html>

Now, run the above HTML code, and you should get the following HTML form in the browser.

Now open the browser developers’ tool by pressing the F12 key and have a look at the console tab as shown in the below image.

In the first console.log, we are printing the number of elements targeted by $(‘input’) and $(‘:input’) respectively. Notice that <input> tags are 15 in number but there is a total of 18 input fields in our form. The other three are select, textarea, and button.

In the second console.log, we are printing the whole jQuery object returned by $(‘input’) and $(‘:input’) respectively. You can see the difference clearly. In the object returned by $(‘:input’) we are getting three extra elements select, textarea and button.

Which one is better for performance $(‘input[type=”text”]’) or $(‘:input[type=”text”]’)?

$(‘input[type=”text”]’) is better for performance over $(‘:input[type=”text”]’). This is because $(‘:input[type=”text”]’) needs to scan all input elements including textarea, select, button, etc. whereas $(‘input[type=”text”]’) scans only input elements.

So if you want to find elements with an input tag, it is always better to use $(‘input[type=”text”]’) over $(‘:input[type=”text”]’).

In the next article, we will discuss jQuery Checked Selector with Examples. Here, in this article, I try to explain jQuery input vs :input selector i.e. the difference between jQuery $(input) and $(:input) selectors with Examples and I hope you enjoy this jQuery input vs :input selector i.e. the difference between jQuery $(input) and $(:input) selectors article.

jQuery $(‘input’) vs $(‘:input’) Selectors