首页 / JQUERY / jQuery选择器input和:input两者之间的区别

jQuery选择器input和:input两者之间的区别

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery选择器input和:input两者之间的区别，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2008字，纯文字阅读大概需要3分钟。

内容图文

(1) input，标签选择器，仅仅选择input元素<input type="text">；
(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(){
                $('input').css('border','1px solid red');//只有input标签边框变为红色
                $(':input').foucs(function(){//input select textarea button获取焦点背景变为#fcc
                    $(this).css('background','#fcc');
                }).blur(function(){//失去焦点背景变为#fff
                    $(this).css('background','#fff');
                });
            })        </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> ]

以上就是 jQuery选择器input和:input两者之间的区别的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的jQuery选择器input和:input两者之间的区别全部内容，希望文章能够帮你解决jQuery选择器input和:input两者之间的区别所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/300643.html

来源：【匿名】