【15天學會jQuery】-----第8天
来源:互联网 发布:程序员客栈官网招聘 编辑:程序博客网 时间:2024/06/05 09:06
我第一次看到样式表切换器是在A List Apart或者Simple Bits,那是两个设计师最应该去的网站。
从那以后,我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程。
我将向你们逐步解说整个的过程,不仅仅因为要展示jQuery代码的简介,同时也要揭示jQuery库中的若干高级特性。
首先,代码
其他这里没有提到的部分是你将在后面看到的创建和读取cookie的函数。
熟悉的开篇
告诉jQuery“以最快的速度查找所有包含对象名‘styleswitch’的元素,并在他们被鼠标点击时执行一个函数”。
看起来不错。当鼠标点击预先指定的元素时,switchStylestyle函数将被调用。从现在开始是重点。
这句话什么意思?
第一次看到这句代码的时候我的脑子有些卡壳:
$('link[@rel*=style]').each(function(i) {
在互联网上搜索了一下后我空手而归。最后不得不找到了jQuery的作者John Resig,向他咨询。
他直接给了我一个jQuery网站的页面地址,里面讲解了若干jQuery提供的高级特性(xpath),可以用来查找并操作页面中的若干元素。
如果你看过这些东西你就能明白上面那句神秘的代码的含义是告诉jQuery“查找所有带rel属性并且属性值字符串中包含‘style’的link链接元素”。
嗯?
让我们看看如何编写包含一个主样式表,两个备用样式表的页面:
我们可以看到所有样式表都含有一个包含‘style’字串的rel属性。
所以结果一目了然,jQuery轻松定位了页面中的样式表链接。
下一步?
each()函数将遍历所有这些样式表链接,并执行下一行中的代码:
“首先禁用所有的样式表链接,然后开启任何title属性值与switchStylestyle函数传递过来的字串相同的样式表”
一把抓啊,不过很有效。
现在我们需要保证的是那些样式表存在并且有效。
完整代码和演示
既然 Kelvin Luck已经编写了这些代码,我就不在这里重复了。
DEMO
我相信Kelvin的灵感是从 这个网站那里得到的,我们正好可以看看使用其他工具实现这个功能是否要比jQuery更加复杂冗长。
- 【15天學會jQuery】-----第8天
- 【15天學會jQuery】-----第15天
- 【15天學會jQuery】-----第1天
- 【15天學會jQuery】-----第2天
- 【15天學會jQuery】-----第3天
- 【15天學會jQuery】-----第4天
- 【15天學會jQuery】-----第5天
- 【15天學會jQuery】-----第6天
- 【15天學會jQuery】-----第7天
- 【15天學會jQuery】-----第9天
- 【15天學會jQuery】-----第10天
- 【15天學會jQuery】-----第11天
- 【15天學會jQuery】-----第12天
- 【15天學會jQuery】-----第13天
- 【15天學會jQuery】-----第14天
- 学习jQuery第2天
- jQuery学习的第2天
- 第41天(就业班) jQuery入门
- 【15天學會jQuery】-----第7天
- 在Windows Live Writer配置CSDN博客
- .net 输出文件到客户端并删除
- 瑞泰lcd
- js鼠标事件大全
- 【15天學會jQuery】-----第8天
- SQLite C Interface - Opening A New Database Connection
- memset 用法详解
- 如何在项目部署的时候自动安装多个应用程序安装包(VC++6.0)
- 整数与字符串的拼接问题的解决
- SQL攻击流程详解及主流防范措施
- 写点什么纪念已逝的N个春秋
- md5 16位加密和32位加密的区别?
- MyEclipse 代码提示卡死之终极优化