jQuery从入门到精通最新章节_明日科技著

4.8　表单选择器

表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中。jQuery提供的表单选择器如表4.6所示。

表4.6　jQuery的表单选择器

【例4.13】 匹配表单中相应的元素并实现不同的操作。 （实例位置：光盘\TM\sl\4\13）

（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。

    <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

（2）在页面的<body>标记中，添加一个表单，并在该表单中添加复选框、单选按钮、图像域、文件域、密码域、文本框、普通按钮、重置按钮、提交按钮和隐藏域等input元素，关键代码如下：

    <form>
       复选框：<input type="checkbox"/>
       单选按钮：<input type="radio"/>
       图像域：<input type="image"/><br>
       文件域：<input type="file"/><br>
       密码域：<input type="password" width="150px"/><br>
       文本框：<input type="text" width="150px"/><br>
       按  钮：<input type="button" value="按钮"/><br>
       重  置：<input type="reset" value=""/><br>
       提  交：<input type="submit" value=""><br>
       隐藏域： <input type="hidden" value="这是隐藏的元素">
       <div id="testDiv"><font color="blue">隐藏域的值：</font></div>
    </form>

（3）在引入jQuery库的代码下方编写jQuery代码，实现匹配表单中的各个表单元素，并实现不同的操作，具体代码如下：

    <script type="text/javascript">
        $(document).ready(function() {
           $(":checkbox").attr("checked","checked");    //选中复选框
           $(":radio").attr("checked","true");          //选中单选框
           $(":image").attr("src","images/fish1.jpg");  //设置图片路径
           $(":file").hide();                           //隐藏文件域
           $(":password").val("123");
             //设置密码域的值
           $(":text").val("文本框");
             //设置文本框的值
           $(":button").attr("disabled","disabled");
             //设置按钮不可用
           $(":reset").val("重置按钮");
             //设置重置按钮的值
           $(":submit").val("提交按钮");
             //设置提交按钮的值

    $("#testDiv").append($("input:hidden:eq(1)").val()); //显
    示隐藏域的值
         });
    </script>

运行本实例，将显示如图4.20所示的页面。

图4.20　利用表单选择器匹配表单中相应的元素

4.8 表单选择器

4.8　表单选择器