jQuery重点掌握的知识

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属性值 选择文件上传框并输出用户选择的文件 选择复选框并输出用户选择的值