HybridApp开发之jQuery选择器-创新互联

什么是选择器?

 JQuery选择器通过标签名、属性名或者内容对DOM元素进行快速准确的选择,而不必担心浏览器的兼容性,通过JQuery选择器对页面元素精确定位,进而方便完成处理元素属性和行为事件。

成都创新互联是一家专业提供峡江企业网站建设,专注与成都网站设计、网站建设、外贸网站建设H5建站、小程序制作等业务。10年已为峡江众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

选择器的优势

 与传统的JavaScript获取页面元素和事务处理相比,JQuery具备以下几个优势:

  • 代码比较简单

  • 完善的检测机制

1、)代码更简单

在JQuery库中封装了大量可以通过选择器直接调用的函数,使编程更加简单轻松,使用简单的代码就可以使用相对复杂的功能。

2、)完善的检测机制

传统js设置页面元素的事务的时候,先要找到页面上的元素,然后在赋予相应的属性或事件,如果页面元素不存在,则页面会报错。所以要先判断页面元素是否存在。再进行属性或者事件操作。这样会造成代码繁琐。在JQuery定义页面元素的时候,无须考虑页面中是否存在,即使页面中不存在该元素也不会报错,极大的方便了代码的执行效率。

选择器分类

大致分为下面四大类

  • 基本选择器

  • 层次选择器

  • 过滤选择器

  • 表单选择器

过滤选择器又分为以下几个小分类

  • 简单过滤选择器

  • 内容过滤选择器

  • 可见性过滤选择器

  • 属性过滤选择器

  • 子元素过滤选择器

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

接下来挨个学习一下。

基础选择器
  • #id     根据Id匹配一个元素       返回的单个元素

  • .class   根据给定的类名匹配一个元素 返回的是元素集合

  • element 根据元素名匹配一个元素    返回的是元素集合

  • *      匹配所有元素            返回的是元素集合

  • selecttor1,selector2并集,返回两个选择器匹配到的元素 返回的是元素集合

写个小例子学习一下

Hybrid App开发之jQuery选择器


    
    Title
    
    

        .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");
      });    
    第一层
    第二层
 

     段落 

Hybrid App开发之jQuery选择器

层次选择器

 写个小例子学习一下

Hybrid App开发之jQuery选择器


    
    层次选择器
    
    
        #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");
        });    
    
  • 首页
  •     
  • 商城
  •     
  • 分类
  •     
                         风云                          ×××,一遇风云便化龙。
                九霄龙吟惊天变,风云际会潜水游。
                
            
            
                         
        
        

            我要成仙    

    Hybrid App开发之jQuery选择器

    简单过滤选择器

    Hybrid App开发之jQuery选择器

    
        
        简单选择过滤器
        
        
            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行
  • Hybrid App开发之jQuery选择器

    内容过滤选择器:

    Hybrid App开发之jQuery选择器

    
        
        内容过滤选择器
        
        
            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行
  •     

    Hybrid App开发之jQuery选择器

    可见性过滤选择器:

    Hybrid App开发之jQuery选择器

    
        
        可见性过滤选择器
        
        
    
            li.oddLi {
                color: blueviolet;
            }
    
            li.evenLi {
                color: goldenrod;
            }
    
        
        
            $(function () {            //选中符合条件的第一个元素            $("#list > li:hidden").show();
                $("#list > li:visible").addClass("firstLi");
            })    
        
  • 第1行
  •     第2行     
  • 第3行
  •     
  • 第4行
  •     
  • 第5行
  • Hybrid App开发之jQuery选择器

    属性过滤选择器:

    Hybrid App开发之jQuery选择器

    
        
        属性过滤选择器
        
        
            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行
  •     

    Hybrid App开发之jQuery选择器

    子元素过滤选择器:

    Hybrid App开发之jQuery选择器

    
        
        子元素选择过滤器
        
        
            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行
  •     

    Hybrid App开发之jQuery选择器

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

    表单选择器:

    Hybrid App开发之jQuery选择器

    
        
        表单选择器
        
        
            .textColor {
                color: blue;
            }
        
        
    
            $(function () {
                $("#form1 :text").addClass("textColor");
                $("#form1 :radio").addClass("textColor");
                $("#ageSelect").addClass("textColor");
            });    
        
    表单选择器
                 姓名: 
            户口:城镇  农村
            年龄:          18岁以下        18-35岁        36-65岁        65岁以上    
        

    Hybrid App开发之jQuery选择器

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    网站栏目:HybridApp开发之jQuery选择器-创新互联
    链接分享:http://scyanting.com/article/ccijdi.html

    其他资讯