zepto選擇器-有解無憂

跟jQuery非常類似，非常適合移動端

先去官網下載zepto.min.js https://www.bootcdn.cn/zepto/

https://www.bootcdn.cn/zepto/

在網頁中引入

<script src="https://www.cnblogs.com/chenyingying0/p/js/zepto.min.js"></script>

撰寫第一個zepto小程式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
    <div></div>
    <script src="js/zepto.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div").html("hello cyy~");
        })
    </script>
</body>
</html>

什么是物件：

$(selector) next() children() parent()

什么是操作：

addClass() html()

鏈式呼叫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
    <div></div>
    <p></p>
    <a href="#"></a>
    <script src="js/zepto.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div").html("hello cyy~").addClass("active")//物件1操作1
            .next().html("hello next").addClass("next")//物件2操作2
            .next().html("hello next next").addClass("next2");//物件3操作3
        })
    </script>
</body>
</html>

原生js獲取的是DOM物件

zepto選擇器獲取的是zepto物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
    <div id="one"></div>

    <script src="js/zepto.min.js"></script>
    <script>
        $(document).ready(function(){
            var one=document.getElementById("one");//DOM物件
            //one.addClass("two");//報錯，DOM物件不能呼叫zepto方法
            one.className="two";//使用原生js方法

            //zepto物件呼叫zepto方法
            $("#one").addClass("three");
            $("#one").className="three";//zepto物件呼叫原生js方法，沒有報錯，也沒有生效
        })
    </script>
</body>
</html>

zepto物件轉DOM物件

1、zepto物件獲取的是陣列，下標0即可獲取單個元素

2、使用zepto內置函式.get(0)轉DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
    <div id="one"></div>

    <script src="js/zepto.min.js"></script>
    <script>
        $(document).ready(function(){
            //zepto物件轉DOM
            $("#one")[0].className="two";//zepto物件獲取的是陣列，下標0即可獲取單個元素

            //使用zepto內置函式轉DOM
            $("#one").get(0).className="three";
        })
    </script>
</body>
</html>

DOM轉zepto物件

用$包裹即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
    <div id="one"></div>

    <script src="js/zepto.min.js"></script>
    <script>
        $(document).ready(function(){
            //DOM轉zepto
            var one=document.getElementById("one");
            $(one).addClass("two");
        })
    </script>
</body>
</html>

css選擇器：

<div id="one">hello cyy</div>

<style>
        div{font-size:36px;color:orange;}
    </style>

js選擇器：

<div id="one" class="cyy">hello cyy</div>

        $(document).ready(function(){
            $("div").html("標簽選擇器");
            $("#one").html("ID選擇器");
            $(".cyy").html("類選擇器");
        })

選擇器的優勢：

1、完善的處理機制

傳統寫法，如果沒有找到元素，會報錯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <!-- <div id="tt">tt</div> -->

    <script src="js/zepto.min.js"></script>
    <script>
        //傳統寫法
        //如果沒有找到tt元素，會報錯
        var tt=document.getElementById("tt");
        tt.className="tt2";

    </script>
</body>
</html>

zepto找不到元素不會報錯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <!-- <div id="tt">tt</div> -->

    <script src="js/zepto.min.js"></script>
    <script>
        //zepto
        $("#tt").addClass("tt3");

    </script>
</body>
</html>

2、當檢測某個元素是否存在的時候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <!-- <div id="tt">tt</div> -->

    <script src="js/zepto.min.js"></script>
    <script>
        //zepto
        //這種方法不可行，因為回傳的是空物件，也會轉為true
        if($("#tt")){
            console.log("tt存在");
        }

        //這種方法可行
        //判斷長度是否大于0，空物件不會大于0
        if($("#tt").length>0){
            console.log("tt存在");
        }

    </script>
</body>
</html>

3、事件寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script src="js/zepto.min.js"></script>
    <script>
        //傳統寫法
        var li=document.getElementsByTagName("li");
        for(var i=0;i<li.length;i++){
            fn(i);
        }
        function fn(i){
            li[i].onclick=function(){
                console.log(i);
            }            
        }

        //zepto方法
        $("li").on("click",function(){
            console.log($(this).index());
        })
    </script>
</body>
</html>

4、特定表格隔行變色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <table id="tb" border="1">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
        </tr>
    </table>

    <script src="js/zepto.min.js"></script>
    <script>
        //傳統寫法
        var tb=document.getElementById("tb");
        var trs=document.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            if(i%2==0){
                trs[i].style.backgroundColor="pink";
            }
        }


        //zepto方法
        $("#tb tr:nth-child(even)").css("background-color","#abcdef");
    </script>
</body>
</html>

基礎選擇器：

標簽選擇器+ID選擇器+類選擇器+群組選擇器+通配符選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <p class="p1">p1</p>
    <p id="p2">p2</p>
    <div>div</div>
    <span>span</span>

    <script src="js/zepto.min.js"></script>
    <script>
        //群組選擇器  ,分割
        $(".p1,#p2").css("background-color","pink");

        //通配符選擇器
        $("*").css("color","lightgreen");
    </script>
</body>
</html>

層次選擇器：

后代選擇器（子孫）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">
            <p>我是子孫元素</p>
        </div>
    </div>

    <script src="js/zepto.min.js"></script>
    <script>
        //后代選擇器 空格
        $("#parent #child").css("background-color","pink");
        $("#parent p").css("color","darkgreen");
    </script>
