HybridApp開發(fā)之jQuery選擇器

什么是選擇器？

 JQuery選擇器通過標(biāo)簽名、屬性名或者內(nèi)容對(duì)DOM元素進(jìn)行快速準(zhǔn)確的選擇，而不必?fù)?dān)心瀏覽器的兼容性，通過JQuery選擇器對(duì)頁(yè)面元素精確定位，進(jìn)而方便完成處理元素屬性和行為事件。

成都創(chuàng)新互聯(lián)專注于麗水企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城系統(tǒng)網(wǎng)站開發(fā)。麗水網(wǎng)站建設(shè)公司,為麗水等地區(qū)提供建站服務(wù)。全流程定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

選擇器的優(yōu)勢(shì)

 與傳統(tǒng)的JavaScript獲取頁(yè)面元素和事務(wù)處理相比，JQuery具備以下幾個(gè)優(yōu)勢(shì)：

  • 代碼比較簡(jiǎn)單

  • 完善的檢測(cè)機(jī)制

1、）代碼更簡(jiǎn)單

在JQuery庫(kù)中封裝了大量可以通過選擇器直接調(diào)用的函數(shù)，使編程更加簡(jiǎn)單輕松，使用簡(jiǎn)單的代碼就可以使用相對(duì)復(fù)雜的功能。

2、）完善的檢測(cè)機(jī)制

傳統(tǒng)js設(shè)置頁(yè)面元素的事務(wù)的時(shí)候，先要找到頁(yè)面上的元素，然后在賦予相應(yīng)的屬性或事件，如果頁(yè)面元素不存在，則頁(yè)面會(huì)報(bào)錯(cuò)。所以要先判斷頁(yè)面元素是否存在。再進(jìn)行屬性或者事件操作。這樣會(huì)造成代碼繁瑣。在JQuery定義頁(yè)面元素的時(shí)候，無須考慮頁(yè)面中是否存在，即使頁(yè)面中不存在該元素也不會(huì)報(bào)錯(cuò)，極大的方便了代碼的執(zhí)行效率。

選擇器分類

大致分為下面四大類

  • 基本選擇器

  • 層次選擇器

  • 過濾選擇器

  • 表單選擇器

過濾選擇器又分為以下幾個(gè)小分類

  • 簡(jiǎn)單過濾選擇器

  • 內(nèi)容過濾選擇器

  • 可見性過濾選擇器

  • 屬性過濾選擇器

  • 子元素過濾選擇器

  • 表單對(duì)象屬性過濾選擇器

接下來挨個(gè)學(xué)習(xí)一下。

基礎(chǔ)選擇器

  • #id　      根據(jù)Id匹配一個(gè)元素             返回的單個(gè)元素

  • .class　  根據(jù)給定的類名匹配一個(gè)元素 返回的是元素集合

  • element 根據(jù)元素名匹配一個(gè)元素       返回的是元素集合

  • *　        匹配所有元素                      返回的是元素集合

  • selecttor1,selector2并集，返回兩個(gè)選擇器匹配到的元素 返回的是元素集合

寫個(gè)小例子學(xué)習(xí)一下

Hybrid App開發(fā)之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開發(fā)之jQuery選擇器

層次選擇器

  • ancestor descendant   根據(jù)祖先匹配所有的后代元素 返回的是元素集合

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

  • prev+next　                匹配下一個(gè)兄弟元素 相當(dāng)于next()方法 返回的是元素集合

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

 寫個(gè)小例子學(xué)習(xí)一下

Hybrid App開發(fā)之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>首頁(yè)</li>
    <li>商城</li>
    <li>分類</li></ul></div>
    <div>
        <div class="leftDiv" align="left">
            <h5 align="center">風(fēng)云</h5>
            <div id="content">
            ×××，一遇風(fēng)云便化龍。<br>
            九霄龍吟驚天變，風(fēng)云際會(huì)潛水游。<br>
            </div>
        </div>
        <div>
            <img src="../p_w_picpaths/bg_post_activity_4.png">
        </div>
    </div><div>
    <p>
        我要成仙    </p></div></body></html>

Hybrid App開發(fā)之jQuery選擇器

簡(jiǎn)單過濾選擇器

  • :first或first()　　　匹配第一個(gè)元素  返回的單個(gè)元素

  • :last或last()　　　 匹配最后一個(gè)元素 返回的單個(gè)元素

  • :not(selector)　　 匹配非selector能匹配到的元素 返回的是元素集合

  • :even　　　　　　 匹配索引值為偶數(shù)的元素，索引號(hào)從0開始 返回的是元素集合

  • :odd　　　　　　　匹配索引值為奇數(shù)的元素，索引號(hào)從0開始 返回的是元素集合

  • :eq(index)　　　　匹配指定索引號(hào)的元素，索引號(hào)從0開始 返回的單個(gè)元素

  • :gt(index)　　　　匹配索引號(hào)大于給定索引值的元素，索引號(hào)從0開始 返回的是元素集合

  • :lt(index)　　　　 匹配索引號(hào)小于給定索引值的元素，索引號(hào)從0開始 返回的是元素集合

  • :header　　　　　匹配所有的標(biāo)題元素  h2 h3 h4 h5 h6 h7 返回的是元素集合

  • :animated　　　　匹配所有正在執(zhí)行動(dòng)畫的元素 返回的是元素集合

