真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

什么是選擇器？

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

成都創(chuàng)新互聯(lián)專(zhuān)注于麗水企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城系統(tǒng)網(wǎng)站開(kāi)發(fā)。麗水網(wǎng)站建設(shè)公司,為麗水等地區(qū)提供建站服務(wù)。全流程定制制作，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專(zhuā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ù)中封裝了大量可以通過(guò)選擇器直接調(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í)候，無(wú)須考慮頁(yè)面中是否存在，即使頁(yè)面中不存在該元素也不會(huì)報(bào)錯(cuò)，極大的方便了代碼的執(zhí)行效率。

選擇器分類(lèi)

大致分為下面四大類(lèi)

  • 基本選擇器

  • 層次選擇器

  • 過(guò)濾選擇器

  • 表單選擇器

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

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

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

  • 可見(jiàn)性過(guò)濾選擇器

  • 屬性過(guò)濾選擇器

  • 子元素過(guò)濾選擇器

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

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

基礎(chǔ)選擇器

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

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

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

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

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

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

Hybrid App開(kāi)發(fā)之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");          //匹配類(lèi)元素          $(".firstDiv").css("display","none");          //元素名匹配元素          $("div, p").css("display","block");          //合并匹配元素          $("#secondDiv, p").css("display","none");          //匹配所有元素          $("body *").css("display","block");
      });    
    第一層
    第二層
 

     段落 

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

層次選擇器

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

Hybrid App開(kāi)發(fā)之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");
        });    
    
  • 首頁(yè)
    • 
    
  • 商城
    • 
    
  • 分類(lèi)
    •     
                         風(fēng)云                          ×××，一遇風(fēng)云便化龍。
                九霄龍吟驚天變，風(fēng)云際會(huì)潛水游。
                
                     
                         
        
        

            我要成仙    

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

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

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

    
    
    簡(jiǎn)單選擇過(guò)濾器
    
    
        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 () {            //選中符合條件的第一個(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開(kāi)始的            $("#list > li:odd").addClass("oddLi");            //獲取指定索引值為偶數(shù)的元素(0、2、4、6、8……)，注意索引號(hào)是從0開(kāi)始的            $("#list > li:even").addClass("evenLi");            //選取指定索引值的元素，索引值從0開(kāi)始            $("#list > li:eq(4)").addClass("fiveLi");            //獲取所有索引值大于index的元素，索引號(hào)從0開(kāi)始            $("#list > li:gt(4)").addClass("fiveLi");            //獲取所有索引值小于index的元素，索引號(hào)從0開(kāi)始            $("#list > li:lt(4)").addClass("evenLi");
        })    
    
  • 第1行
    • 
    第2行
    
  • 第3行
    • 
    
  • 第4行
    • 
    
  • 第5行
    • 
    
  • 第6行
    • 
    
  • 第7行
    • 
    
  • 第8行

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

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

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

    
    
    內(nèi)容過(guò)濾選擇器
    
    
        li.firstLi {
            color: saddlebrown;
        }

        li.lastLi {
            color: red;
        }

        li.oddLi {
            color: blueviolet;
        }

        li.evenLi {
            color: goldenrod;
        }

        li.fiveLi {
            color: blueviolet;
        }
    
    

        $(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");
        })    
    
    
        
  • 第1行
    • 
        第2行
        
  • 第3行
    • 
        
  • 第4行
    • 
        
  • 第5行
    • 
        
  • 第6行
    • 
        
  • 
        
  • 第7行
    • 
        
  • 第8行
    • 
    

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

    可見(jiàn)性過(guò)濾選擇器：

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

    
    
    可見(jiàn)性過(guò)濾選擇器
    
    

        li.oddLi {
            color: blueviolet;
        }

        li.evenLi {
            color: goldenrod;
        }

    
    
        $(function () {            //選中符合條件的第一個(gè)元素            $("#list > li:hidden").show();
            $("#list > li:visible").addClass("firstLi");
        })    
    
  • 第1行
    • 
    第2行
    
  • 第3行
    • 
    
  • 第4行
    • 
    
  • 第5行

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

    屬性過(guò)濾選擇器：

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

    
    
    屬性過(guò)濾選擇器
    
    
        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開(kāi)頭的元素            $("#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");
        })    
    
    
        
  • 第1行
    • 
        第2行
        第3行
        第4行
        
  • 第5行
    • 
        
  • 第6行
    • 
        
  • 
        第7行
        
  • 第8行
    • 
    

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

    子元素過(guò)濾選擇器：

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

    
    
    子元素選擇過(guò)濾器
    
    
        li.firstLi {
            color: saddlebrown;
        }

        li.lastLi {
            color: red;
        }

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

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

    
    

        $(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");
        })    
    
    
        
  • 第1行
    • 
        第2行
        第3行
        第4行
        
  • 第5行
    • 
        
  • 第6行
    • 
        
  • 
        第7行
        
  • 第8行
    • 
    

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

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

    表單選擇器：

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

    
    
    表單選擇器
    
    
        .textColor {
            color: blue;
        }
    
    

        $(function () {
            $("#form1 :text").addClass("textColor");
            $("#form1 :radio").addClass("textColor");
            $("#ageSelect").addClass("textColor");
        });    
    
    
    表單選擇器
    
    
        姓名： 
    
        戶(hù)口：城鎮(zhèn)  農(nóng)村
    
        年齡： 
        18歲以下        18-35歲        36-65歲        65歲以上    
    
    

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


    分享標(biāo)題：HybridApp開(kāi)發(fā)之jQuery選擇器
    文章網(wǎng)址：http://weahome.cn/article/ihioio.html

    其他資訊

    在線(xiàn)咨詢(xún)

    微信咨詢(xún)

    電話(huà)咨詢(xún)

    028-86922220（工作日）

    18980820575（7×24）

    提交需求

    返回頂部