jQuery基础--插件
1. 插件
1.1. 常用插件
插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
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>
1.1.3. jquery.ui.js插件
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
基本使用:
2. 1. 引入jQueryUI的样式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能
使用jquery.ui.js实现新闻模块的案例
<!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() {};
prototype
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script src="jquery-1.12.4.js"></script>
<script> //var arr = new Array();
//console.log(arr); //给数组的原型增加了一个方法，sayHi的方法
// Array.prototype.sayHi = function () {
// console.log("呵呵");
// }
//
//
//
// var arr = new Array();
//
// arr.sayHi(); //jquery插件的实质，就是给jquery的原型上增加方法。 //$.fn ==== jQuery.prototype
$.fn.sayHi = function () {
console.log("呵呵");
} $(document).sayHi(); </script> </body>
</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>
<!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>
制作手风琴插件
？？？
jQuery基础--插件的更多相关文章
- 【jQuery基础学习】08 编写自定义jQuery插件
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件
1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...
- 【jQuery基础学习】07 jQuery表单插件-Form
作用:jQuery Form插件的作用是为了让我们可以很方便地用ajax的方式提交表单,从而使我们提交表单的时候页面不用进行刷新. 它的核心方法是ajaxForm()和ajaxSubmit() 升级表 ...
- jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({o ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
随机推荐
- SCUT - 106 - 花式ac - 主席树/启发式合并Treap
https://scut.online/p/106 错在这组样例,发现是离散化之后,对k访问的时候也是应该访问离散化之后的k. 12 4 1 1 2 2 5 5 4 4 3 3 2 1 1 3 3 5 ...
- 模块管理常规功能自己定义系统的设计与实现(15--进一步完好"省份"模块)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jfok/article/details/24737483 "省份"模块的进一步完 ...
- 【JAVA】增强for循环for(int a : arr)
介绍 这种有冒号的for循环叫做foreach循环,foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach语句是for语句的特殊简 ...
- nodejs回调大坑
最近看到nodejs,因为有一个处理里面有好几个异步操作,调入回调大坑,不禁觉得很恶心,真的很讨厌发明这种写法的人,简直反社会!!!遂转载一篇解坑的文章,原文地址:http://www.infoq.c ...
- adb 链接网络 connect 安装apk install 断开IP链接 kill-server 连接数devices
https://blog.csdn.net/zhonglunshun/article/details/78362439 ./adb connetc 192.168.1.11 ./adb install ...
- Uedit32_17.00 修改某一语言背景色-修改后续名后语法着色及某语言的大括号{}对齐
修改UE的背景色:高级-配置-编辑器显示-其它-设置颜色 新增扩展名语法着色:如以tpl为后缀的html代码格式着色高级-配置-编辑器显示-语法着色-语言选言[选中要着色的语言html]-打开-在'F ...
- 【记录】Git pull(拉取)，push(上传)命令整理（详细）
前言:博主最近在学习git命令,因为git是一个非常好用的分布式版本管理工具,功能比svn强大,与SVN不同点是Git去中心化,每一个分支都是一个中心,并且支持本地仓库存储,像如今很多大公司都用git ...
- 如何启用Nginx的status功能,查看服务器状态信息?
如何查看服务器状态信息? 我们可以通过安装Nginx的功能模块,并修改Nginx的主配置文件来实现. 1.编译安装时使用--with-http_stub_status_module开启状态页面模块 [ ...
- bootstrap-table使用stickyHeader固定表头时，表头不跟随表体水平滚动问题解决
解决方法: onAll: function () { // 修复stickyHeader表头不跟随表体水平滚动的问题 if (params.stickyHeader) { var fixedTable ...
- ltp-ddt 加入sram 需要修改的部分
./platform/fmxx-psoc-db add sram 将nor部分移植过来 # @name NOR read write test using dd # @desc Perform NOR ...