JQ表單選擇器和CSS3表單選擇器

　　JQ表單選擇器

　　　　為了使用戶能夠更加靈活地操作表單，jQuery中加入了表單選擇器，利用這個選擇器能極其方便的獲取到表單的某個或者某類型的元素。表單選擇器的介紹如圖：

　　　　　　　　

　　　　我們要着重強調的是:input, :submit, :reset, :button, :hidden選擇器。因為有一些細節需要我們特別注意（並不能顧名思義）。

　　　　測試HTML代碼：

　　　　

　　<input type="text" name="text" value="">
    <input type="radio" name="radio" value="">
    <input type="checkbox" name="checkbox" value="">
    <input type="hidden" name="hidden" value="">
    <input type="text" name="textHidden" hidden>
    <input type="text" name="textVisility" style="visibility: hidden">
    <input type="text" name="textDisplay" style="display: none">
    <input type="submit" name="submit" value="submit">
    <input type="button" name="button" value="button">
    <input type="reset" name="reset" value="reset">
    <button type="button">buttonBtn</button>
    <textarea>textarea</textarea>
    <select name="section">
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
        <option value="four">four</option>
    </select>
19     <button type="submit">submitBtn</button>
20     <button type="reset">resetBtn</button>

　　　　首先是:input 選擇器選取所有的<input>, <textarea>, <select>, <button>元素。JQ代碼:

$(':input').css('border', '1px solid red');   測試效果如圖： 

    　　

 　　　　結果： 所有的<input>, <textarea>, <select>, <button>元素都被添加邊框。 

　　　　接着測試:submit選擇器, JQ代碼：   $(':submit').css('border', '1px solid red');   測試效果如圖：

　　　　

　　　　　結果： 不管是<input>,還是<button>元素，type值等於"submit"，就會被添加邊框。

　　　　　接着測試:reset選擇器， JQ代碼：  $(':reset').css('border', '1px solid red');   測試效果圖：

　　　　

　　　　　結果： 不管是<input>,還是<button>元素，type值等於"reset"，就會被添加邊框。

　　　　　接着測試:button選擇器,  JQ代碼：   $(':button').css('backgroundColor', 'orange');   測試效果圖：

　　　　

　　　　　結果： 我們發現只有<button>元素以及是<input>且type值等於"button"的元素才被添加背景色為橙色。

　　　　　最后測試的是:hidden 選擇器，  JQ代碼：  $(':hidden').css('backgroundColor' 'green');  測試效果圖：

　　　　　

　　　　　結果： 只有<input>且type值是"hidden", 具有HTML5屬性 hidden的， display: none的元素才會被添加背景色為綠色，注意visibility: hidden的元素並不會被設置背景色。JQ有一個:visible選擇器，可以擴展下。地址

　　CSS3表單選擇器

　　　　CSS3新增的表單選擇器有三個 :enabled  選擇每個啟用的 <input> 元素。, :disabled 選擇每個禁用的 <input> 元素, :checked 選擇每個被選中的<input> 元素。特別注意：這三個表單選擇器只針對<input>元素，而且:checked選擇器只有歐朋瀏覽器支持。具體的移步W3C底部。