行业资讯

Hybrid App开发之jQuery选择器

发布时间：2020-08-10 05:57:14 作者：bxst
来源：网络 阅读：218

什么是选择器？

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

选择器的优势

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

1、）代码更简单

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

2、）完善的检测机制

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

选择器分类

大致分为下面四大类

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

接下来挨个学习一下。

基础选择器

写个小例子学习一下

Hybrid App开发之jQuery选择器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">

        .firstDiv{
            color: greenyellow;
            font-size: 1em;
            background-color:aliceblue;
        }
        #secondDiv{
            color: blueviolet;
            font-size: 1.5em;
        }
        p{
            color: green;
            font-size: 1em;
        }
    </style>
    <script type="text/javascript">
      $(function () {          //ID匹配元素          $("#secondDiv").css("display","block");          //匹配类元素          $(".firstDiv").css("display","none");          //元素名匹配元素          $("div, p").css("display","block");          //合并匹配元素          $("#secondDiv, p").css("display","none");          //匹配所有元素          $("body *").css("display","block");
      });    </script></head><body><div class="firstDiv">
    第一层</div><div id="secondDiv">
    第二层</div>
 <p>
     段落 </p></body></html>

Hybrid App开发之jQuery选择器

层次选择器

 写个小例子学习一下

Hybrid App开发之jQuery选择器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        #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;
        }

    </style>
    <script type="text/javascript">

        $(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");
        });    </script></head><body><div id="topDiv"><ul id="menu">
    <li>首页</li>
    <li>商城</li>
    <li>分类</li></ul></div>
    <div>
        <div class="leftDiv" align="left">
            <h5 align="center">风云</h5>
            <div id="content">
            ×××，一遇风云便化龙。<br>
            九霄龙吟惊天变，风云际会潜水游。<br>
            </div>
        </div>
        <div>
            <img src="../p_w_picpaths/bg_post_activity_4.png">
        </div>
    </div><div>
    <p>
        我要成仙    </p></div></body></html>

Hybrid App开发之jQuery选择器

简单过滤选择器

Hybrid App开发之jQuery选择器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>简单选择过滤器</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        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;
        }

    </style>
    <script type="text/javascript">

        $(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");
        })    </script></head><body><ol id="list">
    <li>第1行</li>
    <li id="secondLi">第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第5行</li>
    <li>第6行</li>
    <li>第7行</li>
    <li>第8行</li></ol></body></html>

Hybrid App开发之jQuery选择器

内容过滤选择器：

Hybrid App开发之jQuery选择器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>内容过滤选择器</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        li.firstLi {
            color: saddlebrown;
        }

        li.lastLi {
            color: red;
        }

        li.oddLi {
            color: blueviolet;
        }

        li.evenLi {
            color: goldenrod;
        }

        li.fiveLi {
            color: blueviolet;
        }
    </style>
    <script type="text/javascript">

        $(function () {            //选中符合条件的第一个元素            $("#list > li:contains('第4行')").addClass("firstLi");
            $("#list > li:empty").css("display", "none");
            $("#list > li:has('b')").addClass("firstLi");
            $("div:parent").css("display", "none");
        })    </script></head><body><div>
    <ol id="list">
        <li>第1行</li>
        <li id="secondLi">第2行</li>
        <li>第3行</li>
        <li>第4行</li>
        <li>第5行</li>
        <li><b>第6行</b></li>
        <li></li>
        <li>第7行</li>
        <li>第8行</li>
    </ol></div><div></div></body></html>

Hybrid App开发之jQuery选择器

可见性过滤选择器：

Hybrid App开发之jQuery选择器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>可见性过滤选择器</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">

        li.oddLi {
            color: blueviolet;
        }

        li.evenLi {
            color: goldenrod;
        }

    </style>
    <script type="text/javascript">
        $(function () {            //选中符合条件的第一个元素            $("#list > li:hidden").show();
            $("#list > li:visible").addClass("firstLi");
        })    </script></head><body><ol id="list">
    <li>第1行</li>
    <li >第2行</li>
    <li>第3行</li>
    <li>第4行</li>
    <li>第5行</li></ol></body></html>

Hybrid App开发之jQuery选择器

属性过滤选择器：

Hybrid App开发之jQuery选择器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>属性过滤选择器</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        li.firstLi {
            color: saddlebrown;
        }

        li.lastLi {
            color: red;
        }

        li.oddLi {
            color: blueviolet;
            font-size: 1em;
        }

        li.evenLi {
            color: goldenrod;
            font-size: 1em;
        }

    </style>
    <script type="text/javascript">

        $(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");
        })    </script></head><body><div>
    <ol id="list">
        <li>第1行</li>
        <li id="testLi">第2行</li>
        <li id="testLi1">第3行</li>
        <li id="testLi2">第4行</li>
        <li>第5行</li>
        <li><b>第6行</b></li>
        <li></li>
        <li id="testLi3">第7行</li>
        <li>第8行</li>
    </ol></div></body></html>

Hybrid App开发之jQuery选择器

子元素过滤选择器：

Hybrid App开发之jQuery选择器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>子元素选择过滤器</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        li.firstLi {
            color: saddlebrown;
        }

        li.lastLi {
            color: red;
        }

        li.oddLi {
            color: blueviolet;
            font-size: 1em;
        }

        li.evenLi {
            color: goldenrod;
            font-size: 1em;
        }

    </style>
    <script type="text/javascript">

        $(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");
        })    </script></head><body><div>
    <ol id="list">
        <li>第1行</li>
        <li id="testLi">第2行</li>
        <li id="testLi1">第3行</li>
        <li id="testLi2">第4行</li>
        <li>第5行</li>
        <li><b>第6行</b></li>
        <li></li>
        <li id="testLi3">第7行</li>
        <li>第8行</li>
    </ol></div></body></html>

Hybrid App开发之jQuery选择器

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

表单选择器：

Hybrid App开发之jQuery选择器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>表单选择器</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        .textColor {
            color: blue;
        }
    </style>
    <script type="text/javascript">

        $(function () {
            $("#form1 :text").addClass("textColor");
            $("#form1 :radio").addClass("textColor");
            $("#ageSelect").addClass("textColor");
        });    </script></head><body><div>
    <h5>表单选择器</h5>
    <form id="form1">
        姓名： <input type="text" name="name"><br>
        户口：<input type="radio" name="home" value="town" checked>城镇 <input type="radio" name="home" value=="country"> 农村<br>
        年龄： <select name="age" id="ageSelect">
        <option value="lt18">18岁以下        <option value="bt18and25">18-35岁        <option value="bt36and65">36-65岁        <option value="gt65">65岁以上    </select><br>
    </form></div></body></html>

Hybrid App开发之jQuery选择器


推荐阅读：
  1. Android应用开发之Hybrid
  2. 如何在浏览器中打开多个独立窗口

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

浏览器 检测 开发

上一篇：SQL Server 2014的重建索引

下一篇：干货 | LVS虚拟服务器简介

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号