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");
        });    
    首页
    商城
    分类

简单选择过滤器 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行

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

可见性过滤选择器 li.oddLi { color: blueviolet; } li.evenLi { color: goldenrod; } $(function () { //选中符合条件的第一个元素 $("#list > li:hidden").show(); $("#list > li:visible").addClass("firstLi"); })

第1行

第2行

第3行

第4行

第5行

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

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

表单选择器 .textColor { color: blue; } $(function () { $("#form1 :text").addClass("textColor"); $("#form1 :radio").addClass("textColor"); $("#ageSelect").addClass("textColor"); });

表单选择器

             姓名：
        户口：城镇  农村
        年龄：         18岁以下        18-35岁        36-65岁        65岁以上

重庆分公司，新征程启航

HybridApp开发之jQuery选择器

什么是选择器？

选择器的优势

1、）代码更简单

2、）完善的检测机制

选择器分类

基础选择器

层次选择器

简单过滤选择器

表单选择器

其他资讯