精选文章 zepto选择器

zepto选择器

作者:ElegantHedgehog 时间: 2020-07-25 08:20:07
ElegantHedgehog 2020-07-25 08:20:07

跟jQuery非常类似,非常适合移动端

先去官网下载zepto.min.js https://www.bootcdn.cn/zepto/

zepto选择器1

 

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

zepto选择器2

 

 

在网页中引入

 编写第一个zepto小程序

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zeptotitle>
    <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选择器3

 

 

什么是对象:

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

什么是操作: 

addClass()  html()

 

链式调用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zeptotitle>
    <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选择器4

 

 

原生js获取的是DOM对象

zepto选择器获取的是zepto对象

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zeptotitle>
    <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>zeptotitle>
    <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选择器5

 

 

DOM转zepto对象

用$包裹即可

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zeptotitle>
    <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选择器6

 

 

css选择器:

<div id="one">hello cyydiv>

 

js选择器:

<div id="one" class="cyy">hello cyydiv>
        $(document).ready(function(){
            $("div").html("标签选择器");
            $("#one").html("ID选择器");
            $(".cyy").html("类选择器");
        })

 

选择器的优势:

1、完善的处理机制

传统写法,如果没有找到元素,会报错

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

    <script src="js/zepto.min.js">script>
    <script>
        //传统写法
        //如果没有找到tt元素,会报错
        var tt=document.getElementById("tt");
        tt.className="tt2";

    script>
body>
html>

zepto选择器7

 

 zepto找不到元素不会报错

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

    <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>zeptotitle>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    style>
head>
<body>
    

    <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>zeptotitle>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    style>
head>
<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
    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选择器8

 

 

4、特定表格隔行变色

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zeptotitle>
    <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.1td>
            <td>1.2td>
        tr>
        <tr>
            <td>2.1td>
            <td>2.2td>
        tr>
        <tr>
            <td>3.1td>
            <td>3.2td>
        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选择器9

 

 

基础选择器:

标签选择器+ID选择器+类选择器+群组选择器+通配符选择器

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

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

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

zepto选择器10

 

 

层次选择器:

后代选择器(子孙)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zeptotitle>
    <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选择器11

 

 

子元素选择器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zeptotitle>
    <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选择器12

 

 

相邻兄弟选择器(后面紧挨着的)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zeptotitle>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    style>
head>
<body>
    <div id="d1">d1div>
    <p>p1p>
    <p>p2p>
    <div>d2div>
    <p>p3p>

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

zepto选择器13

 

 

兄弟选择器(后面出现的同级,前面出现的不行)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zeptotitle>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    style>
head>
<body>
    <div id="d1">d1div>
    <p>p1p>
    <p>p2p>
    <div>d2div>
    <p>p3p>

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

zepto选择器14

 

 

过滤选择器:

属性过滤选择器

[  ] 含有某个属性的元素

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zeptotitle>
    <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选择器15

 

 

属性为指定值 =

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

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

zepto选择器16

 

 

属性值以指定值开头 ^=

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

    <script src="js/zepto.min.js">script>
    <script>
        //属性为指定值
        $("div[title^=d2]").html("我的title属性值开头是d2");
    script>
body>
html>

zepto选择器17

 

 

属性值以指定值结尾 $=

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

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

zepto选择器18

 

 

属性值包含指定值 *=

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

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

zepto选择器19

 

 

属性叠加过滤

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

    <script src="js/zepto.min.js">script>
    <script>
        //属性为指定值
        $("div[class*=a][title^=d2]").html("我的class属性值包含aa,title属性开头是d2");
    script>
body>
html>

zepto选择器20

 

 

子元素过滤选择器

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>zeptotitle>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    style>
head>
<body>
    <div id="parent">
        <div id="child1">child1div>
        <div id="child2">child2div>
        <div id="child3">child3div>
        <div id="child4">child4div>
        <div id="child5">child5div>
    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选择器21

 

 

选择器中的特殊符号:

. #  (  [

需要进行转义 \\

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

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

zepto选择器22

 

 

 

选择器中的空格:

隔代需要空格,不隔代不需要空格

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

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

zepto选择器23

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:通过按钮执行对应操作完成javascript检测

