将所有输入字段更改为蓝色

我的Jquery代码应该把表单边框的所有输入字段转换为蓝色。但它做不到这一点……我到底哪里错了?

<html>
    <head>
        <title>Form</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                alert('Works !');
                $('#provision:text').css('border', '2px solid blue');
            });
        </script>
    </head>
    <body>
        <form id="provision">ESNList:
            <input type="text" id="ESNList" name="ESNList" size="30" />
            <br />ESN Start:
            <input type="text" id="ESNStart" name="ESNStart" size="10" />
            <br />ESN End:
            <input type="text" id="ESNStart" name="ESNStart" size="10" />
            <br />UnitName:
            <input type="text" id="STxName" name="STxName" size="30" />
            <br />Unit Model:
            <select name="STxName">
                <option value="stx2">STX2</option>
                <option value="protopak">Protopak</option>
                <option value="stm3" selected>STM3</option>
                <option value="acutec">Acutec</option>
                <option value="mmt">MMT</option>
                <option value="smartone">Trackpack</option>
                <option value="smartoneb">SmartOneB</option>
                <option value="audi">Acutec</option>
            </select>
            <br />RTU Model Type:
            <select name="rtumodel">
                <option value="globalstar">GlobalStar</option>
                <option value="both">Both</option>
                <option value="comtech">Comtech</option>
                <option value="stmcomtech">STMComtech</option>
            </select>
            <br />
            <input type="submit" value="submit" />
        </form>
    </body>
</html>

您需要实际查询这些<input>节点:

$('#provision input:text').css('border','2px solid blue');});

你只需要在选择器中留一个空格:

#provision :text

如所写，它要求#provision元素本身是一个文本输入，而不是搜索#provision的后代。空格在选择器中很重要!

但是，您应该注意到:text是一个jQuery扩展，因此不如本机选择器快。

因此，一个更好的选择器是:

$('#provision input[type="text"]')

或者，为了确保捕获没有显式text类型(但默认为text)的节点:

$('#provision input').filter(':text')

以下是适合您的JQuery文本选择器:

$('#provision input:text').css('border', '2px solid blue');

文本选择器的官方API文档:http://api.jquery.com/text-selector/

$('#provision input:text').css('border', '2px solid blue');

这应该可以工作-看到它工作http://jsfiddle.net/LumF3/

 <script type="text/javascript">
                $(function () {
                    alert('Works !');
                    $('#provision input:text').css('border', '2px solid blue');
                });
 </script>

试试$('#provision input')。您正在尝试将边框样式应用于#provisions元素中的文本节点。

相关内容

最新更新

热门标签：