跟jQuery非常类似，非常适合移动端
先去官网下载zepto.min.js https://www.bootcdn.cn/zepto/
https://www.bootcdn.cn/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>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>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>
原生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>
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转zeptovar one=document.getElementById("one");
$(one).addClass("two");
})script>body>html>
css选择器：
<div id="one">hello cyydiv>
{font-size:36px;color:orange;}" _ue_custom_node_="true">
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>tt--><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>zeptotitle><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><style>style>head><body> tt--><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> tt--><script src="js/zepto.min.js">script><script>//zepto//这种方法不可行，因为返回的是空对象，也会转为trueif($("#tt")){
console.log("tt存在");
}//这种方法可行//判断长度是否大于0，空对象不会大于0if($("#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>
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>
基础选择器：
标签选择器+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>
层次选择器：
后代选择器（子孙）
<!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>
子元素选择器
<!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>
相邻兄弟选择器（后面紧挨着的）
<!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>
兄弟选择器（后面出现的同级，前面出现的不行）
<!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>
过滤选择器：
属性过滤选择器
[ ] 含有某个属性的元素
<!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>
属性为指定值 =
<!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>
属性值以指定值开头 ^=
<!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>
属性值以指定值结尾 $=
<!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>
属性值包含指定值 *=
<!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>
属性叠加过滤
<!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>
子元素过滤选择器
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>
选择器中的特殊符号：
. # ( [
需要进行转义 \\
<!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>
选择器中的空格：
隔代需要空格，不隔代不需要空格
<!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>
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