</body>
</html>

子元素選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">
            <p>我是子孫元素</p>
        </div>
    </div>

    <script src="js/zepto.min.js"></script>
    <script>
        //兒子選擇器 >
        $("#parent>#child").css("background-color","pink");
        $("#parent>p").css("color","darkgreen");//找不到元素
    </script>
</body>
</html>

相鄰兄弟選擇器（后面緊挨著的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div id="d1">d1</div>
    <p>p1</p>
    <p>p2</p>
    <div>d2</div>
    <p>p3</p>

    <script src="js/zepto.min.js"></script>
    <script>
        //相鄰兄弟選擇器 +
        $("#d1+p").css("background-color","pink");
    </script>
</body>
</html>

兄弟選擇器（后面出現的同級，前面出現的不行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div id="d1">d1</div>
    <p>p1</p>
    <p>p2</p>
    <div>d2</div>
    <p>p3</p>

    <script src="js/zepto.min.js"></script>
    <script>
        //兄弟選擇器 ~
        $("#d1~p").css("background-color","pink");
    </script>
</body>
</html>

過濾選擇器：

屬性過濾選擇器

[ ] 含有某個屬性的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div title="d1"></div>
    <div title="d2"></div>
    <div title="d3"></div>
    <div title="d4"></div>
    <div title="d5"></div>

    <script src="js/zepto.min.js"></script>
    <script>
        //含有某個屬性[]
        $("div[title]").html("我有title屬性");
    </script>
</body>
</html>

屬性為指定值 =

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div title="d1">div</div>
    <div title="d2">div</div>
    <div title="d3">div</div>
    <div title="d4">div</div>
    <div title="d5">div</div>

    <script src="js/zepto.min.js"></script>
    <script>
        //屬性為指定值
        $("div[title=d1]").html("我的title屬性值為d1");
    </script>
</body>
</html>

屬性值以指定值開頭 ^=

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div title="d1">div</div>
    <div title="d2">div</div>
    <div title="d2-2">div</div>
    <div title="d4">div</div>
    <div title="d5">div</div>

    <script src="js/zepto.min.js"></script>
    <script>
        //屬性為指定值
        $("div[title^=d2]").html("我的title屬性值開頭是d2");
    </script>
</body>
</html>

屬性值以指定值結尾 $=

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div title="d1">div</div>
    <div title="d2mm">div</div>
    <div title="d2-2">div</div>
    <div title="d4mm">div</div>
    <div title="d5">div</div>

    <script src="js/zepto.min.js"></script>
    <script>
        //屬性為指定值
        $("div[title$=mm]").html("我的title屬性值結尾是mm");
    </script>
</body>
</html>

屬性值包含指定值 *=

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div title="d1">div</div>
    <div title="d2mm">div</div>
    <div title="d2-2" class="aactive">div</div>
    <div title="d4mm">div</div>
    <div title="d5" class="aa bb cc">div</div>

    <script src="js/zepto.min.js"></script>
    <script>
        //屬性為指定值
        $("div[class*=a]").html("我的class屬性值包含aa");
    </script>
</body>
</html>

屬性疊加過濾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div title="d1">div</div>
    <div title="d2mm">div</div>
    <div title="d2-2" class="aactive">div</div>
    <div title="d4mm">div</div>
    <div title="d5" class="aa bb cc">div</div>

    <script src="js/zepto.min.js"></script>
    <script>
        //屬性為指定值
        $("div[class*=a][title^=d2]").html("我的class屬性值包含aa，title屬性開頭是d2");
    </script>
</body>
</html>

子元素過濾選擇器

nth-child(n) 選擇第n個子元素

first-child 第1個子元素

last-child 最后1個子元素

nth-child(even/odd) 偶數個/奇數個

nth-child(簡單計算式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div id="parent">
        <div id="child1">child1</div>
        <div id="child2">child2</div>
        <div id="child3">child3</div>
        <div id="child4">child4</div>
        <div id="child5">child5</div>
    </div>

    <script src="js/zepto.min.js"></script>
    <script>
        
        $("#parent>div:nth-child(2)").html("我是第2個子元素");
        $("#parent>div:first-child").html("我是第1個子元素");
        $("#parent>div:last-child").html("我是最后1個子元素");
        $("#parent>div:nth-child(even)").css("background-color","pink");
        $("#parent>div:nth-child(odd)").css("background-color","#abcdef");
        $("#parent>div:nth-child(3n)").css("color","purple");
    </script>
</body>
</html>

選擇器中的特殊符號：

. # ( [

需要進行轉義 \\

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div id="parent">
        <div id="a#a">child</div>
    </div>

    <script src="js/zepto.min.js"></script>
    <script>
        
        $("#a\\#a").html("\\是用來轉義的哈");
    </script>
</body>
</html>

選擇器中的空格：

隔代需要空格，不隔代不需要空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div id="parent">
        <p>p</p>
        <p>p</p>
        <p>p</p>
        <p>p</p>
    </div>

    <script src="js/zepto.min.js"></script>
    <script>
        
        $("#parent :nth-child(odd)").html("odd");
    </script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4023.html

標籤：jQuery

上一篇：jQuery實作顏色打字機

下一篇：zepto中的DOM操作