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, 指定数据展示字段,不能放多对多字段
随机推荐
- [转]基于国家标准的 EndNote 输出样式模板 ----直接用endnote导入到word,不用自己一个个改参考文献了
EndNote 相当于一个数据库,将添加/导入的文献存档.需要引用文献的时候就从中选择一个插入到文档中,EndNote 会自动给你编号.在文档末尾建立相应的参考文献列表.但是各种杂志.单位要求的文献著 ...
- Flink--3种分区方式
partitionByHash //TODO partitionByHash val data = new mutable.MutableList[(Int, Long, String)] data. ...
- Python 面向对象3-类变量与实例变量
#!/usr/bin/env python # -*- coding:utf-8 -*- # 作者:Presley # 邮箱:1209989516@qq.com # 时间:2018-08-05 # O ...
- sublime text 自定义插件,自动插入署名,自定义插入日期,自动生成头部注释
自动插入署名 菜单下面的 一.工具(tool)>新代码段(new snippet…) 看到以下代码 <snippet> <content><![CDATA[ Hel ...
- sql的with as用法
http://www.cnblogs.com/linjiqin/archive/2013/06/24/3152667.html
- 20165220Java实验四 Android程序设计
一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:葛宇豪 学号:20165220 指导教师:娄嘉鹏 实验日期:2018年5月14日 实验时间:13:45 - 15:25 实验序号:实验 ...
- 002.Kickstart部署之NFS架构
一 准备 1.1 完整架构:Kickstart+DHCP+NFS+TFTP+PXE 1.2 组件应用 Kickstart服务端IP:172.24.8.12 DHCP:提供客户端IP,网关,镜像路径等: ...
- linux 学习笔记 finding people
#who 或者 #w 展示所有登录到当前系统的用户信息 #who am i 展示真是用户信息 #whoami 展示登陆系统的用户名 例如 : 登陆用户和真实用户一致 #whoami root #wh ...
- 爆炸销毁动画组件Explosions
爆炸销毁动画组件Explosions 爆炸销毁动画通常应用于界面元素的移除.使用该动画效果可以将移除操作表现的更为直观生动.Explosions组件是一款专门实现爆炸销动画效果的组件,它可以展示界 ...
- 使用C#的is、as操作符来转型
is检查对象是否兼容于指定类型,返回Boolean值true或false.使用is永远不会抛出异常. 例:Object o=new Object(); bool b1=(o is Object);// ...