HybridApp开发之jQuery选择器

    
    
    
    

        .firstDiv{
            color: greenyellow;
            font-size: 1em;
            background-color:aliceblue;
        }
        #secondDiv{
            color: blueviolet;
            font-size: 1.5em;
        }
        p{
            color: green;
            font-size: 1em;
        }
    
    
      $(function () {          //ID匹配元素          $("#secondDiv").css("display","block");          //匹配类元素          $(".firstDiv").css("display","none");          //元素名匹配元素          $("div, p").css("display","block");          //合并匹配元素          $("#secondDiv, p").css("display","none");          //匹配所有元素          $("body *").css("display","block");
      });    
    第一层

    
    
    
    
        #topDiv{
            color: black;
            background-color: aliceblue;
            height: 45px;
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }
        div.leftDiv{
            float: left;
            overflow-x: auto;
        }
        ul#menu{
            vertical-align: middle;
        }
        li{
            color: black;
            float:left;
            overflow-x: auto;
            margin-left: 2em;
            margin-right: 2em;
            vertical-align: middle;
        }

        div#content{
            font-size: 1rem;
            text-align: center;
            text-shadow:khaki;
        }

    
    

        $(function () {            //匹配后代元素           $("#topDiv ul").css("display","none");           //匹配子元素            $("#topDiv > ul").css("display","block");            //匹配后面的元素            $("#topDiv + div").css("display","none");
            $("#topDiv").next().css("display","none");            //匹配后面的所有相邻元素            $("#topDiv ~div").css("display","block");
            $("#topDiv").nextAll().css("display","none");
        });    
    
首页
    
商城
    
分类

简单过滤选择器

• :first或first()　　　匹配第一个元素  返回的单个元素

• :last或last()　　　 匹配最后一个元素 返回的单个元素

• :not(selector)　　 匹配非selector能匹配到的元素 返回的是元素集合

• :even　　　　　　 匹配索引值为偶数的元素，索引号从0开始 返回的是元素集合

• :odd　　　　　　　匹配索引值为奇数的元素，索引号从0开始 返回的是元素集合

• :eq(index)　　　　匹配指定索引号的元素，索引号从0开始 返回的单个元素

• :gt(index)　　　　匹配索引号大于给定索引值的元素，索引号从0开始 返回的是元素集合

• :lt(index)　　　　 匹配索引号小于给定索引值的元素，索引号从0开始 返回的是元素集合

• :header　　　　　匹配所有的标题元素  h2 h3 h4 h5 h6 h7 返回的是元素集合

• :animated　　　　匹配所有正在执行动画的元素 返回的是元素集合

    
    
    
    
        li.firstLi {
            color: saddlebrown;
        }

        li.lastLi {
            color: red;
        }

        li.oddLi {
            color: blueviolet;
            font-size: 1em;
        }

        li.evenLi {
            color: goldenrod;
            font-size: 1em;
        }

        li.fiveLi {
            color: blueviolet;
            font-size: 2em;
        }

    
    

        $(function () {            //选中符合条件的第一个元素            $("#list > li:first").addClass("firstLi");            //选中符合条件的最后一个元素            $("#list > li:last").addClass("lastLi");            //符合条件但不能被selector选中的元素            $("#list > li:not('.secondLi')").addClass("lastLi");            //获取指定索引值为奇数的元素(1、3、5、7、9......)，注意索引号是从1开始的            $("#list > li:odd").addClass("oddLi");            //获取指定索引值为偶数的元素(0、2、4、6、8……)，注意索引号是从0开始的            $("#list > li:even").addClass("evenLi");            //选取指定索引值的元素，索引值从0开始            $("#list > li:eq(4)").addClass("fiveLi");            //获取所有索引值大于index的元素，索引号从0开始            $("#list > li:gt(4)").addClass("fiveLi");            //获取所有索引值小于index的元素，索引号从0开始            $("#list > li:lt(4)").addClass("evenLi");
        })    
    
第1行
    第2行
    
第3行
    
第4行
    
第5行
    
第6行
    
第7行
    
第8行

内容过滤选择器：

• :contains(text)　　匹配包含给定文本的元素

• :empty　　　　　　匹配所有不包含子元素或者文本的空元素

• :has(selector)　　  匹配后代中含有selector能匹配上元素的元素

• :parent　　　　　　匹配含有子元素或者文本的元素

    
    
    
    
        li.firstLi {
            color: saddlebrown;
        }

        li.lastLi {
            color: red;
        }

        li.oddLi {
            color: blueviolet;
        }

        li.evenLi {
            color: goldenrod;
        }

        li.fiveLi {
            color: blueviolet;
        }
    
    

        $(function () {            //选中符合条件的第一个元素            $("#list > li:contains('第4行')").addClass("firstLi");
            $("#list > li:empty").css("display", "none");
            $("#list > li:has('b')").addClass("firstLi");
            $("div:parent").css("display", "none");
        })    

    
        