下一篇:为Spring Cloud Ribbon配置请求重试(Camden.SR2+)

您可能感兴趣

  • IntellIJ IDEA2020新功能

    一、java 1、Java 14支持:记录和模式匹配 IntelliJ IDEA 2020.1添加了对Java 14及其新功能的支持。IDE不仅添加了对Records的完整代码洞察支持,而且还使您能够快速创建新记录并生成其构造函数和组件,并警告存在的错误。您还将发现对instanceof运算符的模式匹配的支持,包括新的检查和快速修复,该快速修复通过用新的简洁模式变量替换它们来快速简化冗长的i...

  • hualinux 进阶 1.24:k8s调度器的优先级与抢占机制 (整理)

    目录 一、优先级和抢占机制说明 二、优级先和抢占机制设计和实现 k8s调度器的优先级与抢占机制,这个比较重要,需要了解。 优先级和抢占机制,解决的是 Pod 调度失败时该怎么办的问题。 一、优先级和抢占机制说明 优先级和抢占机制,解决的是 Pod 调度失败时该怎么办的问题。 正常情况下,当一个 Pod 调度失败后,它就会被暂时“搁置”起来,直到 Pod 被更新,或者集群状态发生变化,调度器才...

  • 浅层砂过滤器(浅层介质过滤器)介绍及现场案例反馈图(多图)

    浅层砂过滤器(浅层介质过滤器)是由多个标准高速砂缸单元组成,其内部设有D特的布水器和集水器,拥有的双向自动冲洗阀,可实现在正常系统运行中多个标准高速砂缸逐个单独的反冲洗,全自动程序控制。具有反冲洗用水量小,设备安装方便,易于操作等优点。该设备流量大,无需维护。根据不同的用户要求,有立式和卧式两个系列。适用于工业和民用循环水系统的水质处理。 【浅层砂过滤器(浅层介质过滤器)工作原理】 浅层砂过...

  • 解放双手、提高效率,如何优雅的做一名IDC运维!

    在IDC行业中,有一群从业者很特殊,你上班时他在上班,你休息时他在加班,你休假时他还在值班。这个人就是IDC运维工程师,听听他们自己怎么说。 我的职业是一名IDC运维工程师,守护机房的工兵,日常工作主要是维护机房的IT设备、网络系统的稳定,还有维护客户和公司的和谐关系,简称"维稳"人员。 今年是我在运维部门第七个年头了,我每天的工作看起来"轻松",实际很繁重。 经常来回奔波,出入各个机房是我...

  • Java异常面试题(2020最新版)

    文章目录 Java异常架构与异常关键字 Java异常简介 Java异常架构 1. Throwable 2. Error(错误) 3. Exception(异常) 运行时异常 编译时异常 4. 受检异常与非受检异常 受检异常 非受检异常 Java异常关键字 Java异常处理 声明异常 抛出异常 捕获异常 如何选择异常类型 常见异常处理方式 直接抛出异常 封装异常再抛出 捕获异常 自定义异常 t...

  • html5语义化结构元素_语义HTML5在文档结构中的秘密

    html5语义化结构元素 Look at the graph given above, and you can quickly see how extensively HTML 5 is growing popularity. The Semantic HTML 5 has almost replaced the HTML. Now, we are going to discuss Sema...

  • C++提供了四个转换运算符:const_cast,static_cast,reinterpret_cast

    https://blog.csdn.net/TanJiaLiang_/article/details/83992337 用const_cast来去除const限定 于是const_cast就出来消灭const,以求引起程序世界的混乱。 下边的代码就顺利编译功过了: const int constant = 21; const int* const_p = &constant; int* mo...

  • 爬虫所使用的的HTTP代理是什么?

    在爬取某些网站时,我们经常会设置HTTP代理IP来避免爬虫程序被封。我们获取代理 IP 地址方式通常提取国内的知名 IP 代理商的免费代理。这些代理商一般都会提供透明代理,匿名代理,高匿代理。那么这几种代理的区别是什么?我们该如何选择呢?本文的主要内容是讲解各种代理IP背后的原理。 1、代理类型 代理类型一共能分为三种。透明代理,匿名代理,高匿代理,从安全程度来说,这四种代理类型的排序是 高...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。