zepto选择器

程序员文章站 2022-03-10 16:28:49

跟jQuery非常类似，非常适合移动端先去官网下载zepto.min.js https://www.bootcdn.cn/zepto/ https://www.bootcdn.cn/zepto/ 在网页中引入编写第一 ......

跟jquery非常类似，非常适合移动端

先去官网下载zepto.min.js

zepto选择器

在网页中引入

<script src="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>

zepto选择器

什么是对象：

$(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>

zepto选择器

原生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>

zepto选择器

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>

zepto选择器

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

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>

zepto选择器

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>

zepto选择器

基础选择器：

标签选择器+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>

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="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>

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="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>

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="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>

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="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>

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 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>

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 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>

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 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>

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 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>

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 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>

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 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>

zepto选择器

子元素过滤选择器

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>

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="parent">
        <div id="a#a">child</div>
    </div>

    <script src="js/zepto.min.js"></script>
    <script>
        
        $("#a\\#a").html("\\是用来转义的哈");
    </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="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>

zepto选择器

上一篇： centos7.4安装mysql5.7.26

下一篇：前端攻城狮的薪资有多少？新人能月入过万么？

zepto选择器

CSS3 选择器伪类选择器介绍

CSS3结构性伪类选择器九种写法

IE8下CSS3选择器nth-child() 不兼容问题的解决方法

javascript选择器有哪些（javascript选择器推荐）

css选择器（一）基本选择器

iOS自定义UIDatePicker日期选择器视图

JS仿JQuery选择器功能

CSS3 :not()选择器实现最后一行li去除某种css样式

Android 中TeaPickerView数据级联选择器功能的实例代码

前端（三）之选择器高级与盒模型

zepto选择器

CSS3 选择器 伪类选择器介绍

CSS3结构性伪类选择器九种写法

IE8下CSS3选择器nth-child() 不兼容问题的解决方法

javascript选择器有哪些（javascript选择器推荐）

css选择器（一）基本选择器

iOS自定义UIDatePicker日期选择器视图

JS仿JQuery选择器功能

CSS3 :not()选择器实现最后一行li去除某种css样式

Android 中TeaPickerView数据级联选择器功能的实例代码

前端（三）之选择器高级与盒模型

CSS3 选择器伪类选择器介绍