尐嵅嵆嶲嶳帊帋庀庁怎么念

書(shū)名： jQuery從入門(mén)到精通（軟件開(kāi)發(fā)視頻大講堂）
作者名：明日科技
本章字?jǐn)?shù)： 451字
更新時(shí)間： 2020-11-28 23:47:24

4.8 表單選擇器

表單選擇器是匹配經(jīng)常在表單內(nèi)出現(xiàn)的元素。但是匹配的元素不一定在表單中。jQuery提供的表單選擇器如表4.6所示。

表4.6 jQuery的表單選擇器

【例4.13】匹配表單中相應(yīng)的元素并實(shí)現(xiàn)不同的操作。（實(shí)例位置：光盤(pán)\TM\sl\4\13）

（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。

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

（2）在頁(yè)面的<body>標(biāo)記中，添加一個(gè)表單，并在該表單中添加復(fù)選框、單選按鈕、圖像域、文件域、密碼域、文本框、普通按鈕、重置按鈕、提交按鈕和隱藏域等input元素，關(guān)鍵代碼如下：

        <form>
            復(fù)選框：<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庫(kù)的代碼下方編寫(xiě)jQuery代碼，實(shí)現(xiàn)匹配表單中的各個(gè)表單元素，并實(shí)現(xiàn)不同的操作，具體代碼如下：

        <script type="text/javascript">
            $(document).ready(function() {
              $(":checkbox").attr("checked", "checked");          //選中復(fù)選框
              $(":radio").attr("checked", "true");                //選中單選框
              $(":image").attr("src", "images/fish1.jpg");        //設(shè)置圖片路徑
              $(":file").hide();                                  //隱藏文件域
              $(":password").val("123");
                //設(shè)置密碼域的值
              $(":text").val("文本框");
                //設(shè)置文本框的值
              $(":button").attr("disabled", "disabled");
                //設(shè)置按鈕不可用
              $(":reset").val("重置按鈕");
                //設(shè)置重置按鈕的值
              $(":submit").val("提交按鈕");
                //設(shè)置提交按鈕的值
        $("#testDiv").append($("input:hidden:eq(1)").val());  //顯
        示隱藏域的值
            });
        </script>

運(yùn)行本實(shí)例，將顯示如圖4.20所示的頁(yè)面。

圖4.20 利用表單選擇器匹配表單中相應(yīng)的元素

官术网_书友最值得收藏!

jQuery從入門(mén)到精通 （軟件開(kāi)發(fā)視頻大講堂）

4.8 表單選擇器

jQuery從入門(mén)到精通（軟件開(kāi)發(fā)視頻大講堂）