jQuery操作cookie 的方法-jQuery Deferred-使用jquery实现图文切换效果

当前位置: 编程技术>WEB前端

本页文章导读:

▪jQuery操作cookie 的方法转载于：http://blog.163.com/lih_dodo@126/blog/static/30551823201111411926425/jQuery cookie是个很好的cookie插件，大概的使用方法如下example $.cookie(’name’, ‘value’); 设置cookie的值，把name变量的值.........

▪jQuery Deferred Deferred是jQuery中对CommonJS的异步模型实现，旨在提供通用的接口，简化异步编程难度。其实一个可链式操作的对象，提供多个回调函数的注册，以及回调列队的回调，并转达任何异步操作成功.........

▪使用jquery实现图文切换效果前端开发过程中需要不断学习，不断温习。最近计划白天继续温习jquery，晚上学习下原生javascript，然后利用一些时间做做网站推广SEO来着。计划暂时这些。白天活干完，弄个jquery仿凡客.........

[1]jQuery操作cookie 的方法

来源: 发布时间: 2013-11-06

转载于：http://blog.163.com/lih_dodo@126/blog/static/30551823201111411926425/

jQuery cookie是个很好的cookie插件，大概的使用方法如下

example $.cookie(’name’, ‘value’); 设置cookie的值，把name变量的值设为value

example $.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true}); 新建一个cookie 包括有效期路径域名等

example $.cookie(’name’, ‘value’); 新建cookie

example $.cookie(’name’, null); 删除一个cookie

var account= $.cookie('name'); 取一个cookie(name)值给myvar

代码如下

1 // JavaScript Document
2 jQuery.cookie = function(name, value, options) {
3 if (typeof value != 'undefined') { // name and value given, set cookie
4 options = options || {};
5 if (value === null) {
6 value = '';
7 options.expires = -1;
8 }
9 var expires = '';
10 if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
11 var date;
12 if (typeof options.expires == 'number') {
13 date = new Date();
14 // date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));//单位太大，换一个。
15 date.setTime(date.getTime() + (options.expires * 60 * 60 * 1000));
16 } else {
17 date = options.expires;
18 }
19 expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
20 }
21 var path = options.path ? '; path=' + options.path : '';
22 var domain = options.domain ? '; domain=' + options.domain : '';
23 var secure = options.secure ? '; secure' : '';
24 document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
25 } else { // only name given, get cookie
26 var cookieValue = null;
27 if (document.cookie && document.cookie != '') {
28 var cookies = document.cookie.split(';');
29 for (var i = 0; i < cookies.length; i++) {
30 var cookie = jQuery.trim(cookies[i]);
31 // Does this cookie string begin with the name we want?
32 if (cookie.substring(0, name.length + 1) == (name + '=')) {
33 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
34 break;
35 }
36 }
37 }
38 return cookieValue;
39 }
40 };

本文链接

[2]jQuery Deferred

来源: 发布时间: 2013-11-06

Deferred是jQuery中对CommonJS的异步模型实现，旨在提供通用的接口，简化异步编程难度。

其实一个可链式操作的对象，提供多个回调函数的注册，以及回调列队的回调，并转达任何异步操作成功或失败的消息。

由于其对jQuery Callbacks的依赖性，如果没有概念的朋友可以查看jQuery Callbacks。

jQuery.Deferred( [beforeStart ] )

创建一个Deferred对象。

beforeStart：

类型: Function( Deferred deferred )

一个在构造函数返回前运行的处理函数。

resolve、reject、notify

Defferred中定义了三种动作，resolve（解决）、reject（拒绝）、notify（通知），对应Callbacks对象的fire动作。

进而又提供了可以定义运行时的this对象的fire，即fireWith，所以又有扩展了三个对应的操作resolveWith、rejectWith、notifyWith。

内部对应的事件分别是：done（操作完成）、fail（操作失败）、progress（操作进行中），也就是Callbacks对象的add方法添加监听。

举个简单的例子，我们可以通过deferred.done注册上一个动作完成后的，那么当有地方触发了deferred.resolve或者deferred.resolveWith（这两个方法的差别在于能不能定义回调函数的this对象）时，则回调注册的函数。

其他对应的也是一样的。

代码上大概是这样的：

var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd){
var tasks = function(){
alert("执行完毕！");
dtd.resolve(); // 改变deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd;
};

这样我们就有了一个5000ms延迟的wait函数。于是我们就可以这么调用：

wait(dtd).done(function(){ alert("成功了！"); })
.fail(function(){ alert("出错啦！"); });

then

then方法提供了三种事件的注册，只要按顺序作为参数传进去就可以了。

then: function( /* fnDone, fnFail, fnProgress */ ) {
//分别对应完成后运行的函数，失败后运行的函数，正在运行过程中运行的函数
var fns = arguments;
//返回一个新的Deferred的promise，then是上一个Deferred运行后才运行的
return jQuery.Deferred(function( newDefer ) {
//分别对不同状态注册函数
jQuery.each( tuples, function( i, tuple ) {
var action = tuple[ 0 ], //取出动作名
fn = jQuery.isFunction( fns[ i ] ) && fns[ i ]; //取出对应回调函数
// 分别对当前的Deferred对象注册回调函数，也就是注册deferred[ done | fail | progress ]
deferred[ tuple[1] ](function() {
var returned = fn && fn.apply( this, arguments );
//如果传进来的回调函数会返回Deferred对象则在该对象上注册事件
if ( returned && jQuery.isFunction( returned.promise ) ) {
returned.promise()
.done( newDefer.resolve )
.fail( newDefer.reject )
.progress( newDefer.notify );
//否则对创建出来的newDefer执行对应事件
} else {
//如果上一个函数有返回值则接受传返回值，否则传上一个Deferred传来的参数
newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
}
});
});
fns = null;
}).promise();
},

Promise

Promise只提供Deferred对象中的then, done, fail, always, pipe. isResolved, 和isRejected，防止用户自行改变Deferred的状态。

完整的Deferred

jQuery.Deferred = function( func ) {
var tuples = [
// 动作, 监听事件, 回调函数列队, 最终状态
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
state = "pending",
//定义promise对象
promise = {
//返回当前状态
state: function() {
return state;
},
//无论成功还是失败都运行回调函数
always: function() {
deferred.done( arguments ).fail( arguments );
return this;
},
then: function( /* fnDone, fnFail, fnProgress */ ) {

[3]使用jquery实现图文切换效果

来源: 互联网发布时间: 2013-11-06

前端开发过程中需要不断学习，不断温习。最近计划白天继续温习jquery，晚上学习下原生javascript，然后利用一些时间做做网站推广SEO来着。计划暂时这些。
白天活干完，弄个jquery仿凡客诚品图片切换的效果
以前写的不是很好，今天重新做个 jquery特效，其实很简单，漠然回首也就那回事。
先来个原型吧,锋利的jquery第一个例子，相信大家都很熟悉。没错，你绝对没看错。
代码如下

<a href=/blog_article/"">11111111</a> _/li/index.html>

</div>

<a href=/blog_article/"">22222222</a> _/li/index.html>

</div>

<a href=/blog_article/"">33333333</a> _/li/index.html>

</div>

<a href=/blog_article/"">44444444</a> _/li/index.html>