1.操作cookie的插件jquery.cookie.js

添加

$.cookie('the_cookie', 'the_value');

設(shè)置時(shí)長(zhǎng)

$.cookie('the_cookie', 'the_value', { expires: 7 });

設(shè)置路徑

對(duì)于正在學(xué)習(xí)web前端但不知道學(xué)習(xí)路線，不知道學(xué)習(xí)方法，不知道該如何找到工作的朋友，我還是要推薦下我自己建的前端學(xué)習(xí)群：330242580，首先你要是學(xué)前端的，其次不管你是小白還是大牛，小編都挺歡迎，群里每天都會(huì)分享前端相關(guān)干貨，包括我自己（一名工作六年的前端老司機(jī)）最近熬夜花了一星期整理出的一份適合2017年自學(xué)的最新web前端資料，都送給大家，歡迎初學(xué)和進(jìn)階中的小伙伴。

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

讀取

$.cookie('the_cookie'); // cookie存在 => 'the_value'

$.cookie('not_existing'); // cookie不存在 => null

刪除

$.cookie('the_cookie', null);

3.將cookie寫入文件

var COOKIE_NAME = 'username';

if( $.cookie(COOKIE_NAME) ){

$('#username').val( $.cookie(COOKIE_NAME) );

}

$('#check').click(function{

if(this.checked){

$.cookie(COOKIE_NAME, $('#username').val , { path: '/', expires: 10, domain: 'jquery.com', secure: true });

//var date = new Date;

//date.setTime(date.getTime + (3 * 24 * 60 * 60 * 1000)); //三天后的這個(gè)時(shí)候過期

//$.cookie(COOKIE_NAME, $('#username').val, { path: '/', expires: date });

}else{

$.cookie(COOKIE_NAME, null, { path: '/' }); //刪除cookie

}

});

2.wow.js實(shí)用的滾動(dòng)插件

HTML書寫

div class='wow slideInLeft'div

可以加入 data-wow-duration（動(dòng)畫持續(xù)時(shí)間）和 data-wow-delay（動(dòng)畫延遲時(shí)間）屬性，如：

div class='wow slideInLeft' data-wow-duration='2s' data-wow-delay='5s'>div

JavaScript部分

new WOW.init;

播放GIF

如果需要自定義配置，可如下使用：

var wow = new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true

});

wow.init;

3.numscroller.js / countUP數(shù)字滾動(dòng)增加插件

HTML書寫

script type='text/javascript' src='../js/jquery.js'>

div中必須有類 numscroller 和 data-slno data-min data-max data-delay data-increment 等屬性

JS初始化

jQuery(function($) {

$('.timer').countTo({

lastSymbol:' %', //顯示在最后的字符

from: 0, // 開始時(shí)的數(shù)字

speed: 2000, // 總時(shí)間

refreshInterval: 10, // 刷新一次的時(shí)間

beforeSize:0, //小數(shù)點(diǎn)前最小顯示位數(shù)，不足的話用0代替

decimals: 2, // 小數(shù)點(diǎn)后的位數(shù)，小數(shù)做四舍五入

onUpdate: function {

}, // 更新時(shí)回調(diào)函數(shù)

onComplete: function {

for(i inarguments){

console.log(arguments[i]);

}

}

});

});

4.uploadfive.js帶進(jìn)度條文件上傳插件

用法

script src='jquery.min.js' type='text/javascript'>

script src='jquery.uploadifive.min.js' type='text/javascript'>

href='uploadifive.css'>

div>

href='javascript:$('#file_upload').uploadifive('upload')'>Upload Files

$('#file_upload').uploadifive({

'auto' : false,

'checkScript' : 'check-exists.php',

'formData' : {

'timestamp' : '<>php echo $timestamp;?>',

'token' : '<>php echo md5('unique_salt' . $timestamp);?>'

},

'queueID' : 'queue',

'uploadScript' : 'uploadifive.php',

'onUploadComplete' : function(file, data) { console.log(data); }

});

篇幅有限，下面的列舉可以上網(wǎng)查詢

5.video.js視頻插件 + pace.min.js視頻進(jìn)度條插件 + jquery.qrcode.js二維碼生成插件

6.shakejs搖一搖工具插件

7.Bootstrap transition.js 插件--平滑過渡插件

8.event.js監(jiān)控事件觸發(fā)與否插件

9.swiper滾動(dòng)banner插件（兼容移動(dòng)端）

10.jQuery Easy Background Resize / easyBackground.js 背景圖片插件

11.jbooklet.js ---書本真實(shí)翻頁插件

12.parallax.js---3D立體視覺場(chǎng)景動(dòng)畫效果跟隨鼠標(biāo)擺動(dòng)

13.shine.js---文字陰影插件

14.jquery動(dòng)畫文字插件textillate-master / core_plugin / custom_effect

15.Owl Carousel兼容所有瀏覽器的幻燈片插件

16.漂亮的滾動(dòng)條自定義插件--jquery.nicescroll.js

17.支持圖片上傳預(yù)覽的uploadPreview.js插件