网站建设 >

查看其它板块

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

层次选择器

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

简单过滤选择器

: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　　　　匹配所有正在执行动画的元素返回的是元素集合

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

内容过滤选择器：

:contains(text)　　匹配包含给定文本的元素
:empty　　　　　　匹配所有不包含子元素或者文本的空元素
:has(selector)　　匹配后代中含有selector能匹配上元素的元素
:parent　　　　　　匹配含有子元素或者文本的元素

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

可见性过滤选择器：

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

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

属性过滤选择器：

[attribute]　　　　　　　　匹配含有给定属性的元素
[attribute=value]　　　　匹配含有属性=value的元素
[attribute!=value]　　　　匹配含有属性但!=value的元素
[attribute^=value]　　　　匹配属性值是以value开始的元素
[attribute$=value]　　　　匹配属性值是以value结束的元素
[attribute*=value]　　　　匹配属性值包含某些值的元素，部分前后，中间有也算
[selector][selector]　　　　匹配属性选择器的交集

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

子元素过滤选择器：

:nth-child(eq|even|odd|index)　　获取所有父元素特定位置的子元素
:first　　　　　　　　　　　获取所有父元素下的第一个子元素
:last　　　　　　　　　　　获取所有父元素下最后一个子元素
:only-child　　　　　　　　获取所有父元素下唯一的一个元素

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

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

:enabled　　　获取表单中所有可用的元素
:disabled　　　获取表单中所有不可用的元素
:checked　　　获取表单张所有被选中的元素
:selected　　　获取表单中所有被选中的option的元素

表单选择器：

:input　　　　　获取所有的表单元素
:text　　　　　获取所有的单行文本框　　
:password　　获取所有的密码框元素
:radio　　　　获取所有的单选按钮　　　
:checkbox　　获取所有的复选框　　　　
:submit　　　获取所有的提交按钮　　　
:p_w_picpath　　　　获取所有的图像按钮　　
:reset　　　　获取所有的重置按钮　　　
:button　　　　获取所有的按钮　　　　　
:file　　　　　　获取所有的文件上传框

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选择器-创新互联
分享URL：http://cdkjz.cn/article/ccijdi.html

返回首页了解更多建站资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线成都：13518219792 座机：028-86922220

在线咨询提交需求

友情链接交换友情链接

自贡电信机房支点广告服务器机柜租用一带一路成都公司注册代办 app开发网站建设策划方案乐山做网站虚拟主机宜宾冠赛网站

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层建设咨询028-86922220

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图

网站建设

网站推广

案例

方案

电商网站开发

微信小程序

我们

联系

精准传达 • 有效沟通

查看其它板块

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

什么是选择器？

选择器的优势

1、）代码更简单

2、）完善的检测机制

选择器分类

基础选择器

层次选择器

简单过滤选择器

表单选择器

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

大客户专线成都：13518219792 座机：028-86922220

友情链接交换友情链接

网络推广

Network promotion

网站方案

Solution

电商网站开发

E-commerce & System

我们

About Us

联系

Contact Us

精准传达 • 有效沟通

查看其它板块

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

什么是选择器？

选择器的优势

1、）代码更简单

2、）完善的检测机制

选择器分类

基础选择器

层次选择器

简单过滤选择器

表单选择器

相关资讯

Node.js的5大框架是什么

jquery怎么模仿锚点跳转到页面指定位置

docker-compose中怎么部署springboot+mysql项目

Springboot中怎么对ActiveMQ进行整合

css如何实现表格样式

引vue.js和安装有什么区别

CSS文档流技巧是什么

详解spring自动扫描包

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

大客户专线 成都：13518219792 座机：028-86922220

友情链接 交换友情链接

大客户专线成都：13518219792 座机：028-86922220

友情链接交换友情链接