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. python全栈开发day62-两表操作增删改查,外键,if else模板语法

    一.今日内容总结: day62 内容回顾: 1. django有关所有命令: pip install django==1.11.14 django-admin startproject 项目名称 cd ...

  2. LNMP分离部署

    环境: Nginx+PHP:192.168.2.144 Mysql:192.168.2.151 [Nginx] yum install -y pcre-devel openssl-deve popt- ...

  3. HDU4622 Reincarnation 字符串 SAM

    原文链接https://www.cnblogs.com/zhouzhendong/p/HDU4622.html 题目传送门 - HDU4622 题意 多组数据. 对于每一组数据,给定一个字符串 s , ...

  4. spring cloud (三、服务提供者demo_provider)

    spring cloud (一.服务注册demo_eureka) spring cloud (二.服务注册安全demo_eureka) 创建一个服务提供者注册到服务注册中心,跟前一个案例一样创建一个s ...

  5. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第十二集之FastDFS的使用】

    (自己的项目路径)相关项目在web部分中priv.lirenhe.fastdfs 官方提供一个fastdfs开发项目,下载下来maven install 以下内容是借鉴网上的一篇文章,但是不知道网址了 ...

  6. java分页实现

    虽然现在有很多好用的框架,对分页进行支持,很简单的就把分页的效果做出来,但是如果自己手写是一个怎样的流程的?今天就来说说它,手动实现分页效果. 一.分页的思路 首先我们得知道写分页代码时的思路,保持思 ...

  7. HDU 2586 How far away ?(经典)(RMQ + 在线ST+ Tarjan离线) 【LCA】

    <题目链接> 题目大意:给你一棵带有边权的树,然后进行q次查询,每次查询输出指定两个节点之间的距离. 解题分析:本题有多重解决方法,首先,可用最短路轻易求解.若只用LCA解决本题,也有三种 ...

  8. POJ 1328 安装雷达 (贪心)

    <题目链接> 题目大意: 以x轴为分界,y>0部分为海,y<0部分为陆地,给出一些岛屿坐标(在海中),再给出雷达可达到范围,雷达只可以安在陆地上,问最少多少雷达可以覆盖所以岛屿 ...

  9. iOS9 中 alertView 的使用

    "UIAlertView is deprecated. Use UIAlertController with a preferredStyle of UIAlertControllerSty ...

  10. Android Stuido 方法参数 p0,p1

    Android Stuido 方法参数 p0,p1 参考文献 https://stackoverflow.com/questions/49219439/incorrect-variable-names ...