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>. 虽然是个序,表示一下我是个菜,但还是来几 ...
随机推荐
- PHP Web Server 实例
通过WebService,我们可以调用部署在其它地方的程序,而不用关心被调用的程序是在什么平台用什么语言编写的.这里我们使用php调用. 在php4时代调用WebService大部分使用的nusoap ...
- echart 折线渐变 加柱形图结合图形，左右纵轴自设置格式，现行图北京渐变 ，x轴字体倾斜
app.title = '折柱混合'; option = { grid: { left: '5%', //距离左边的距离 right: '5%', //距离右边的距离 top:'8%', bottom ...
- JavaScript基础8——弹窗案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- h5与app交互
现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...
- Java JNA （五）—— 释放Memory对象分配的内存
Java进程的内存包括Java NonHeap空间.Java Heap空间和Native Heap空间. JNA中的Memory对象是从Native Heap中分配空间.但java的GC是针对Java ...
- PayPal支付对接
开发时间:2019-04-30 我的目标:在我们公司的海外网站上,接入PayPal支付,美国用户在线完成付款. 准备: (1)准备:公司注册信息(执照,注册号,法人等),法人信息(身份证,住址等) ( ...
- Jenkins构建触发器（定时构建项目）
如上图所示,Jenkins通常通过点击“立即构建”来进行手动构建项目,其实也可以使用配置中的 Poll SCM和Build periodically来进行定时自动构建项目: 在“配置”——>“构 ...
- [apache] apache配置文件中的deny和allow
allow 和Deny可以用于apache的conf文件或者.htaccess文件中(配合Directory, Location, Files等),用来控制目录和文件的访问授权. 例如: <Di ...
- 在flask服务里面执行adb 安装命令
今天讲的是我在flask服务里执行adb install 命令,被坑了一天 需求是我们的安卓打包机器和我们的自动化机器不是同一台,管理人也不一样,想让每次打包后能通知到我们的服务器,然后执行后续的操作 ...
- LeetCode--053--最大子序和(java)
给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4], 输出: 6 解释: 连续子数组 ...