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
    <script src="jquery-1.11.2.js"></script>
<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 />
        <option selected="selected" value="USA">USA</option>
        <option value="India">India</option>
        <option value="UK">UK</option>
    <br /><br />
    Summary :
    <br />
        I am a Senior Dot Net Developer with 10 years experience
    <br /><br />
    <input type="submit" value="submit" />

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 () {

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

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').


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.