jquery组件和插件写法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="jquery-1.7.2.js"></script>
<script> $.fn.toRed = function(){
//插件里面的this 是jquery对象
this.css("background","red");
}; $.fn.toGreen = function(){
//插件里面的this 是jquery对象
this.css("background","green");
}; $(function(){
$("#div1").toggle(function(){
$(this).toRed();
},function(){
$(this).toGreen();
});
});
</script>
</head> <body> <div id="div1"></div> </body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="jquery-1.7.2.js"></script>
<script> $.fn.extend({
toRed:function(){
this.css("background","red");
},
toGreen:function(){
this.css("background","green");
}
}); $(function(){
$("#div1").toggle(function(){
$(this).toRed();
},function(){
$(this).toGreen();
});
});
</script>
</head> <body> <div id="div1"></div> </body>
</html>
<!--
智能社© - http://www.zhinengshe.com/ 微博：@北京智能社
微信：zhi_neng_she 最具深度的前端开发培训机构 HTML+CSS/JS/HTML5
--> <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能社</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="../jquery-1.7.2.js"></script>
<script src="slide.js"></script>
<script>
$(function(){
$("#play").slide();
$("#play2").slide();
});
</script>
</head> <body> <div class="play" id="play">
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/1.jpg" alt="广告一" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/2.jpg" alt="广告二" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/3.jpg" alt="广告三" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/4.jpg" alt="广告四" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/5.jpg" alt="广告五" /></a></li>
</ul>
</div> <div class="play" id="play2">
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/1.jpg" alt="广告一" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/2.jpg" alt="广告二" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/3.jpg" alt="广告三" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/4.jpg" alt="广告四" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="data:images/5.jpg" alt="广告五" /></a></li>
</ul>
</div>
</body>
</html>
//版权 北京智能社©, 保留所有权利
$.fn.slide = function (){
var $aBtn =this.find("ol li");
var $oUl = this.find("ul");
var $aLi = this.find("ul li");
var iNow = ;
var timer = setInterval(next,);
this.hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(next,);
});
function next(){
iNow++;
if(iNow == $aLi.length){
iNow = ;
}
tab();
}
$aBtn.mouseover(function(){
iNow = $(this).index();
tab();
});
function tab(){
$aBtn.removeClass("active");
$aBtn.eq(iNow).addClass("active");
$oUl.stop().animate({top:-$aLi.height()*iNow});
}
};
jquery组件和插件写法的更多相关文章
- Jquery插件写法及extentd函数
JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...
- jQuery组件写法
知识点: 什么是插件 jQuery插件的模式 jQuery插件的Lightweight Start模式(入门级插件模式) 8.1 插件(Plug-in) “插件”这个关键字,估计大家在日常生活中经常有 ...
- [转]jQuery插件写法总结以及面向对象方式写法
本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...
- ***使用jQuery去封装插件（组件化、模块化的思想），即扩展方法
如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的 ...
- 封装两个简单的Jquery组件
Jquery给我们提供了很大的方便,我们把他看成是一个公共库,以致在这个公共库上延伸出了很多Jquery插件:在项目过程中,有些插件总是不那么令人满意: 主要说两个项目用途: 1. 遮罩层,跟一般的 ...
- jQuery组件开发之表格隔行选中效果实现
一.效果展示如下 jQuery组件之表格插件源码 //表格选中插件 //方式一 (function($){ var chosTabBgColor = function(options){ //设置默认 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- 基于Bootstrap的DropDownList的JQuery组件的完善版
在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...
- 10 个免费的 jQuery 可视化编辑器插件
富文本编辑器,也就是所见即所得的 HTML 编辑器,是网站一个非常重要的组件,特别是对于一些内容发布网站来说.本文介绍 10 个基于 jQuery 的可视化文本编辑器. MarkitUp markIt ...
随机推荐
- Python3基础 set 自动将重复合并掉 不支持索引
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- IntelliJ-IDEA和Git、GitHub、Gitlab的使用
一.基本入门 1.IntelliJ-IDEA预装的版本控制介绍 我们来看IntelliJ-IDEA的版本控制设置区域 打开File>Settings>Version Control 可以 ...
- 简单介绍tomcat中maxThreads，acceptCount，connectionTimeout
<?xml version='1.0' encoding='utf-8'?> <Server port="8005" shutdown="SHUTDOW ...
- 虚函数_构造函数_测试_VS2010x86
1.控制台测试代码: #include <stdio.h> #include <windows.h> class A { public: A() { printf(" ...
- shell 特殊变量详解
$0 获取当前执行脚本的名称,包括路径 [root@centos test]# cat test.sh echo $0 [root@VM_102_244_centos test]# bash test ...
- HDU 6106 Classes
Classes 思路:a中包含的元素:只参加a的,只参加a且b的,只参加a且c的,只参加a且b且c的: b中包含的元素:只参加b的,只参加a且b的,只参加b且c的,只参加a且b且c的: c中包含的元素 ...
- Java 包的概述和讲解
2017-11-02 22:58:45 包(package):其实就是文件夹. 包的作用是对类进行分类的管理,并且区分不同的类名. 举例: 学生:增加,删除,修改,查询 教师:增加,删除,修改,查询 ...
- Mac下使用源码编译安装TensorFlow CPU版本
1.安装必要的软件 1.1.安装JDK 8 (1)JDK 8 can be downloaded from Oracle's JDK Page: http://www.oracle.com/techn ...
- Ubuntu 16.04下docker ce的安装
卸载版本的docker sudo apt-get remove docker docker-engine docker.io 安装可选内核模块 从 Ubuntu 14.04 开始,一部分内核模块移到了 ...
- Java数组的定义和使用
如果希望保存一组有相同类型的数据,可以使用数组. 数组的定义和内存分配 Java 中定义数组的语法有两种: type arrayName[]; type[] arrayName; type 为Java ...