网站建设 >

查看其它板块

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

简单过滤选择器

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

网站标题：HybridApp开发之jQuery选择器
网页链接：http://cdkjz.cn/article/ihioio.html

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

多年建站经验

多一份参考，总有益处

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

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

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

在线咨询提交需求

友情链接交换友情链接

东电技改成都网站设计重庆服务器托管工业净化空调宏昇商务服务小谭网创广告高端网站设计推广乐山石膏隔墙成都定制网页设计成都西云机房

成都网站建设公司地址：成都市青羊区太升南路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、）完善的检测机制

选择器分类

基础选择器

层次选择器

简单过滤选择器

表单选择器

相关资讯

jquery红点提示 jquery点击事件有什么方法显示

android禁止全屏 全屏安卓手机怎么关闭程序

桌面裁剪电脑怎么弄快捷键 桌面裁图快捷键

html5几何酷站 在线几何画板网页

mysql怎么计算比例 mysql怎么比较大小

电脑截屏的快捷键fn 电脑截屏的快捷键是windows加什么

ios触摸精灵开发手册 ios触摸精灵开发手册下载

Linux终端串口命令 linux安装串口驱动命令

多一份参考，总有益处

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

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

友情链接 交换友情链接

android禁止全屏全屏安卓手机怎么关闭程序

桌面裁剪电脑怎么弄快捷键桌面裁图快捷键

html5几何酷站在线几何画板网页

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

友情链接交换友情链接