Hybrid App開發(fā)之jQuery選擇器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>簡(jiǎn)單選擇過濾器</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 () {            //選中符合條件的第一個(gè)元素            $("#list > li:first").addClass("firstLi");            //選中符合條件的最后一個(gè)元素            $("#list > li:last").addClass("lastLi");            //符合條件但不能被selector選中的元素            $("#list > li:not('.secondLi')").addClass("lastLi");            //獲取指定索引值為奇數(shù)的元素(1、3、5、7、9......)，注意索引號(hào)是從1開始的            $("#list > li:odd").addClass("oddLi");            //獲取指定索引值為偶數(shù)的元素(0、2、4、6、8……)，注意索引號(hào)是從0開始的            $("#list > li:even").addClass("evenLi");            //選取指定索引值的元素，索引值從0開始            $("#list > li:eq(4)").addClass("fiveLi");            //獲取所有索引值大于index的元素，索引號(hào)從0開始            $("#list > li:gt(4)").addClass("fiveLi");            //獲取所有索引值小于index的元素，索引號(hào)從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開發(fā)之jQuery選擇器

內(nèi)容過濾選擇器：

  • :contains(text)　　匹配包含給定文本的元素

  • :empty　　　　　　匹配所有不包含子元素或者文本的空元素

  • :has(selector)　　  匹配后代中含有selector能匹配上元素的元素

  • :parent　　　　　　匹配含有子元素或者文本的元素

Hybrid App開發(fā)之jQuery選擇器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>內(nèi)容過濾選擇器</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 () {            //選中符合條件的第一個(gè)元素            $("#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開發(fā)之jQuery選擇器

可見性過濾選擇器：

  • :hidden　　　　　　匹配不可見元素，或者type="hidden"的元素　含有css樣式:display:"none";的元素，無論CSS是內(nèi)聯(lián)，導(dǎo)入，鏈接式

  • :visible　　　　　　 獲取所有的可見元素

Hybrid App開發(fā)之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 () {            //選中符合條件的第一個(gè)元素            $("#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開發(fā)之jQuery選擇器

屬性過濾選擇器：

  • [attribute]　　　　　　　　 匹配含有給定屬性的元素

  • [attribute=value]　　　　   匹配含有屬性=value的元素

  • [attribute!=value]　　　　  匹配含有屬性但!=value的元素

  • [attribute^=value]　　　　 匹配屬性值是以value開始的元素

  • [attribute$=value]　　　　  匹配屬性值是以value結(jié)束的元素

  • [attribute*=value]　　　　  匹配屬性值包含某些值的元素，部分前后，中間有也算

  • [selector][selector]　　　　 匹配屬性選擇器的交集

Hybrid App開發(fā)之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結(jié)尾的元素            $("#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開發(fā)之jQuery選擇器

子元素過濾選擇器：

  • :nth-child(eq|even|odd|index)　　獲取所有父元素特定位置的子元素

  • :first　　　　　　　　　　　 獲取所有父元素下的第一個(gè)子元素

  • :last　　　　　　　　　　　 獲取所有父元素下最后一個(gè)子元素

  • :only-child　　　　　　　　 獲取所有父元素下唯一的一個(gè)元素

Hybrid App開發(fā)之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 () {            //選中l(wèi)i父元素第三個(gè)元素            $("li:nth-child(3)").addClass("lastLi");            //選中l(wèi)i父元素第一個(gè)元素            $("li:first-child").addClass("lastLi");            //選中l(wèi)i父元素最后一個(gè)元素            $("li:last-child").addClass("lastLi");            //選中l(wèi)i父元素只有一個(gè)元素的元素            $("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開發(fā)之jQuery選擇器

表單對(duì)象屬性過濾選擇器：

  • :enabled　　　獲取表單中所有可用的元素

  • :disabled　　　獲取表單中所有不可用的元素

  • :checked　　　獲取表單張所有被選中的元素

  • :selected　　　獲取表單中所有被選中的option的元素

表單選擇器：

  • :input　　　　　獲取所有的表單元素<input開頭的，還有textarea select

  • :text　　　　　 獲取所有的單行文本框　　<input type="text" />

  • :password　　 獲取所有的密碼框元素      <input type="password" />

  • :radio　　　　  獲取所有的單選按鈕　　　<input type="radio" />

  • :checkbox　　 獲取所有的復(fù)選框　　　　<input type="checkbox">

  • :submit　　　  獲取所有的提交按鈕　　　<input type="submit" />

  • :p_w_picpath　　　　獲取所有的圖像按鈕　　 <input type="p_w_picpath" />

  • :reset　　　　  獲取所有的重置按鈕　　　 <input type="reset" />

  • :button　　　　獲取所有的按鈕　　　　　<input type="button">

  • :file　　　　　　獲取所有的文件上傳框　　<input type="file" />

Hybrid App開發(fā)之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>城鎮(zhèn) <input type="radio" name="home" value=="country"> 農(nóng)村<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開發(fā)之jQuery選擇器

當(dāng)前名稱：HybridApp開發(fā)之jQuery選擇器
當(dāng)前鏈接：http://www.muchs.cn/article0/ihioio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、全網(wǎng)營(yíng)銷推廣、外貿(mào)網(wǎng)站建設(shè)、做網(wǎng)站、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司