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. 从oracle导出数据成csv,将csv导入mongodb问题

  2. Python学习(十二) —— 面向对象

    一.初识面向对象 面向过程的核心是过程,流水线思维,过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西. 优点:极大地降低了写程序的复杂度,只需要顺着要执行的 ...

  3. Ubuntu18.04上安装java

    安装java8 sudo add-apt-repository ppa:webupd8team/javasudo apt-get updatesudo apt-get install oracle-j ...

  4. 使用VMware通过vmdk文件创建XP虚拟机

    一.打开VMware workstation10,转到主页,选择“创建新的虚拟机”,然后选择“自定义(高级)”选项 二.虚拟机硬件兼容性选择默认兼容10.0模式,下一步之后,选择“稍后安装操作系统” ...

  5. Python交互图表可视化Bokeh:6. 轴线| 浮动| 多图表

    绘图表达进阶操作 ① 轴线设置② 浮动设置③ 多图表设置 1. 轴线标签设置 设置字符串 import numpy as np import pandas as pd import matplotli ...

  6. --mysql 导出数据时, 数字类型的列如果位数过长,变为科学计数法问题

    --mysql 导出数据时, 数字类型的列如果位数过长,变为科学计数法问题在字段前加上\t即可select concat('\t',a.IDCARD_NO) from xxx a

  7. Java中System类的相关应用

    1.Runtime: public class RuntimeDemo { public static void main(String[] args) { Runtime runtime=Runti ...

  8. linuxDNS配置

    DNS配置 vim /etc/resolv.conf nameserver 114.114.114.114

  9. CNN:人工智能之神经网络算法进阶优化,六种不同优化算法实现手写数字识别逐步提高,应用案例自动驾驶之捕捉并识别周围车牌号—Jason niu

    import mnist_loader from network3 import Network from network3 import ConvPoolLayer, FullyConnectedL ...

  10. Sublime Text3配置Lua运行环境

    Sublime Text3配置Lua运行环境 前言 要问现在哪个编译器最能扛得住潮流,要数Sublime Text3了,由于它的轻量,插件丰富,美观,造就了一大批粉丝(本菜鸡也是哦) 在以前的工作中使 ...