JQuery website skinning function implementation code

JQuery website skinning function implementation code_jquery

WBOY

Release： 2016-05-16 18:42:40

Original

1468 people have browsed it

Since then, I've found many ways to let visitors toggle stylesheets by clicking somewhere with their mouse. But recently I want to write a tutorial on how to write simple code using jQuery to implement it.
I will walk you through the entire process step by step, not only because I want to show you an introduction to jQuery code, but also to reveal some of the advanced features in the jQuery library.
First, the code

Copy the code The code is as follows:

 
$(document).ready (function() { 
$('.styleswitch').click(function() 
{ 
switchStylestyle(this.getAttribute("rel")); 
return false; 
} ); 
var c = readCookie('style'); 
if (c) switchStylestyle(c); 
}); 
function switchStylestyle(styleName) 
{ 
$( 'link[@rel*=style][title]').each(function(i) 
{ 
this.disabled = true; 
if (this.getAttribute('title') == styleName ) this.disabled = false; 
}); 
createCookie('style', styleName, 365); 
} 

The other part not mentioned here is that you will The functions that create and read cookies are seen later.
Familiar opening

$(document).ready(function(){ $('.styleswitch').click(function()... tells jQuery "Find all containing objects as quickly as possible" element named 'styleswitch' and execute a function when they are clicked by the mouse.
Looks good. When the mouse clicks on the pre-specified element, the switchStylestyle function will be called. From now on that is the focus.
What does this sentence mean?
My mind was a little stuck when I saw this code for the first time:
$('link[@rel*=style]').each(function(i) {
After searching on the Internet, I came up empty-handed. Finally, I had to find John Resig, the author of jQuery, and consult him.
He directly gave me the page address of the jQuery website, which explained several jQuery features. The advanced features (xpath) can be used to find and manipulate several elements in the page.
If you have seen these things, you will understand that the meaning of the mysterious code above is to tell jQuery to "find all elements with rel attributes and A link element whose attribute value string contains 'style'".
Let's see how to write a page that contains one main style sheet and two backup style sheets:
We can Seeing that all style sheets contain a rel attribute containing the 'style' string, the result is clear at a glance.
What is the next step? Iterate through all these stylesheet links and execute the code in the next line:
this.disabled = true;if (this.getAttribute('title') == styleName) this.disabled = false;"Disable all styles first table link, and then open any style sheet whose title attribute value is the same as the string passed by the switchStylestyle function."
It’s a handful, but it’s very effective.
Now all we need to ensure is that those stylesheets exist and are valid.
Full code and demo
Since Kelvin Luck has already written this code, I won’t repeat it here.
DEMO
I believe Kelvin got his inspiration from this website, and we can just see if using other tools to implement this function is more complicated and verbose than jQuery.
Complete styleswitch.js

Copy code The code is as follows:

 
/**
* Styleswitch stylesheet switcher built on jQuery 
* Under an Attribution, Share Alike License 
* By Kelvin Luck ( http://www.kelvinluck.com/ ) 
**/ 
(function($) 
{ 
$(document).ready(function() { 
$('.styleswitch').click(function() 
{ 
switchStylestyle(this.getAttribute("rel")); 
return false; 
}); 
var c = readCookie('style'); 
if (c) switchStylestyle(c); 
}); 
function switchStylestyle(styleName) 
{ 
$('link[@rel*=style][title]').each(function(i) 
{ 
this.disabled = true; 
if (this.getAttribute('title') == styleName) this.disabled = false; 
}); 
createCookie('style', styleName, 365); 
} 
})(jQuery); 
// cookie functions http://www.quirksmode.org/js/cookies.html 
function createCookie(name,value,days) 
{ 
if (days) 
{ 
var date = new Date(); 
date.setTime(date.getTime() (days*24*60*60*1000)); 
var expires = "; expires=" date.toGMTString(); 
} 
else var expires = ""; 
document.cookie = name "=" value expires "; path=/"; 
} 
function readCookie(name) 
{ 
var nameEQ = name   "="; 
var ca = document.cookie.split(';'); 
for(var i=0;i < ca.length;i  ) 
{ 
var c = ca[i]; 
while (c.charAt(0)==' ') c = c.substring(1,c.length); 
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
} 
return null; 
} 
function eraseCookie(name) 
{ 
createCookie(name,"",-1); 
} 
// /cookie functions 