JQuery选择器代码

<!--1、基本选择器-->
<script type="text/javascript">
    $(function () {
        //1.改变id为one的元素的背景色为红色
        $("#b1").click(function () {
            $("#one").css("background-color","red");
        });

        //2、改变元素名为 <div> 的所有元素的背景色为 红色
        $("#b2").click(function () {
            $("div").css("background-color","red");
        });

        //3、改变 class 为 mini 的所有元素的背景色为 红色
        $("#b3").click(function () {
            $(".mini").css("background-color","red");
        });

        //4、改变所有的<span>元素和 id 为 two 的元素的背景色为红色
        $("#b4").click(function () {
            $("span,#two").css("background-color","red");
        });
    });
</script>

<!--2、属性选择器-->
<script type="text/javascript">
    $(function () {
        // 1、含有属性title 的div元素背景色为红色
        $("#b1").click(function () {
            $("div[title]").css("background-color","red");
        });

        // 2、属性title值等于test的div元素背景色为红色
        $("#b2").click(function () {
            $("div[title='test']").css("background-color","red");
        });

        // 3、属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色
        $("#b3").click(function () {
            $("div[title!='test']").css("background-color","red");
        });

        // 4、属性title值 以te开始 的div元素背景色为红色
        $("#b4").click(function () {
            $("div[title^='te']").css("background-color","red");
        });

        // 5、属性title值 以est结束 的div元素背景色为红色
        $("#b5").click(function () {
            $("div[title$='test']").css("background-color","red");
        });

        // 6、属性title值 含有es的div元素背景色为红色
        $("#b6").click(function () {
            $("div[title*='es']").css("background-color","red");
        });

        // 7、选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"
        $("#b7").click(function () {
            $("div[id][title*='es']").css("background-color","red");
        });
    });
</script>

<!--3、层级选择器-->
<script type="text/javascript">
    $(function () {
        //1、改变 <body> 内所有 <div> 的背景色为红色
        $("#b1").click(function () {
            $("body div").css("background-color","pink");
        });

        //2、改变 <body> 内子 <div> 的背景色为 红色
        $("#b2").click(function () {
            $("body>div").css("background-color","pink");
        });
    });
</script>

<!-- 4、过滤选择器-->
<script type="text/javascript">
    $(function () {

        // 改变第一个 div 元素的背景色为 红色
        $("#b1").click(function () {
            $("div:first").css("background-color","pink");
        });


        // 改变最后一个 div 元素的背景色为 红色"
        $("#b2").click(function () {
            $("div:last").css("background-color","pink");
        });


        // 改变class不为 one 的所有 div 元素的背景色为 红色"
        $("#b3").click(function () {
            $("div:not(.one)").css("background-color","pink");
        });


        // 改变索引值为偶数的 div 元素的背景色为 红色"
        $("#b4").click(function () {
            $("div:even").css("background-color","pink");
        });


        // 改变索引值为奇数的 div 元素的背景色为 红色"
        $("#b5").click(function () {
            $("div:odd").css("background-color","pink");
        });


        // 改变索引值为大于 3 的 div 元素的背景色为 红色"
        $("#b6").click(function () {
            $("div:gt(3)").css("background-color","pink");
        });


        // 改变索引值为等于 3 的 div 元素的背景色为 红色"
        $("#b7").click(function () {
            $("div:eq(3)").css("background-color","pink");
        });


        // 改变索引值为小于 3 的 div 元素的背景色为 红色"
        $("#b8").click(function () {
            $("div:lt(3)").css("background-color","pink");
        });


        // 改变所有的标题元素的背景色为 红色
        $("#b9").click(function () {
            $(":header").css("background-color","pink");
        });

    });
</script>

<!-- 5、表单过滤选择器-->
<script type="text/javascript">
    $(function () {
        // 1.利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
        $("#b1").click(function () {
            $("input[type='text']:enabled").val("aaa");
        });


        // 2.利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
        $("#b2").click(function () {
            $("input[type='text']:disabled").val("bbb");
        });


        // 3.利用 jQuery 对象的 length 属性获取复选框选中的个数
        $("#b3").click(function () {
            var length = $("input[type = 'checkbox']:checked").length;
            alert(length);//弹出选中的个数
        });


        // 4.利用 jQuery 对象的 length 属性获取下拉框选中的个数
        $("#b4").click(function () {//id为job子元素下拉列表option的选中个数
            var length1 = $("#job > option:selected").length;
            alert(length1);
        });
    });
</script>
猜你喜欢