第1行
        第2行
        
第3行
        
第4行
        
第5行
        
第6行
        

        
第7行
        
第8行
    

可见性过滤选择器：

• :hidden　　　　　　匹配不可见元素，或者type="hidden"的元素　含有css样式:display:"none";的元素，无论CSS是内联，导入，链接式

• :visible　　　　　　 获取所有的可见元素

    
    
    
    

        li.oddLi {
            color: blueviolet;
        }

        li.evenLi {
            color: goldenrod;
        }

    
    
        $(function () {            //选中符合条件的第一个元素            $("#list > li:hidden").show();
            $("#list > li:visible").addClass("firstLi");
        })    
    
第1行
    第2行
    
第3行
    
第4行
    
第5行

属性过滤选择器：

• [attribute]　　　　　　　　 匹配含有给定属性的元素

• [attribute=value]　　　　   匹配含有属性=value的元素

• [attribute!=value]　　　　  匹配含有属性但!=value的元素

• [attribute^=value]　　　　 匹配属性值是以value开始的元素

• [attribute$=value]　　　　  匹配属性值是以value结束的元素

• [attribute*=value]　　　　  匹配属性值包含某些值的元素，部分前后，中间有也算

• [selector][selector]　　　　 匹配属性选择器的交集

    
    
    
    
        li.firstLi {
            color: saddlebrown;
        }

        li.lastLi {
            color: red;
        }

        li.oddLi {
            color: blueviolet;
            font-size: 1em;
        }

        li.evenLi {
            color: goldenrod;
            font-size: 1em;
        }

    
    

        $(function () {            //匹配所有含有id的元素            $("#list > li[id]").addClass("firstLi");            //选中id等于testLi的元素            $("#list > li[id='testLi']").addClass("lastLi");            //选中id不等于testLi的元素            $("#list > li[id!='testLi']").addClass("lastLi");            //选中id属性以test开头的元素            $("#list > li[id^='test']").addClass("oddLi");            //选中id属性以Li2结尾的元素            $("#list > li[id$='Li2']").addClass("evenLi");            //选中id属性包含Li的元素            $("#list > li:lt(4)[id*='Li']").addClass("oddLi");
        })    

    
        
第1行
        第2行
        第3行
        第4行
        
第5行
        
第6行
        

        第7行
        
第8行
    

子元素过滤选择器：

• :nth-child(eq|even|odd|index)　　获取所有父元素特定位置的子元素

• :first　　　　　　　　　　　 获取所有父元素下的第一个子元素

• :last　　　　　　　　　　　 获取所有父元素下最后一个子元素

• :only-child　　　　　　　　 获取所有父元素下唯一的一个元素

    
    
    
    
        li.firstLi {
            color: saddlebrown;
        }

        li.lastLi {
            color: red;
        }

        li.oddLi {
            color: blueviolet;
            font-size: 1em;
        }

        li.evenLi {
            color: goldenrod;
            font-size: 1em;
        }

    
    

        $(function () {            //选中li父元素第三个元素            $("li:nth-child(3)").addClass("lastLi");            //选中li父元素第一个元素            $("li:first-child").addClass("lastLi");            //选中li父元素最后一个元素            $("li:last-child").addClass("lastLi");            //选中li父元素只有一个元素的元素            $("li:only-child").addClass("lastLi");
        })    

    
        
第1行
        第2行
        第3行
        第4行
        
第5行
        
第6行
        

        第7行
        
第8行
    

表单对象属性过滤选择器：

• :enabled　　　获取表单中所有可用的元素

• :disabled　　　获取表单中所有不可用的元素

• :checked　　　获取表单张所有被选中的元素

• :selected　　　获取表单中所有被选中的option的元素

表单选择器：

• :input　　　　　获取所有的表单元素

• :text　　　　　 获取所有的单行文本框　　

• :password　　 获取所有的密码框元素      

• :radio　　　　  获取所有的单选按钮　　　

• :checkbox　　 获取所有的复选框　　　　

• :submit　　　  获取所有的提交按钮　　　

• :p_w_picpath　　　　获取所有的图像按钮　　

• :reset　　　　  获取所有的重置按钮　　　

• :button　　　　获取所有的按钮　　　　　

• :file　　　　　　获取所有的文件上传框　　

    
    
    
    
        .textColor {
            color: blue;
        }
    
    

        $(function () {
            $("#form1 :text").addClass("textColor");
            $("#form1 :radio").addClass("textColor");
            $("#ageSelect").addClass("textColor");
        });    

    
表单选择器
    
        姓名： 

        户口：城镇  农村

        年龄： 
        18岁以下        18-35岁        36-65岁        65岁以上