初學jQuery(表單選擇器)

:input：text
HTML程式碼：

    <table>
        <tr>
            <td>
                <input type="text" />
                <input type="text" />
            </td>
        </tr>
    </table>

jQuery程式碼：

      $(function () {
            $(":input").css("color", "red");
             $(":text").val("張三");
           })

效果圖:

:button :submit
HTML程式碼：

    <table>
        <tr>
            <td>
                <input type="button" value="我是一個普通按鈕"/>
                <input type="submit" value="我是一個提交按鈕"/>
            </td>
        </tr>
    </table>

jQuery程式碼：

        $(function () {
            $(":button").css("color", "greed");
            $(":submit").css("color", "yellow");
        })

效果圖：

：radio :checked :checkbox:checked
HTML程式碼：

       <table border="1">

            <tr>
                <td>姓名：</td>
                <td>
                    <input type="text" />
                </td>
                <td rowspan="5">
                  <input type="image" src="timg.gif" style="height:100px"/>
                </td>
            </tr>

            <tr>
                <td>性別：</td>
                <td>
                    <input type="radio" id="radio1" value="男" checked="checked" name="sex"/>男
                    <input type="radio" id="radio2" value="女" checked="checked" name="sex"/>女
                </td>

            </tr>

            <tr>
                <td>愛好：</td>
                <td>
                    <input type="checkbox" id="checkbox1" value="足球"/>足球
                    <input type="checkbox" id="checkbox2" value="籃球"/>籃球
                    <input type="checkbox" id="checkbox3" value="乒乓球"/>羽毛球
                </td>

            </tr>

            <tr>
                <td>籍貫：</td>
                <td>
                    <select id="select1">
                        <option>--請選擇--</option>
                        <option>河南省</option>
                        <option>河北省</option>
                        <option>湖北省</option>
                        <option>湖南省</option>
                    </select>
                </td>

            </tr>

            <tr>
                <td>簡介：</td>
                <td>
                    <textarea></textarea>
                </td>
            </tr>

            <tr>
                <td colspan="2" style="text-align:center">
                    <input type="reset" id="chongzhi" value="重置" />
                    <input type="submit" id="tijiao" value="提交" />
                </td>
            </tr>
     </table>

jQuery程式碼：

 $(function () {
            $(":submit").click(function () {
                var name = $(":text").val();
                console.log(name);


                var sex = $(":radio:checked").val();
                console.log(sex);

                var hot = "";
                $(":checkbox:checked").each(function () {
                    hot += $(this).val();
                })
                console.log(hot);

                var drop = $("#select1 :selected").val();
                console.log(drop);
                return false;
            })
        });

效果圖：