day 32 jQuery插件
Posted shasha
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了day 32 jQuery插件相关的知识，希望对你有一定的参考价值。
1. jQuery.extend() 和jQuery.fn.extend()
官方给出的解释：
- jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个文档中)；
- jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法)
(1) jQuery.extend()
方法1：extend()
- 为$添加方法
这个扩展也就是所谓的静态方法, 只跟这个 类 本身有关。跟你具体的实例化对象是没关系的。
(回顾： 类方法是通过类名来直接调用，如Array.from Math.floor())
$.extend({
//需要添加的插件(函数)
});举例：
$.extend({
// 需要添加的插件(函数)
fun: function(){
console.log("haha");
}
});
//这里$符号模拟的就是类名，等价于类方法
$.fun();//haha案例： 给$添加一个计算器插件
<script type="text/javascript">
// 计算器插件添加给$
$.extend({
calc: function(a, b, opt) {
switch (opt) {
case "+":
return a + b;
case "-":
return a - b;
case "*":
return a * b;
case "/":
return a / b;
}
}
});
console.log($.calc(1, 2, "+"));//3
console.log($.calc(1, 2, "-"));//-1
console.log($.calc(1, 2, "*"));//2
console.log($.calc(1, 2, "/"));//0.5
</script>方法2：添加一个新的全局函数
$.fun1 = function(){
console.log(\'xixi\');
}
$.fun1();//xixi方法3：使用命名空间
$.myNameSpace = {
fun:function(){
console.log("heihei");
}
}
$.myNameSpace.fun();//heihei(2) jQuery.fn.extend()
- 为jQueryDom对象添加方法
- 大部分插件都是用jQuery.fn.extend()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="">
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<script src="jQuery.js"></script>
<script type="text/javascript">
// 为jQueryDom对象添加方法
$.fn.extend({
change: function(w, h, color) {
$(this).css({
width: w,
height: h,
backgroundColor: color
});
}
});
$("div").change(100, 100, "pink");
$("li").eq(1).change(50, 50, "pink");
</script>案例： jQuery版弹出框
（注意：jQuery不支持ES6的语法）
(3) 两者区别总结
两者调用方式不同:
- jQuery.extend(),一般由传入的全局函数来调用，主要是用来拓展全局函数，如$.init()，$.ajax();
- jQuery.fn.extend(),一般由具体的实例对象来调用，可以用来拓展选择器，例如$.fn.each();
两者的主要功能作用不同:
- jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。
- jQuery.fn.extend(object); 给jQuery对象添加方法
2. 引入第三方插件
使用第三方插件的精髓：求Demo
jquery之cookie操作：
首先: jQuery cookie插件下载
- 下载与引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js。
- 下载：http://plugins.jquery.com/coo...
1) 添加一个会话cookie
$.cookie(\'the_cookie\', \'the_value\');
//例如：
$.cookie("name","xiaoming");2）创建一个cookie并设置有效时间为 7天
这里指明了cookie有效时间，所创建的cookie被称为“持久cookie（persistent cookie）”。注意单位是：天；
$.cookie(\'the_cookie\', \'the_value\', { expires: 7 });
//例如：
$.cookie("age",18,{expires: 7});3）读取cookie
$.cookie(\'the_cookie\');
//例如：
$.cookie("name");4）删除cookie
$.cookie(\'the_cookie\', null, -1); //通过传递null作为cookie的值即可
//例如：
$.cookie("age",null,-1);以上是关于day 32 jQuery插件的主要内容，如果未能解决你的问题，请参考以下文章