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. mysql中cast() 和convert()的用法讲解

    一.在mysql操作中我们经常需要对数据进行类型转换.此时我们应该使用的是cast()或convert(). 二.两者的对比 相同点:都是进行数据类型转换,实现的功能基本等同 不同点:两者的语法不同, ...

  2. vue-cli 部分浏览器不支持es6的语法-babel-polyfill的引用和使用

    npm install --save-dev babel-polyfill babel-polyfill用正确的姿势安装之后,引用方式有三种: 1.require("babel-polyfi ...

  3. appium---第一个脚本--启动一个已存在的app

    1.可以使用android-sdk中的aapt工具 ①.选择一个版本的build_tools,加入path环境变量中 ②.验证aapt环境是否正常 3.下载你要测试的包,放入某一地址中(随意):aap ...

  4. 三级区域jquery插件

    /*! * Distpicker v1.0.4 * https://github.com/fengyuanchen/distpicker * * Copyright (c) 2014-2016 Fen ...

  5. 设计模式之单例模式及应用demo

    单例模式是创建型模式之一. 单例模式顾名思义是单例的,也就是只有一个实例化对象,这都来源于它的私有化构造函数. 单例模式特点: 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯一实例. 3. ...

  6. 修改tp5的默认配置文件的位置

    web |--application | |--admin | |--home | | |--controller | | |--model | | |--view | | |--extra 5.01 ...

  7. 00-JAVA语法基础--课后作业

    题目:像二柱子那样,花20分钟写一个能自动生成30道小学四则运算题目的“软件”. package 课堂作业1; import java.util.Random; import java.util.Sc ...

  8. linux(manjaro)磁盘迁移/opt /home

    目录 1. 创建临时挂载点/opt, 并将分区挂载到临时挂载点上: 2. 切换单用户,将除了root用户之外的用户踢出 3.  将/opt目录下的所有内容拷贝到临时挂载点中,等待结束 4. 进入/et ...

  9. CSS基础以及属性

    一.CSS 偷个懒,啥是CSS我就不介绍啦 二.CSS语法 CSS语法:选择符{属性:属性值:属性:属性值:}选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.属性:属性 ...

  10. python 数据结构之二分查找的递归和普通实现

    二分查找就是待查找的列表进行分半搜索 如下所示 二分查找普通实现: def erfen(alist, item): start = 0 end = len(alist) - 1 while start ...