Home >Web Front-end >JS Tutorial >The difference between jQuery selector input and :input

The difference between jQuery selector input and :input

黄舟Original: 2017-06-23 15:23:342267browse

(1) input，标签选择器，仅仅选择input元素e67338802192d7bd5294b2aa965c9bc5；
(2) :input，伪类选择器，选择表单中的input ，select， textarea， button元素.
示例如下：
html:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script>
            $(function(){
                $(&#39;input&#39;).css(&#39;border&#39;,&#39;1px solid red&#39;);//只有input标签边框变为红色
                $(&#39;:input&#39;).foucs(function(){//input select textarea button获取焦点背景变为#fcc
                    $(this).css(&#39;background&#39;,&#39;#fcc&#39;);
                }).blur(function(){//失去焦点背景变为#fff
                    $(this).css(&#39;background&#39;,&#39;#fff&#39;);
                });
            })        </script>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>个人基本信息</legend>
                <div>
                    <label for="username">名称：</label>
                    <input type="text" id="username">
                </div>
                <div>
                    <label for="nation">国家：</label>
                    <select>
                        <option>中国</option>
                        <option>美国</option>
                        <option>英国</option>
                    </select>
                </div>
                <div>
                    <label for="msg">详细信息：</label>
                    <textarea id="msg"></textarea>
                </div>
                <div>
                    <button id="submit">提交</button>
                </div>
            </fieldset>

        </form>
    </body></html>

查找所有的input元素，下面这些元素都会被匹配到。

HTML 代码:

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
 
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
 
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
 
    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>
 
    <textarea></textarea>
    <button>Button</button>
 
</form>

jQuery 代码:

$(":input")

结果:

[ 
    <input type="button" value="Input Button"/>,
    <input type="checkbox" />,
 
    <input type="file" />,
    <input type="hidden" />,
    <input type="image" />,
 
    <input type="password" />,
    <input type="radio" />,
    <input type="reset" />,
 
    <input type="submit" />,
    <input type="text" />,
    <select><option>Option</option></select>,
 
    <textarea></textarea>,
    <button>Button</button>,
 ]

2. input仅仅选择input元素。

查找一个 input 元素。

HTML 代码:

<input>INPUT1</input>
<input>INPUT2</input>
<span>SPAN</span>

jQuery 代码:

$("input");

结果:

[ <input>INPUT1</input>,<input>INPUT2</input> ]

The above is the detailed content of The difference between jQuery selector input and :input. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery: Detailed explanation of the use of input selectorNext article：jQuery: Detailed explanation of the use of input selector

See more

The difference between jQuery selector input and :input

Related articles