zepto - toggleClass
<!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的更多相关文章
- 原生JavaScript实现hasClass、addClass、removeClass、toggleClass
兼容IE6+,因IE6.IE7.IE8不支持Array.prototype.indexOf()和String.prototype.trim(),分别用Polyfill实现支持. 详细: indexOf ...
- [原创]zepto打造一款移动端划屏插件
最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...
- Zepto中文API
原文地址:http://zeptojs.com/ 译文地址:http://www.html-5.cn/Manual/Zepto/ Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, ...
- 学习zepto.js(对象方法)[1]
zepto也是使用的链式操作,链式操作:函数返回调用函数的对象. 但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说 ...
- Zepto源码
// Zepto.js // (c) 2010-2016 Thomas Fuchs // Zepto.js may be freely distributed under the MIT licens ...
- zepto.js 源码解析
http://www.runoob.com/w3cnote/zepto-js-source-analysis.html Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...
- zepto源码注解
/* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...
- zepto源代码解读
/** * Created by nono on 14-11-16. */ /* Zepto v1.1.4 - zepto event ajax form ie - zeptojs.com/licen ...
- Zepto源码注释
/* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...
随机推荐
- crossplatform---electron Quick Start
Electron enables you to create desktop applications with pure JavaScript by providing a runtime with ...
- crossplatform---Nodejs in Visual Studio Code 06.新建Module
1.开始 Node.js:https://nodejs.org 2.Moudle js编程中,由于大家可以直接在全局作用域中编写代码,使开发人员可以很容易的新建一个全局变量或这全局模块,这些全局变量或 ...
- atitit.插件体系设计总结o73.doc
1. 两大类型:微内核(级联树形结构)与巨内核(管理容器,并联结构). 1 2. 通用插件接口 1 3. 插件的绑定and 初始化 2 4. 微内核插件平台设计 2 5. 参考 2 1. 两大类型:微 ...
- Leetcode 70 Climbing Stairs 递推
其实就是斐波那契数列 参考dp[n] = dp[n-1] +dp[n-2]; class Solution { public: int climbStairs(int n) { ; ; ; ; i & ...
- JavaScript 语句 for
循环for语句: for(var i =1;i<=5;i++)(初始条件:循环条件:状态改变) { 循环体 } 循环的作用:反复执行某段代码 四要素:初始条件.循环条件.循环体.状态改变 例题1 ...
- Android中的IOC框架，完全注解方式就可以进行UI绑定和事件绑定
转载请注明出处:http://blog.csdn.net/blog_wang/article/details/38468547 相信很多使用过Afinal和Xutils的朋友会发现框架中自带View控 ...
- EasyN IP Camera
Android App: "EasyN P" How to access EasyN HD ip camera web interface by browser: http:// ...
- netfilter分析
转自:http://blog.sina.com.cn/s/blog_a31ff26901013n07.html 一.概述 1. Netfilter/IPTables框架简介 Netfilter/IPT ...
- HTML：模拟链接被按下，在新标签页打开页面，不使用window.open(可能被拦截)
当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实现但是因为使用window.open在新窗口或者新标签页中打开页面,有可能被浏览器给拦截.为了解决这个问题,可以模拟链接被按下 ...
- [转]移动端web页面使用字体的思考
一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿 ...