Jquery 选择器总结

最新推荐文章于 2025-05-14 22:27:35 发布

Milanpiaoxiang

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量793

点赞数

分类专栏： javascript+ajax 文章标签： jquery function div input button header

本文链接：https://blog.youkuaiyun.com/Milanpiaoxiang/article/details/6452853

版权

javascript+ajax 专栏收录该内容

4 篇文章

订阅专栏

/*基本选择器*/
        /*******************************/
        //ID匹配元素选择ID为divOne的元素
        $("#divOne").css("display", "block");
        //元素名匹配元素选择所有div中所有元素名为span的页面元素
        $("div span").css("display", "block");
        //类匹配元素选择类名clsFrame 中所有类名为clsOne的子元素
        $(".clsFrame .clsOne").css("display", "block");
        //匹配所有元素
        $("*").css("display", "block");
        //合并匹配元素选择ID名为divOne和元素名为Span的页面元素
        $("#divOne,span").css("display", "block");

/*层次选择器*/
        /*******************************/
        $(function () { //匹配后代元素匹配DIV中所有元素名为Span的元素
            $("#divMid").css("display", "block");
            $("div span").css("display", "block");
        })
        $(function () { //匹配子元素匹配DIV中元素名为span的子元素
            $("#divMid").css("display", "block");
            $("div>span").css("display", "block");
        })
        $(function () { //匹配后面元素匹配ID为divMid的相邻元素
            $("#divMid + div").css("display", "block");
            $("#divMid").next().css("display", "block");
        })
        $(function () { //匹配所有后面元素
            $("#divMid ~ div").css("display", "block");
            $("#divMid").nextAll().css("display", "block");
        })
        $(function () { //匹配所有相邻元素
            $("#divMid").siblings("div").css("display", "block");
        })

/*简单过滤选择器*/
        /*******************************/
        $(function () { //增加第一个元素的类别
            $("li:first").addClass("GetFocus");
        })
        $(function () { //增加最后一个元素的类别
            $("li:last").addClass("GetFocus");
        })
        $(function () { //增加去除所有与给定选择器匹配的元素类别
            $("li:not(.NotClass)").addClass("GetFocus");
        })
        $(function () { //增加所有索引值为偶数的元素类别,从0开始计数
            $("li:even").addClass("GetFocus");
        })
        $(function () { //增加所有索引值为奇数的元素类别,从0开始计数
            $("li:odd").addClass("GetFocus");
        })
        $(function () { //增加一个给定索引值的元素类别,从0开始计数
            $("li:eq(1)").addClass("GetFocus");
        })
        $(function () { //增加所有大于给定索引值的元素类别,从0开始计数
            $("li:gt(1)").addClass("GetFocus");
        })
        $(function () { //增加所有小于给定索引值的元素类别,从0开始计数
            $("li:lt(4)").addClass("GetFocus");
        })
        $(function () { //增加标题类元素类别
            $("div h1").css("width", "238");
            $(":header").addClass("GetFocus");
        })
        $(function () {
            animateIt(); //增加动画效果元素类别
            $("#spnMove:animated").addClass("GetFocus");
        })
        function animateIt() { //动画效果
            $("#spnMove").slideToggle("slow", animateIt);
        }

/*内容过滤选择器*/
        /*******************************/
        $(function () { //显示包含给定文本的元素
            $("div:contains('A')").css("display", "block");
        })
        $(function () { //显示所有不包含子元素或者文本的空元素
            $("div:empty").css("display", "block");
        })
        $(function () { //显示含有选择器所匹配的元素的元素
            $("div:has(span)").css("display", "block");
        })
        $(function () { //显示含有子元素或者文本的元素
            $("div:parent").css("display", "block");
        })

/*可见性过滤选择器*/
        /*******************************/
        $(function () { //增加所有可见元素类别
            $("span:hidden").show();
            $("div:visible").addClass("GetFocus");
        })
        $(function () { //增加所有不可见元素类别
            $("span:hidden").show().addClass("GetFocus");
        })

/*属性过滤选择器*/
        /*******************************/
        $(function () { //显示所有含有id属性的元素
            $("div[id]").show(3000);
        })
        $(function () { //显示所有属性title的值是"A"的元素
            $("div[title='A']").show(3000);
        })
        $(function () { //显示所有属性title的值不是"A"的元素
            $("div[title!='A']").show(3000);
        })
        $(function () { //显示所有属性title的值以"A"开始的元素
            $("div[title^='A']").show(3000);
        })
        $(function () { //显示所有属性title的值以"C"结束的元素
            $("div[title$='C']").show(3000);
        })
        $(function () { //显示所有属性title的值中含有"B"的元素
            $("div[title*='B']").show(3000);
        })
        $(function () { //显示所有属性title的值中含有"B"且属性id的值是"divAB"的元素
            $("div[id='divAB'][title*='B']").show(3000);
        })

/*子元素过滤选择器*/
        /*******************************/
        $(function () { //增加每个父元素下的第2个子元素类别
            $("li:nth-child(2)").addClass("GetFocus");
        })
        $(function () { //增加每个父元素下的第一个子元素类别
            $("li:first-child").addClass("GetFocus");
        })
        $(function () { //增加每个父元素下的最后一个子元素类别
            $("li:last-child").addClass("GetFocus");
        })
        $(function () { //增加每个父元素下只有一个子元素类别
            $("li:only-child").addClass("GetFocus");
        })

/*表单过滤选择器*/
        /*******************************/
        $(function () { //增加表单中所有属性为可用的元素类别
            $("#divA").show(3000);
            $("#form1 input:enabled").addClass("GetFocus");
        })
        $(function () { //增加表单中所有属性为不可用的元素类别
            $("#divA").show(3000);
            $("#form1 input:disabled").addClass("GetFocus");
        })
        $(function () { //增加表单中所有被选中的元素类别
            $("#divB").show(3000);
            $("#form1 input:checked").addClass("GetFocus");
        })
        $(function () { //显示表单中所有被选中option的元素内容
            $("#divC").show(3000);
            $("#Span2").html("选中项是：" + $("select option:selected").text());
        })

        $(function () { //显示Input类型元素的总数量
            $("#form1 div").html("表单共找出 Input 类型元素:" + $("#form1 :input").length);
            $("#form1 div").addClass("div");
        })
        $(function () { //显示所有文本框对象
            $("#form1 :text").show(3000);
        })
        $(function () { //显示所有密码框对象
            $("#form1 :password").show(3000);
        })
        $(function () { //显示所有单选按钮对象
            $("#form1 :radio").show(3000);
            $("#form1 #Span1").show(3000);
        })
        $(function () { //显示所有复选框对象
            $("#form1 :checkbox").show(3000);
            $("#form1 #Span2").show(3000);
        })
        $(function () { //显示所有提交按钮对象
            $("#form1 :submit").show(3000);
        })
        $(function () { //显示所有图片域对象
            $("#form1 :image").show(3000);
        })
        $(function () { //显示所有重置按钮对象
            $("#form1 :reset").show(3000);
        })
        $(function () { //显示所有按钮对象
            $("#form1 :button").show(3000);
        })
        $(function () { //显示所有文件域对象
            $("#form1 :file").show(3000);
        })