網頁

▼

jQuery - Selectors (8) Form - 表單選擇器

jQuery表單選擇器簡介

表單(form)為網頁與使用者互動最主要的元素，而表單選擇器可讓我們可以得知目前表單的狀態，進而進行相關處理。

jQuery表單選擇器速查表

jQuery表單選擇器
選擇器 說明 範例
:button 選擇button元素和type="button"的input元素 $(':button')
:checkbox 選擇type="checkbox"的input元素 $(':checkbox')
:checked 選擇已勾選(checkbox)或已選擇(radio)的input元素 $(':checked')
:disabled 選擇設定disabled屬性的input元素 $(':disabled')
:enabled 選擇未設定disabled屬性的input元素 $(':enabled')
:focus 選擇目前焦點所在的元素，注意，不限於input元素 $(':focus')
:file 選擇type="file"屬性的input元素 $(':file')
:image 選擇type="image"屬性的input元素 $(':image')
:input 選擇input、textarea、select、button元素 $(':input')
:password 選擇type="password"屬性的input元素 $(':password')
:radio 選擇type="radio"屬性的input元素 $(':radio')
:reset 選擇type="reset"屬性的input元素 $(':reset')
:selected 選擇所有option元素裡被選擇項目 $(':selected')
:submit 選擇button元素與type="submit"屬性的input元素 $(':submit')
:text 選擇type="text"屬性的input元素 $(':text')



jQuery表單選擇器範例

:button選擇器範例：搜尋所有button元素

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <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>
  <div>
  </div>
<script>
// 1. 選擇所有button元素和type="button"的元素，進行css設定動作
var input = $(":button").css({background:"yellow", border:"3px red solid"});
// 1. 在div元素寫入文字
$("div").text("For this type jQuery found " + input.length + ".").css("color", "red");
// 1. 取消表單submit功能
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
因為:button是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:button無法提供更好效能，建議先使用純CSS選擇器，然後使用.filter(":button")來實現更好的效能。

:checkbox選擇器範例：搜尋所有checkbox元素

$(':checkbox')等於$('[type=checkbox]')。如同其他虛擬類別(pseudo-class)選擇器(它們都是以":"為開頭)，建議在它們之前加上一個標籤名稱(tag name)或其他選擇器。否則，萬用選擇器("*")被預設使用。言外之意，$(':checkbox')是等於$('*:checkbox')，應該使用$('input:checkbox')來替代。

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <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>
  <div>
  </div>
<script>
// 1. 由form元素的input子元素找出所有type=checkbox元素
// 2. 在選擇的元素外，外包上HTML元素(span)
// 3. 回上層元素(span)，進行CSS設定
// KKBruce: 你會看到包兩層顏色的checkbox，外紅(border效果)內黃(background效果)
var input = $("form input:checkbox").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
// 1. 在div元素裡新增文字
$("div").text("For this type jQuery found " + input.length + ".").css("color", "red");
// 1. 取消表單submit功能
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
因為:checkbox是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:checkbox無法提供更好效能，在主流瀏覽器下想得到更好效能，使用[type="checkbox"]來替代。

:checked選擇器範例：搜尋所有input元素裡已勾選或選擇的元素

:checked選擇器作用在 type=checkbox 和 type=radio 元素上。在清單元素(select)中，使用:selected選擇器。

:checked範例一

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
  <p>
    <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
    <input type="checkbox" name="newsletter" value="Daily" />
    <input type="checkbox" name="newsletter" value="Weekly" />
    <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
    <input type="checkbox" name="newsletter" value="Yearly" />
  </p>
</form>
<div></div>
<script>
// 1. 計算已選擇元素數量的函式
function countChecked() {
  // 1. 找出input元素裡所有已選擇的元素數量
  var n = $("input:checked").length;
  // 2. 在div元素裡寫入訊息
  $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
}
// 1. 執行計算
countChecked();
// 1. 當checkbox或radio被點擊時，重新執行countChecked()函式
$(":checkbox").click(countChecked);
</script>
</body>
</html>

:checked範例二

<!DOCTYPE html>
<html>
<head>
  <style>
