1.基本選擇器

<style type="text/css">
    div {
        background: gray;
        width: 200px;
        height: 100px;
    }
</style>

<script src="js/jquery-1.8.3.js"></script>
<script>

    // 所謂的jQuery選擇器就是獲取jQuery物件的不同方式,jQuery中支援多種選擇器

    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // 基本選擇器
    // 1.標識選擇器,通過標記的id屬性來獲取jQuery物件,語法:$("#id")值
    // 2.類選擇器,通過標記的class屬性來獲取jQuery物件,語法:$(".class值")
    // 3.標記選擇器,通過標記名稱來獲取jQuery物件,語法:$("標記名稱")
    // 4.選擇頁面中所有標記選擇器,語法:$("*")
    // 5.組合選擇器,也就是同時使用多種選擇器,選擇器之間通過逗號分隔,語法:$("A,B")


    $(function () {
        // 1.標識選擇器,通過標記的id屬性來獲取jQuery物件,語法:$("#id")值
        $("#btn01").click(function () {
            // 選擇id為one的元素,並且改變其CSS
            $("#one").css("background","red");
        });

        // 2.類選擇器,通過標記的class屬性來獲取jQuery物件,語法:$(".class值")
        $("#btn02").click(function () {
            // 選擇class為two的元素
            $(".two").css("background","red");
        });

        // 3.標記選擇器,通過標記名稱來獲取jQuery物件,語法:$("標記名稱")
        $("#btn03").click(function () {
             // 選擇所有div元素
            $("div").css("background","yellow");
        });

        // 4.選擇頁面中所有標記選擇器,語法:$("*")
        $("#btn04").click(function () {
            //選擇所有元素
            $("*").css("background","yellow");
        });

        // 5.組合選擇器,也就是同時使用多種選擇器,選擇器之間通過逗號分隔,語法:$("A,B")
        $("#btn05").click(function () {
            // 選擇id為one與所有span元素
            $("#one,span").css("background","yellow");
        });
    })

</script>
 

我是span標籤

---

2.表單相關元素選擇器：

文字01：
文字02：
文字03：
文字04：

讀書 美食 旅遊 音樂 購物

北京 上海 廣州 深圳 杭州

選擇可用文字框並修改其值 選擇不可用文字框並修改其值 選擇複選框被選中的元素 選擇下拉列表中被選中的元素

---

3.表單input框選擇器：

// $("#btn05").click(function () {
// //選擇被選中複選框並輸出使用者選擇的值
// var $checkbox = $(“form :checkbox:checked”);
// $checkbox.each(function (i, domObj) {
// alert(“你選中的選項是:” + domObj.value);
// });
// });

        //表單input框選擇器。
        $("btn05").click(function(){

            var $checkbox = $("form :checkbox:checked");
            $checkbox.each(function(i,domobj){
                alert("您選中的選項是：" + domobj.value);
            })
        })
    })

</script>

使用者名稱：

密  碼：

性  別： 男 女

照  片：

興  趣： 音樂 美食 旅遊 購物



選擇文字輸入框並輸出使用者輸入的值 選擇密碼輸入框輸出使用者輸入的密碼 選擇單選框的value屬性值 選擇檔案上傳框並輸出使用者選擇的檔案 選擇複選框並輸出使用者選擇的值