<!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. paip.函数方法回调机制跟java php python c++的实现

    paip.函数方法回调机制跟java php python c++的实现 作者Attilax 艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...

  2. iOS App 研发的最后冲刺：内测与部署

    当开发者历经磨难.披荆斩棘,完成了一个iOS项目后,最后的临门一脚就是应用的内测.部署.那么,在这最后的射门动作中,都有哪些地方需要开发者注意?有哪些方式能够更好地帮助我们进行iOS应用的发布部署? ...

  3. JAVA编程中的类和对象

    1:初学JAVA,都知道JAVA是面向对象的编程.笔者这节开始说说类和对象.(实例仅供参考,如若复制粘贴记得修改包名和类名,避免出错) 学习JAVA的快捷键,Alt+/代码补全功能,其实此快捷键启动了 ...

  4. phpMyAdmin 登陆需要密码

    网页设计从事者在学习网页时都用过 "xampp" 这款软件吧. 本人今天正常使用时,系统提示可升级 phpMyAdmin.当前最新版本为:phpMyAdmin-4.6.4-all- ...

  5. thinkphp框架下404页面设置

    404页面即系统在找不到请求的操作方法和找不到请求的控制器名称时的一种报错行为的优化. 第一步:在thinkphp框架中的Home/Comtroller中建一个EmptyController.clas ...

  6. 进度的Block在子线程调用

    [_pictureView sd_setImageWithURL:[NSURL URLWithString:item.image2] placeholderImage:nil options:SDWe ...

  7. PlaceholderImageView

    PlaceholderImageView 说明 1. PlaceHolderImageView基于SDWebImage编写 2. 给定一个图片的urlString,以及一个placeholderIma ...

  8. malloc钩子和内存泄漏工具mtrace、Valgrind

    一:malloc钩子函数 static void* (* old_malloc_hook) (size_t,const void *);static void (* old_free_hook)(vo ...

  9. 【linux】修改文件所属用户和组

    使用chown命令可以修改文件或目录所属的用户: 命令:chown 用户 目录或文件名 例如:chown qq /home/qq  (把home目录下的qq目录的拥有者改为qq用户) 使用chgrp命 ...

  10. [转]java byte 数据类型(基础)

    package com.suypower.chengyu.test; public class ByteTest { /** * byte 8 bits -128 - + 127 * 1 bit = ...