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 ...
随机推荐
- linux内核分析 第五周
一.实验相关 1.下载老师最新的menu文件,并在其中添加上周所编写的代码,并运行 下载 添加 运行 2.gdb调试跟踪 gdb设置跟踪文件(先进入linux-3.18.6所在的文件) gdb设置断点 ...
- JavaScript replaceAll
网上的: String.prototype.replaceAll = function(str1, str2) { var str = this; var result = str.replace(e ...
- 【第二十九章】 springboot + zipkin + mysql
zipkin的数据存储可以存在4个地方: 内存(仅用于测试,数据不会持久化,zipkin-server关掉,数据就没有了) 这也是之前使用的 mysql 可能是最熟悉的方式 es Cassandra ...
- 【译】Asp.net core应用在 Kubernetes上内存使用率过高问题分析
原文:https://blog.markvincze.com/troubleshooting-high-memory-usage-with-asp-net-core-on-kubernetes/ ps ...
- POJ 2965 The Pilots Brothers' refrigerator （枚举+BFS+位压缩运算）
http://poj.org/problem?id=2965 题意: 一个4*4的矩形,有'+'和'-'两种符号,每次可以转换一个坐标的符号,同时该列和该行上的其他符号也要随之改变.最少需要几次才能全 ...
- TCGA系列--LncMAP
LncMAP:http://www.bio-bigdata.com/LncMAP/index.jsp
- python 操作浏览器打开指定网页
#! /usr/bin/env python # encoding=utf8 import webbrowser import time webbrowser.open("http://ww ...
- JavaScript的知识基本介绍
ECMAScript js简单介绍(与java的区别) 1.语法(区分大小写,弱类型,分号可写可不写) 2.变量(只能使用var定义,要么不定义,如果在函数内部使用var定 ...
- springboot全局配置文件可设置的属性
# =================================================================== # COMMON SPRING BOOT PROPERTIE ...
- 《剑指offer》第十题（斐波那契数列）
// 面试题:斐波那契数列 // 题目:写一个函数,输入n,求斐波那契(Fibonacci)数列的第n项. #include <iostream> using namespace std; ...