input, label { line-height: 1.5em; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
  <div>
    <input type="radio" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>
<script>
// 1. 當input元素被點擊時執行
$("input").click(function() {
  // 2. 在id="#log"元素裡寫入HTML字串
  // 3. 過濾出被選擇元素的值
  $("#log").html( $(":checked").val() + " is checked!" );
});
</script>
</body>
</html>

:disabled選擇器範例：搜尋所有input元素裡有設定disabled屬性的元素

如同其他虛擬類別(pseudo-class)選擇器(它們都是以":"為開頭)，建議在它們之前加上一個標籤名稱(tag name)或其他選擇器。否則，萬用選擇器("*")被預設使用。言外之意，$(':disabled')是等於$('*:disabled')，應該使用$('input:disabled')來替代。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
<script>
// 1. 搜尋所有input元素裡有設定disabled屬性的元素
$("input:disabled").val("this is it");</script>
</body>
</html>

:enabled選擇器範例：搜尋所有input元素裡有未設定disabled屬性的元素

如同其他虛擬類別(pseudo-class)選擇器(它們都是以":"為開頭)，建議在它們之前加上一個標籤名稱(tag name)或其他選擇器。否則，萬用選擇器("*")被預設使用。言外之意，$(':enabled')是等於$('*:enabled')，應該使用$('input:enabled')來替代。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
<script>
// 1. 搜尋所有input元素裡未設定disabled屬性的元素
$("input:enabled").val("this is it");</script>
</body>
</html>
很明顯，:disabled與:enabled是完全相反的選擇器。

:focus選擇器範例：焦點所在的元素，新增一個class="focused"屬性

如同其他虛擬類別(pseudo-class)選擇器(它們都是以":"為開頭)，建議在它們之前加上一個標籤名稱(tag name)或其他選擇器。否則，萬用選擇器("*")被預設使用。言外之意，$(':focus')是等於$('*:focus')。如果你正在尋搜現在的焦點元素，$(document.activeElement)將會擷取它而不用搜尋整個DOM樹。

<!DOCTYPE html>
<html>
<head>
  <style>
.focused {
    background: #abcdef;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu</option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>
<script>
// 1. .delegate 可以動態綁定一個或多個事件
// 2. 為id="#content"下所有元素綁定focus及blur事件
$( "#content" ).delegate( "*", "focus blur", function( event ) {
 // 1. 取得觸發的元素
    var elem = $( this );
 // 2. setTimeout():於指定的時間執行(毫秒)
    setTimeout(function() {
  // 3. 觸發的元素進行切換class的動作
  elem.toggleClass( "focused", elem.is( ":focus" ) );},
  // 0毫秒，代表立即執行 
  0);
});
</script>
</body>
</html>

:file選擇器範例：搜尋所有input元素裡type="file"屬性的元素

$(':file')等於[type="file"]。如同其他虛擬類別(pseudo-class)選擇器(它們都是以":"為開頭)，建議在它們之前加上一個標籤名稱(tag name)或其他選擇器。否則，萬用選擇器("*")被預設使用。言外之意，$(':file')是等於$('*:file')，應該使用$('input:file')來替代。

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <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>
  <div>
  </div>
<script>
// 1. 找出input元素中所有type="file"的元素，進行CSS設定
var input = $("input:file").css({background:"yellow", border:"3px red solid"});
// 1. 在div元素裡寫入文字
$("div").text("For this type jQuery found " + input.length + ".").css("color", "red");
// 1. 取消表單submit功能
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
因為:file是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:file無法提供更好效能，在主流瀏覽器下想得到更好效能，使用[type="file"]來替代。

:image選擇器範例：搜尋所有input元素裡type="image"屬性的元素

:image等於[type="image"]。

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <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>
  <div>
  </div>
<script>
// 1. 找出input元素中所有type="image"的元素，進行CSS設定
var input = $("input:image").css({background:"yellow", border:"3px red solid"});
// 1. 在div元素裡寫入文字
$("div").text("For this type jQuery found " + input.length + ".").css("color", "red");
// 1. 取消表單submit功能
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
因為:iamge是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:image無法提供更好效能，在主流瀏覽器下想得到更好效能，使用[type="image"]來替代。

:input選擇器範例：搜尋所有input元素

:input選擇器基本上是會選擇所有表單控制項目。

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <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>
  <div id="messages">
  </div>
<script>
// 1. 找出所有input元素
var allInputs = $(":input");
// 2 找出form元素之後所有第一層元素
var formChildren = $("form > *");
// 3. 在id="#messages"寫入訊息
$("#messages").text("Found " + allInputs.length + " inputs and the form has " +
                     formChildren.length + " children.");
        
// 4. 取消submit功能
$("form").submit(function () { return false; }); 
</script>
</body>
</html>
因為:input是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:input無法提供更好效能，建議先使用純CSS選擇器，然後使用.filter(":input")來實現更好的效能。

:password選擇器範例：搜尋所有input元素裡type="password"屬性的元素

$(':password')等於$('[type=password]')。如同其他虛擬類別(pseudo-class)選擇器(它們都是以":"為開頭)，建議在它們之前加上一個標籤名稱(tag name)或其他選擇器。否則，萬用選擇器("*")被預設使用。言外之意，$(':password')是等於$('*:password')，應該使用$('input:password')來替代。

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <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>
  <div>
  </div>
<script>
// 1. 找出input元素中所有type="password"的元素，進行CSS設定
var input = $("input:password").css({background:"yellow", border:"3px red solid"});
// 1. 在div元素裡寫入文字
$("div").text("For this type jQuery found " + input.length + ".")
        .css("color", "red");
// 1. 取消表單submit功能
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
因為:password是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:password無法提供更好效能，在主流瀏覽器下想得到更好效能，使用[type="password"]來替代。

:radio選擇器範例：搜尋所有input元素裡type="password"屬性的元素

$(':radio')等於$('[type=radio]')。如同其他虛擬類別(pseudo-class)選擇器(它們都是以":"為開頭)，建議在它們之前加上一個標籤名稱(tag name)或其他選擇器。否則，萬用選擇器("*")被預設使用。言外之意，$(':radio')是等於$('*:radio')，應該使用$('input:radio')來替代。

選擇設定一個關聯的radio，可以使用$('input[name=gender]:radio')。

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <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>
  <div>
  </div>
<script>
// 1. 由form元素的input子元素找出所有type=radio元素
// 2. 在選擇的元素外，外包上HTML元素(span)
// 3. 回上層元素(span)，進行CSS設定
// KKBruce: 你會看到包兩層顏色的checkbox，外紅(border效果)內黃(background效果)
var input = $("form input:radio").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
// 1. 在div元素裡寫入文字
$("div").text("For this type jQuery found " + input.length + ".").css("color", "red");
// 1. 取消表單submit功能
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
因為:radio是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:radio無法提供更好效能，在主流瀏覽器下想得到更好效能，使用[type="radio"]來替代。

:reset選擇器範例：搜尋所有input元素裡type="reset"屬性的元素

$(':reset')等於$('[type="reset"]')。

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <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>
  <div>
  </div>
<script>
// 1. 搜尋所有input元素裡type="reset"屬性的元素，進行CSS設定
var input = $("input:reset").css({background:"yellow", border:"3px red solid"});
// 1. 在div元素裡寫入文字
$("div").text("For this type jQuery found " + input.length + ".").css("color", "red");
// 1. 取消表單submit功能
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
因為:reset是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:reset無法提供更好效能，在主流瀏覽器下想得到更好效能，使用[type="reset"]來替代。

:selected選擇器範例：附加一個change事件至select元素，每當選取的選項改變時，立即將選取內容寫入div元素。

:selected選擇器作用在<option>元素。它對於input元素裡的checkbox和radio無效果，對於checkbox與radio請使用:checked選擇器。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <select name="garden" multiple="multiple">
    <option>Flowers</option>
    <option selected="selected">Shrubs</option>
    <option>Trees</option>
    <option selected="selected">Bushes</option>
    <option>Grass</option>
    <option>Dirt</option>
  </select>
  <div></div>
<script>
// 1. 任何select裡的元素有變動
$("select").change(function () {
    // 2. 產生一個空字串
 var str = "";
 // 3. 由option裡選擇所有已被選取的項目
 // 4. .each():由前面的集合進行for each迴圈
    $("select option:selected").each(function () {
  // 5. 取出option的值，串接字串
        str += $(this).text() + " ";
    });
 // 6. 在div元素裡寫入字串
    $("div").text(str);
}).trigger('change'); // 7. 觸發 change 事件
</script>
</body>
</html>
因為:selected是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:selected無法提供更好效能，建議先使用純CSS選擇器，然後使用.filter(":selected")來實現更好的效能。

注意，select元素可以單選，也能複選。還有trigger的使用。trigger它會觸發select的change事件來初始化文字的寫入。

:submit選擇器範例：搜尋所有button元素與input元素裡type="submit"屬性的元素

:submit選擇器適用於button或input元素。注意，一些瀏覽器會將<button>元素預設當成type="default"來處理，而其他瀏覽器(例如，Internet Explorer)則不會。

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>  
<table>
<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">
    <tr>
        <th>
            Element Type
        </th>
        <th>
            Element
        </th>
    </tr
    <tr>
        <td>
            <input type="button" value="Input Button"/>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="file" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="hidden" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="image" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="password" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="radio" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="reset" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="submit" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <select><option>Option</option></select>
        </td>
    </tr>
    <tr>
        <td>
            <textarea></textarea>
        </td>
    </tr>
    <tr>
        <td>
            <button>Button</button>
        </td>
    </tr>
    <tr>
        <td>
            <button type="submit">Button type="submit"</button>
        </td>
    </tr>
</table>
</form>
<div id="result"></div>
<script>
// 1. 由td元素裡找button元素與type="submit"屬性的元素
var submitEl = $("td :submit")
  .parent('td') // 2. 回上層
  .css({background:"yellow", border:"3px red solid"}) // 3. 進行CSS設定
.end(); // 4. 結束chain處理
// 1. 在id="result"元素內寫入文字
$('#result').text('jQuery matched ' + submitEl.length + ' elements.');
// 1. 取消form元素裡的submit功能
$("form").submit(function () { return false; });

// Extra JS to make the HTML easier to edit (None of this is relevant to the ':submit' selector
// 這段JS在抓取Element的td裡input元素的屬性，產生表格Element Type的td
// 1. 由id="exampleTable"元素裡所td元素，然後做對td元素集合for each動作
// 2. i 代表index，el 代表 element
$('#exampleTable').find('td').each(function(i, el) {
 // 1. el 裡找下一個子元素(td裡的下一個子元素)
    var inputEl = $(el).children(),
  // 1.1 由td裡的子元素取得type屬性
        inputType = inputEl.attr('type') ? ' type="' + inputEl.attr('type') + '"' : '';
 // 2.  在el的上面寫入一個HTML元素(td元素上面寫入一個HTML元素)
 // 2.2 inputEl[0].nodeName + inputType --> 組合出類似 BUTTON type="submit" 字串
    $(el).before('<td>' + inputEl[0].nodeName + inputType + '</td>');
})
</script>
</body>
</html>
因為:submit是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:submit無法提供更好效能，在主流瀏覽器下想得到更好效能，使用[type="submit"]來替代。

另外在此範例中，我們也看到如何抓取元素屬性，如何動態新增HTML元素示範。

:text選擇器範例：搜尋所有input元素裡type="text"屬性的元素

$(':text')等於$('[type=text]')，如此選擇所有<input type="text">元素。如同其他虛擬類別(pseudo-class)選擇器(它們都是以":"為開頭)，建議在它們之前加上一個標籤名稱(tag name)或其他選擇器。否則，萬用選擇器("*")被預設使用。言外之意，$(':text')是等於$('*:text')，應該使用$('input:text')來替代。

補充：在jQuery 1.52，:text選擇的input元素沒有特別指定type屬性(這種情況下，type="text"是隱含的)。

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <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>
  <div>
  </div>
<script>
// 1. 由form元素裡的input元素中找出所有type="text"屬性的元素，進行CSS設定
var input = $("form input:text").css({background:"yellow", border:"3px red solid"});
// 1. 在div元素寫入文字且進行CSS設定
$("div").text("For this type jQuery found " + input.length + ".").css("color", "red");
// 1. 取消form元素的submit功能
$("form").submit(function () { return false; }); // so it won't submit
</script>
</body>
</html>
因為:text是jQuery延伸，並非正規CSS規格的一部份，在DOM的querySelectorAll()函式時，使用:text無法提供更好效能，在主流瀏覽器下想得到更好效能，使用[type="text"]來替代。

KKBruce補充

1. 借:disabled選擇器，我想討論一個input元素裡兩個屬性，disabled與readonly。

  • disabled="disabled"，代表無法選擇、變更。
  • readonly="readonly"，代表無法變更。
這裡的變更是指使用者透過鍵盤來變更，在:disabled的範例中，我們看到，雖然input元素已經設定為disabled="disabled"，但我們依然可以透過jQuery去修改input元素裡的值，在一些連動式或流程式設計中，如果我們不希望使用者修改某些資料，而是透過程式來連動產生結果，就可參考範例來設計。

2. :focus選擇器是一個我們常用的功能，不過它會去掃瞄整個DOM樹，記得利用$(document.activeElement)來取得目前的焦點元素。

3. 虛擬類別(pseudo-class)選擇器(它們都是以":"為開頭)通常都可以用屬性過濾器([name=value])來替代。

jQuery基礎選擇器修改歷程

[2012/1/12] 參考 jQuery 1.7 文件翻譯編寫。

於

沒有留言:

張貼留言

感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。