JQ04
1、JQ插件
使用插件扩展jq的功能
1）插入插件的步骤：
引入JQ文件，引入插件，若有用到css，需要引入css.使用插件。
2）jquery.color.js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<!--1. 引入jquery的js文件-->
<script src="jquery-1.12.4.js"></script>
<!--2. 引入插件的js文件-->
<script src="jquery.color.js"></script>
<script>
$(function () {
//3. 直接使用即可。
//说明jquery不支持颜色的渐变,颜色最好用16进制
$('div').animate({backgroundColor:"#ffc0cb"}, 3000, function () {
alert("呵呵");
});
});
</script>
</body>
</html>
jq不支持颜色的渐变。引入插件时，必须要在引入jq后再引入
3）jquery.lazyload.js
懒加载插件，打开网页时仅加载可视区域内的图片
js通常放在body标签最后加载。
使用方法：引入后，在需要使用懒加载的图片标签内写：4
<img data.oringinal="src"...>不需再写src属性,可使用标签以便批量懒加载
$(function(){$("img").lazyload();
});
3、jquery插件制作
1）利用原型添加方法
例：
jquery.prototype.sayHi=function()+{
}
jq插件的实质，就是给jq的原型上增加方法
或者直接：
$.fn===prototype
$.fn.函数=function(){
…
]
在方法中this指代的是调用方法的实例对象
现在将代码封装为一个插件并使用
首先需要新建一个js文件将代码放入并命名
使用方法也与使用普通插件一致。要特别注意链式编程的问题，需要返回一个对象，最后返回一个
return this;//即可
4、手风琴插件封装
1） JQ重复使用一个对象可以用变量接收
JQ04的更多相关文章
- iOS framework静态库中使用xib和图片资源详解
一.新建bundle 前2篇文章介绍了iOS 最新framework和.a静态库制作及使用全解 iOS 工程套子工程,主工程和framework工程或.a library静态库工程联调 我现在是在 ...
- 023_数量类型练习——Hadoop MapReduce手机流量统计
1) 分析业务需求:用户使用手机上网,存在流量的消耗.流量包括两部分:其一是上行流量(发送消息流量),其二是下行流量(接收消息的流量).每种流量在网络传输过程中,有两种形式说明:包的大小,流量的大小. ...
- Django的admin源码浅析和模仿
admin模块: admin提供了5种接口 list_display, 指定数据展示字段,不能放多对多字段
随机推荐
- James Munkres Topology: Sec 37 Exer 1
Exercise 1. Let \(X\) be a space. Let \(\mathcal{D}\) be a collection of subsets of \(X\) that is ma ...
- Asp.net MVC - 使用PRG模式（附源码）
阅读目录: 一. 传统的Asp.net页面问题 二.Asp.net MVC中也存在同样的问题 三.使用PRG模式 四.PRG模式在MVC上的实现 一. 传统的Asp.net页面问题 一个传统的Asp. ...
- python基础——高级特性
1.切片 切片: >>> L = ['Michael', 'Sarah', 'Tracy', 'Bob', 'Jack'] >>> L[:3] ['Michael ...
- Python_面向对象_类1
面向对象:减少重复代码,提高效率,比函数式编程更高效 类的创建: 实例属性又称:成员变量,成员属性(或者字段) 面向对象的三大特性: 一.封装 把客观事物封装为抽象的类,并对外只暴露一个可用接口 使用 ...
- Kafka/Zookeeper集群的实现(二)
[root@kafkazk1 ~]# wget http://mirror.bit.edu.cn/apache/zookeeper/zookeeper-3.4.12/zookeeper-3.4.12. ...
- js前端ajax提交list集合参数至后端
var orderNosList = new Array(); var rows = $("#dg_linkOrder").datagrid("getChecked&qu ...
- Codeforces 513E2 Subarray Cuts dp (看题解)
我们肯定要一大一小间隔开来所以 把式子拆出来就是类似这样的形式 s1 - 2 * s2 + 2 * s3 + ...... + sn 然后把状态开成四个, 分别表示在顶部, 在底部, 在顶部到底部的中 ...
- BZOJ3156 防御准备 动态规划 斜率优化
原文链接http://www.cnblogs.com/zhouzhendong/p/8688187.html 题目传送门 - BZOJ3156 题意 长为$n$的序列$A$划分,设某一段为$[i,j] ...
- Spark中map与flatMap
map将函数作用到数据集的每一个元素上,生成一个新的分布式的数据集(RDD)返回 map函数的源码: def map(self, f, preservesPartitioning=False): &q ...
- ctf study of jarvisoj reverse
[61dctf] androideasy 164求解器 50 相反 脚本如下: s='' a=113, 123, 118, 112, 108, 94, 99, 72, 38, 68, 72, 87, ...