学习目标

本期是JQuery的最后一期。引入的js文件还是与上一期保持一致。

1. 插件

1.1 常用插件

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

那么我这里用百度网盘提供本期所需要的插件：
链接： https://pan.baidu.com/s/1TDX1c-Be2GixdXCeEFwCmQ
提取码：lxsw
复制这段内容后打开百度网盘手机App，操作更方便哦

1.1.1 jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

使用插件的步骤

1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件

例子：

<!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>

1.1.2 jquery.lazyload.js

懒加载插件：进入一个网站时，例如淘宝京东，上面的图片有很多很多，所以在开始时是不会把所有图片加载的，而只加载你所看到的的区域。

例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><style>div {height: 4000px;}</style>
</head>
<body>
<div></div>
<img class="lazy" data-original="02.gif" alt=""><script src="jquery-1.12.4.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
<script>$(function () {$("img.lazy").lazyload();});</script>
</body>
</html>

网页出来后，02.gif没有被加载，只有你滑动

jquery.ui.js插件

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

我再提供一个离线文档：链接：https://pan.baidu.com/s/16IAX8tTyyQKVMjetmkJUDA
提取码：npp7

例子：

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="jquery-ui.css"><style type="text/css">* {margin: 0;padding: 0;}.drag-wrapper {width: 400px;margin: 50px auto 0;/*border: 10px solid #000;*/}.drag-bar {height: 40px;font-size: 20px;font-weight: bold;line-height: 40px;text-align: center;background-color: #E6E6E6;border-top-left-radius: 5px;border-top-right-radius: 5px;cursor: move;}.resize-item {height: 212px;border: 1px solid #e6e6e6;}.sort-wrapper {height: 100%;overflow: hidden;}.sort-item {list-style: none;padding-top: 10px;}.sort-item li {height: 40px;line-height: 40px;padding-left: 20px;cursor: pointer;}.sort-item li:hover {background-color: #e6e6e6;}</style></head><body>
<div class="drag-wrapper"><div class="drag-bar">可拖动、排序、变形的新闻模块</div><div class="resize-item"><div class="sort-wrapper"><ul class="sort-item"><li>这是第1条新闻!</li><li>这是第2条新闻!</li><li>这是第3条新闻!</li><li>这是第4条新闻!</li><li>这是第5条新闻!</li><li>这是第6条新闻!</li><li>这是第7条新闻!</li><li>这是第8条新闻!</li><li>这是第9条新闻!</li><li>这是第10条新闻!</li></ul></div></div>
</div><script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script><script>$(function () {$(".drag-wrapper").draggable({handle:".drag-bar"});$(".sort-item").sortable({opacity:0.3});$(".resize-item").resizable({handles:"s"});});
</script></body></html>

效果是可以拖动，但是代码就非常简单。

1.2 制作jquery插件

原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。

//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

例子:
html文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div></div>
<p>1234</p><script src="jquery-1.12.4.js"></script>
<script src="jquery.bgColor.js"></script>
<script>$(function () {$("div").bgColor("red").width(400);});</script></body>
</html>

js文件：jquery.bgColor.js

$.fn.bgColor = function (color) {//this是一个jq对象this.css("backgroundColor", color);return this;
};

手风琴案例：
我们之前做过这个案例，用js代码写了很多，但是使用插件形式，只需要2行就能解决。

html代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;list-style: none;}div {width: 1200px;height: 400px;border: 2px solid #000;margin: 100px auto;}li {width: 240px;height: 400px;float: left;}li:nth-child(1) {background-image: url(images/1.jpg);}li:nth-child(2) {background-image: url(images/2.jpg);}li:nth-child(3) {background-image: url(images/3.jpg);}li:nth-child(4) {background-image: url(images/4.jpg);}li:nth-child(5) {background-image: url(images/5.jpg);}</style>
</head>
<body><div id="box"><ul><li></li><li></li><li></li><li></li><li></li></ul></div><script src="jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>
<script>$(function () {$("#box").accordion();});</script></body>
</html>

jquery.accordion.js

/*** Created by HUCC on 2017/4/12.*/
$.fn.accordion = function (colors, width) {colors = colors || [];width = width || 0;var $li = this.find("li");var boxLength = this.width();var maxLength = boxLength - ($li.length - 1) * width;var avgLength = boxLength / $li.length;//更改li的颜色$li.each(function (i, e) {$(e).css("backgroundColor", colors[i]);});//给li注册鼠标经过事件$li.on("mouseenter", function () {$(this).stop().animate({width: maxLength}).siblings().stop().animate({width: width})});$li.on("mouseleave", function () {$li.stop().animate({width: avgLength});});
};

总结

那么到此，JQuery的学习就结束了，更多的JQuery学习内容请上官网查看。

前端学习从入门到高级全程记录之37（jQuery④）相关推荐

前端学习从入门到高级全程记录之1 （HTML基础知识）
本次学习目标掌握HTML的基本知识,能够写出简单的页面. 1. 开发工具 1.浏览器(chrome(谷歌浏览器),IE浏览器,火狐浏览器,QQ浏览器等等). 2.代码编辑器(sublime,HBui ...
前端学习从入门到高级全程记录之41 （PHP基础Ⅳ）
学习目标本期接上期内容继续学习php基础知识. HTTP 1. 概要 1.1. 定义 HTTP(HyperText Transfer Protocol,超文本传输协议)最早就是计算机与计算机之间沟通 ...
前端学习从入门到高级全程记录之16（CSS高级技巧）
本期目标本期我们继续学习一些CSS的高级技巧. 1.CSS W3C 统一验证工具 CssStats 是一个在线的 CSS 代码分析工具,可以分析你写的代码到底好不好,哪里出错. 网址是: http: ...
前端学习从入门到高级全程记录之8 （PS基本使用综合案例）
本期学习目标本期我们将学习PS的基本使用并且运用以前所学的CSS和HTML的技术来完成一个综合案例. 1.Photoshop基本使用早在第一期我就让大家去安装PS,不知道安装了没有,没有安装的尽快 ...
前端学习从入门到高级全程记录之12 （CSS高级技巧）
学习目标本期主要学习字体,内容较少.下一期我们将做一个京东的项目,用到的知识将会非常多,非常的有综合性. 1.Web字体字体格式不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格 ...
前端学习从入门到高级全程记录之11 （云道页面例子后续）
本期目标本期学习的主要目标是:1.前几期"云道页面例子"的完善.2.CSS高级技巧的学习 1.云道页面完善在前2期的云道案例中,我们完成了一半的布局,后面的内容需要用到定位等知 ...
前端学习从入门到高级全程记录之35（jQuery②）
学习目标本期继续学习jQuery,引入的jQuery文件用的还是上一期的. 1.jQuery操作样式 1.1 css操作功能:设置或者修改样式,操作的是style属性  设置单个样式 //nam ...
前端学习从入门到高级全程记录之13 （京东项目一）
学习目的本期将会学习一个京东项目,综合知识非常多.首先我们要先了解一下这个项目的知识. 1.京东项目(一) 项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景 ...
前端学习从入门到高级全程记录之39 （PHP基础Ⅱ）
学习目标本期我们将继续学习php的相关知识,在了解了上一期的PHP的一些基本语法和方法,接下来就是实战做做小例子.如果还不会配置php的运行环境的,可以参考我的上一期内容.如果上一期内容看不懂的,可 ...

前端学习从入门到高级全程记录之37（jQuery④）