快上网建站品牌

13518219792

HybridApp开发之jQuery选择器

什么是选择器？

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

成都创新互联专注于丽水企业网站建设,响应式网站建设,商城系统网站开发。丽水网站建设公司,为丽水等地区提供建站服务。全流程定制制作，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

选择器的优势

 与传统的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选择器

层次选择器

  • ancestor descendant   根据祖先匹配所有的后代元素 返回的是元素集合

  • parent>child                根据父元素匹配所有的子元素，直接后代 返回的是元素集合

  • prev+next　                匹配下一个兄弟元素 相当于next()方法 返回的是元素集合

  • prev~siblings　            匹配后面的兄弟元素 相当于nextAll()方法，siblings()方法为匹配所有的兄弟元素 返回的是元素集合

 写个小例子学习一下

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选择器


    当前题目：HybridApp开发之jQuery选择器
    当前网址：http://csdahua.cn/article/ihioio.html
    扫二维码与项目经理沟通

    我们在微信上24小时期待你的声音

    解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

    其他资讯

    行业动态

    企业网站建设的重要性！

    现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...

    服务项目

    联系吧 在百度地图上找到我们

    电话：13518219792

    如遇占线或暂未接听请拨：136xxx98888

    业务咨询 技术咨询 售后服务
    网站制作
    成都网站制作
    成都网站制作公司
    成都网站制作
    成都网站制作
    网站建设
    企业网站建设
    成都网站建设
    定制级高端网站建设
    邛崃网站建设
    网站设计
    专业网站设计
    成都网站设计
    网站设计公司
    高端网站设计
    联系我们
    电话：13518219792
    邮箱：631063699@qq.com
    地址：成都青羊区锦天国际1002号
    网址：www.csdahua.cn

    微信二维码

    Copyright © 2002-2023 www.csdahua.cn 快上网建站品牌 QQ：244261566 版权所有 备案号：蜀ICP备19037934号