精选文章 zepto选择器

zepto选择器

作者:ElegantHedgehog 时间: 2021-02-05 09:47:07
ElegantHedgehog 2021-02-05 09:47:07
【摘要】跟jQuery非常类似,非常适合移动端 
先去官网下载zepto.min.js https://www.bootcdn.cn/zepto/ 
 
  
 https://www.bootcdn.cn/zepto/ 
 
  
  
在网页中引入 
 
  
 
 编写第一个zepto小程序 
 
 DOCTYPE html>
<html lang="en">
<head> <meta cha...

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

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

zepto选择器1

 

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

zepto选择器2

 

 

在网页中引入

<script></script>

 编写第一个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>
<style> div{font-size:36px;color:orange;} </style>

 

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占位
分享文章到微博
分享文章到朋友圈

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

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

您可能感兴趣

  • Objective-C 2.0 with Cocoa Foundation--- Class类型,选择器Selector以及函数指针(3)

    当我们在程序里面通过使用上面的第一,二或者第三行代码成功的取得一个Class类型的变量,比如说我们把这个变量名字命名为myClass,那 么我们在以后的代码种可以把myClass当作一个我们已经定义好的类来使用,当然我们可以把这个变量作为参数传递到其他的方法当中让其他的方法动态的生 成我们需要的对象。   5.7,DoProxy.h里面的方法定义   DoProxy.h里面还有一些实例方法,...

  • im和音视频开发哪个更好_开发更好的国家选择器

    im和音视频开发哪个更好 在每个Web开发人员的生活中,都有一个需要国家/地区选择器的地步-可能需要注册表格或送货地址。 因此,我们找到了所有249个国家/地区的列表,在我们HTML代码中插入了一个select框,并认为这项工作做得很好。 不是。 国家选择框是可怕的。 问题包括: 1.选择太多 在249个项目中定位您的国家/地区是可用性的噩梦。 2.尴尬...

  • 浅谈android的selector背景选择器

    关于listview和button都要改变android原来控件的背景,在网上查找了一些资料不是很全,所以现在总结一下android的selector的用法。 首先android的selector是在drawable/xxx.xml中配置的。 先看一下listview中的状态: 把下面的XML文件保存成你自己命名的.xml文件(比如list_item_bg.xml),在系统使用时根据List...

  • 9个有用的jQuery日历和网页设计师的日期选择器插件

    事件日历和日期选择器是是我们开发当中经常遇到的问题,这个时候我们就需要用jquery插件来实现,昨天我在做项目的时候,遇到了个问题就是如何显示倒计时问题,我这个时候就用jquery插件解决的,今天给大家分享9个其他的时间选择器插件 1。FullCalendar FullCalendar是一个著名的jQuery日历插件,它提供了拖和下降功能,与谷歌日历整合,并能够通过JSON获取事件等功能。设...

  • 强大的jquery选择器(转)

    jQuery-强大的jQuery选择器 (详解)[转] 1. 基础选择器 Basics 名称说明举例#id根据元素Id选择$("divId") 选择ID为divId的元素element根据元素的名称选择,$("a") 选择所有元素.class根据元素的css类选择$(".bgRed") 选择所用CSS类为bgRed的元素*选择所有元素$("*")选择页面所有元素selector1...

  • 1.1.3 .class 类选择器

    定义情况: CSS1 CSS2 CSS3 类选择器,选择匹配所有元素class属性中“包含”给定值的那些元素: 比如下面一段html代码片段: <input class="base-button ok-button" value="确定" /> <button class="base-button cancel-button>取消 #" class="not-a-button"...

  • 图片选择器详解

    2019独角兽企业重金招聘Python工程师标准>>> 今天工作中要用到图片选择器,就研究了一下,下面解析一下具体的代码步骤 一般的图片选择器有两个功能,从相册里面获取图片,还有拍照获取图片 1、获取图片 1)从相册获取图片 //打开手机中可以浏览图片的应用让用户选择哪一个 Intent getImage = new Intent(Intent.ACTI...

  • 属性选择器

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title> <script src...

CSDN

CSDN

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

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

免费套餐,马上领取!
zepto选择器介绍:华为云为您免费提供zepto选择器在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多zepto选择器的相关内容。| 移动地址: zepto选择器 | 写博客