<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>zepto</title>
<style>
.main {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
<script src="zepto.min.js"></script>
<script>
$("button").click(function () {
$("p").toggleClass("main");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>zepto</title>
<style>
.listitem_1, .listitem_3 {
color: red;
} .listitem_0, .listitem_2 {
color: blue;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li>Apple</li>
<li>IBM</li>
<li>Microsoft</li>
<li>Google</li>
</ul>
<button class="btn1">添加或移除列表项的类</button>
<script src="zepto.min.js"></script>
<script>
$("button").click(function () {
$('ul li').toggleClass(function () {
return 'listitem_' + $(this).index();
});
});
</script>
</body>
</html>

zepto - toggleClass的更多相关文章

  1. 原生JavaScript实现hasClass、addClass、removeClass、toggleClass

    兼容IE6+,因IE6.IE7.IE8不支持Array.prototype.indexOf()和String.prototype.trim(),分别用Polyfill实现支持. 详细: indexOf ...

  2. [原创]zepto打造一款移动端划屏插件

    最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...

  3. Zepto中文API

    原文地址:http://zeptojs.com/ 译文地址:http://www.html-5.cn/Manual/Zepto/ Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,  ...

  4. 学习zepto.js(对象方法)[1]

    zepto也是使用的链式操作,链式操作:函数返回调用函数的对象. 但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说 ...

  5. Zepto源码

    // Zepto.js // (c) 2010-2016 Thomas Fuchs // Zepto.js may be freely distributed under the MIT licens ...

  6. zepto.js 源码解析

    http://www.runoob.com/w3cnote/zepto-js-source-analysis.html Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  7. zepto源码注解

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

  8. zepto源代码解读

    /** * Created by nono on 14-11-16. */ /* Zepto v1.1.4 - zepto event ajax form ie - zeptojs.com/licen ...

  9. Zepto源码注释

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

随机推荐

  1. CSS3实现的超酷动态圆形悬浮效果

    在线演示 本地下载 了解代码是如何开发的? 请参考并且播放如下代码轻视频: http://www.gbtags.com/gb/rtreplayerpreview/151.htm

  2. 结构体快排回顾(sort)

    一般来说,我做竞赛的时候排序一般用快排 很快很方便 普通sort(从小到大) sort(a,a+n); 直接贴一段代码吧,包含了vector,sort,结构体等简单东西综合 #include < ...

  3. Windows Server 2016 桌面环境的自动配置脚本

    除非学习要求,还是建议使用Windows 10 LTSB 2016或其他桌面系统. github:https://github.com/m2nlight/WindowsServerToWindowsD ...

  4. python判断文件和目录是否存在

    #Python的os.path模块提供了 isdir() 和 isfile()函数,请导入该模块,并调用函数判断指定的目录和文件是否存在. import os print os.path.isdir( ...

  5. 多层嵌套对象无法使用gson反序列化的问题The JsonDeserializer com.google.gson.DefaultTypeAdapters$CollectionTypeAdapter@3bf13cde failed to de

    http://www.oschina.net/question/1256646_123691 http://bbs.csdn.net/topics/360005140 http://stackover ...

  6. 实现微信公众号自动登陆自己的Web App

    测试: 基本的思路是通过公众号OAuth API获取用户微信的openid.第一次使用的时候让用户登录,然后在数据库里把openid和自己应用的userid对应起来.以后获得用户的openid之后就可 ...

  7. BigDecimal除法运算出现java.lang.ArithmeticException: Non-terminating decimal expansion; no exact representable decimal result的解决办法

    BigDecimal除法运算出现java.lang.ArithmeticException: Non-terminating decimal expansion; no exact represent ...

  8. android中xmlns:tools属性详解

    今天读到一篇总结的非常棒的文章,写的逻辑很清晰也很实用,很少见到如此棒的文章了.就原文转发过来,我把格式给整理了一下,分享给园子里的各位朋友!好久没写博客了,就为2015年的11月留份纪念吧.希望对你 ...

  9. Hadoop学习篇 2 初识 Hadoop

    在一个全配置的集群上,运行Hadoop意味着在网络分布的不同服务器上运行一组守护进程 (daemons),这些守护进程或运行在单个服务器上,或运行与多个服务器上,他们包括: (1) NameNode( ...

  10. AndroidStudio小技巧--依赖库

    同步发表于http://avenwu.net/2015/02/12/androidstudio_library_dependency Fork on github https://github.com ...