转】 《15天学会Jqurey》之第七天--样式表切换

转载自 jiangqincong

最终编辑 jiangqincong

我第一次看到样式表切换器是在A List Apart或者Simple Bits，那是两个设计师最应该去的网站。 从那以后，我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程。 我将向你们逐步解说整个的过程，不仅仅因为要展示jQuery代码的简介，同时也要揭示jQuery库中的若干高级特性。 首先，代码 $(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]').each(function(i) { this.disabled = true; if (this.getAttribute('title') == styleName) this.disabled = false; }); createCookie('style', styleName, 365); } $(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]’).each(function(i) { this.disabled = true; if (this.getAttribute(‘title’) == styleName) this.disabled = false; }); createCookie(’style’, styleName, 365); } 其他这里没有提到的部分是你将在后面看到的创建和读取cookie的函数。 熟悉的开篇 $(document).ready(function() { $('.styleswitch').click(function() 告诉jQuery“以最快的速度查找所有包含对象名‘styleswitch’的元素，并在他们被鼠标点击时执行一个函数”。 看起来不错。当鼠标点击预先指定的元素时，switchStylestyle函数将被调用。从现在开始是重点。 这句话什么意思？ 第一次看到这句代码的时候我的脑子有些卡壳： $('link[@rel*=style]').each(function(i) { 在互联网上搜索了一下后我空手而归。最后不得不找到了jQuery的作者John Resig，向他咨询。 他直接给了我一个jQuery网站的页面地址，里面讲解了若干jQuery提供的高级特性(xpath)，可以用来查找并操作页面中的若干元素。 如果你看过这些东西你就能明白上面那句神秘的代码的含义是告诉jQuery“查找所有带rel属性并且属性值字符串中包含‘style’的link链接元素”。 嗯？ 让我们看看如何编写包含一个主样式表，两个备用样式表的页面： <link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" /> 我们可以看到所有样式表都含有一个包含‘style’字串的rel属性。 所以结果一目了然，jQuery轻松定位了页面中的样式表链接。 下一步？ each()函数将遍历所有这些样式表链接，并执行下一行中的代码： this.disabled = true; if (this.getAttribute('title') == styleName) this.disabled = false; “首先禁用所有的样式表链接，然后开启任何title属性值与switchStylestyle函数传递过来的字串相同的样式表” 一把抓啊，不过很有效。 现在我们需要保证的是那些样式表存在并且有效。 完整代码和演示 既然 Kelvin Luck已经编写了这些代码，我就不在这里重复了。 DEMO 我相信Kelvin的灵感是从 这个网站那里得到的，我们正好可以看看使用其他工具实现这个功能是否要比jQuery