jQuery中input和:input选择器的区别

最新推荐文章于 2024-04-24 15:49:08 发布

carrie_0612

最新推荐文章于 2024-04-24 15:49:08 发布

阅读量2.8k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/cheche_carer/article/details/51711246

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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