Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use the jQuery.cookie.js plug-in to achieve the skin change function", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use the jQuery.cookie.js plug-in to achieve skin change function"!

Let's take a look at how to use cookie.js.

Import first:

And then you can use it.

$.cookie ('the_cookie'); / / read cookie value

$.cookie ('the_cookie','the_value'); / / set the value of cookie

$.cookie ('the_cookie','the_value', {expires:7,path:'/',domain:'example.com',secure:true}); / / create a new cookie. "expires" is the valid number of days, "path" is the save path, "domain" is the domain name of the web page that created cookie, and "secure" is whether the transmission of cookie uses security protocol (HTTPS).

$.cookie ('the_cookie','the_value'); / / create a cookie

$.cookie ('the_cookie',null); / / Delete a cookie

Attach the code:

The use of cookie

.huanFu {

Float:right

}

.huanFuulli {

Width:30px;height:30px

List-style:none

Margin:05px

Float:left

Cursor:pointer

Border:1pxsolid#000

}

.fu1 {background-color:#F00;}

.fu2 {background-color:#0F0;}

.fu3 {background-color:#00F;}

.fu4 {background-color:#FF0;}

.huanFuulli.select {border:3pxsolid#000;margin-top:-3px;}

$(function () {)

$(".huanFuulli") .on ("click", function () {

VarpiFu=$ (this) .attr ("fuName"); / / get the funame value of the selected skin

$("body") .attr ("class", piFu); / / add a class value to the body, that is, add the corresponding background color

$(this) .addClass ("select") .siblings () .removeClass ("select"); / / only the selected li has a large black box selection, and the rest remove the large black box selection effect

$.cookie ("MySkin", piFu, {path:'/',expires:10}); / / create a cookie and save it to the local cookie

})

VarcookieSkin=$.cookie ("MySkin"); / / fetch the saved value from the local cookie

If (cookieSkin) {

$(".huanFuulli [fuName='" + cookieSkin+ "']") .addClass ("select") .siblings () .removeClass ("select"); / / only the selected li is selected with a large black box, and the rest is selected without a large black box.

$("body") .attr ("class", cookieSkin); / / add a class value to the body, that is, add the corresponding background color

} else {

$("body") .attr ("class", "fu1"); / / if the local cookie has no record, the red background is used by default.

}

})

At this point, I believe you have a deeper understanding of "how to use the jQuery.cookie.js plug-in to achieve skin-changing function". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.