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的更多相关文章

  1. iOS framework静态库中使用xib和图片资源详解

    一.新建bundle 前2篇文章介绍了iOS 最新framework和.a静态库制作及使用全解   iOS 工程套子工程,主工程和framework工程或.a library静态库工程联调 我现在是在 ...

  2. 023_数量类型练习——Hadoop MapReduce手机流量统计

    1) 分析业务需求:用户使用手机上网,存在流量的消耗.流量包括两部分:其一是上行流量(发送消息流量),其二是下行流量(接收消息的流量).每种流量在网络传输过程中,有两种形式说明:包的大小,流量的大小. ...

  3. Django的admin源码浅析和模仿

    admin模块: admin提供了5种接口 list_display, 指定数据展示字段,不能放多对多字段

随机推荐

  1. [转]基于国家标准的 EndNote 输出样式模板 ----直接用endnote导入到word,不用自己一个个改参考文献了

    EndNote 相当于一个数据库,将添加/导入的文献存档.需要引用文献的时候就从中选择一个插入到文档中,EndNote 会自动给你编号.在文档末尾建立相应的参考文献列表.但是各种杂志.单位要求的文献著 ...

  2. Flink--3种分区方式

    partitionByHash //TODO partitionByHash val data = new mutable.MutableList[(Int, Long, String)] data. ...

  3. Python 面向对象3-类变量与实例变量

    #!/usr/bin/env python # -*- coding:utf-8 -*- # 作者:Presley # 邮箱:1209989516@qq.com # 时间:2018-08-05 # O ...

  4. sublime text 自定义插件,自动插入署名,自定义插入日期,自动生成头部注释

    自动插入署名 菜单下面的 一.工具(tool)>新代码段(new snippet…) 看到以下代码 <snippet> <content><![CDATA[ Hel ...

  5. sql的with as用法

    http://www.cnblogs.com/linjiqin/archive/2013/06/24/3152667.html

  6. 20165220Java实验四 Android程序设计

    一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:葛宇豪 学号:20165220 指导教师:娄嘉鹏 实验日期:2018年5月14日 实验时间:13:45 - 15:25 实验序号:实验 ...

  7. 002.Kickstart部署之NFS架构

    一 准备 1.1 完整架构:Kickstart+DHCP+NFS+TFTP+PXE 1.2 组件应用 Kickstart服务端IP:172.24.8.12 DHCP:提供客户端IP,网关,镜像路径等: ...

  8. linux 学习笔记 finding people

    #who 或者 #w 展示所有登录到当前系统的用户信息 #who am i 展示真是用户信息 #whoami  展示登陆系统的用户名 例如 : 登陆用户和真实用户一致 #whoami root #wh ...

  9. 爆炸销毁动画组件Explosions

    爆炸销毁动画组件Explosions   爆炸销毁动画通常应用于界面元素的移除.使用该动画效果可以将移除操作表现的更为直观生动.Explosions组件是一款专门实现爆炸销动画效果的组件,它可以展示界 ...

  10. 使用C#的is、as操作符来转型

    is检查对象是否兼容于指定类型,返回Boolean值true或false.使用is永远不会抛出异常. 例:Object o=new Object(); bool b1=(o is Object);// ...