Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery input vs :input

Suggested Videos
Part 7 - jQuery attribute selector
Part 8 - jQuery attribute value selector
Part 9 - jQuery case insensitive attribute selector



In this video we will discuss the difference between $(input) and $(:input) selectors



$(':input') selects all input, textarea, select and button elements where as $('input') just selects elements with an input tag.

Consider the web page below
jQuery input vs input

The following is the HTML of the above page
<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
</head>
<body style="font-family:Arial">
    First Name : <input type="text" value="John" />
    <br /><br />
    Last Name : <input type="text" value="Major" />
    <br /><br />
    Gender :
    <input type="radio" name="gender" checked="checked" value="Male">Male
    <input type="radio" name="gender" value="Female">Female
    <br /><br />
    Skills :
    <input type="checkbox" name="skills" checked="checked"
           value="JavaScript" />JavaScript
    <input type="checkbox" name="skills" checked="checked"
           value="jQuery" />jQuery
    <input type="checkbox" name="skills" value="C#" />C#
    <br /><br />
    Country:
    <select>
        <option selected="selected" value="USA">USA</option>
        <option value="India">India</option>
        <option value="UK">UK</option>
    </select>
    <br /><br />
    Summary :
    <br />
    <textarea>
        I am a Senior Dot Net Developer with 10 years experience
    </textarea>
    <br /><br />
    <input type="submit" value="submit" />
</body>
</html>

Now we want to get the text value from all the textboxes. On this page we have 2 textboxes
1. First Name
2. Last Name

jQuery code to get textbox value using $(input)
<script type="text/javascript">
    $(document).ready(function () {
        $('input[type="text"]').each(function () {
            alert($(this).val());
        });
    });
</script>

jQuery code to get textbox value using $(:input)
<script type="text/javascript">
    $(document).ready(function () {
        $(':input[type="text"]').each(function () {
            alert($(this).val());
        });
    });
</script>

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, textarea, select etc, where as $('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"]')

jQuery tutorial for beginners

1 comment:

  1. Please change the code $(':input[type="text"]') as $(':input').

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.