不知道要写个什么标题,就用这个了.来过我的博客,细心的朋友可能注意到我用上个比较好玩的东西.鼠标悬浮到@someone的时候就能显示他的留言内容.这一特效我最先在Shawn的博客上看到,后来自己学了点jQuery.也整了个.我打算用两篇日志的内容来写个这个特效的实现过程.一是介绍一些jQuery的一些东西.二是,希望大家有个可以消化的时间.最后,不排除要调大家的胃口.哈哈
废话不多说.
首先,我们要对jQuery有一定的了解.这个大家Google一下吧.有点英语基础的直接到官方网站jquery.com看看. The Write Less, Do More, JavaScript Library是jquery的口号.确实如此.以前要写很多的东西,现在只要几句话就可以实现了.
在这里我推荐一些教程.
PDF jQuery 基础教程(Leeiio整理的)我没有找地址了,需要的可以到他的博客搜索下载.免去你花大价钱买书了.此人如此热心为互联网作出了巨大的贡献.哈哈.官方的教程,一些链接.
前沿教室的视频教程,感觉也很不错.迅雷下载速度很快.就是感觉将的有点快了.看得时候要记得做些笔记.要不然看完什么也不记得了.
学习jQuery你还可以准备一个chm的帮助文档,用来速查很方便的.这个网上有很多版本,大同小异.
最后,最好的办法就是看官方的文档.由于是英文的,我看的有点眼晕烦躁.英语真的太重要了.
好了,说了不说废话的,还是废话了.如果你已经知道jQuery是什么东东了,那我们开始.
会通过一些实例来讲解.
分析内容:
首先我们要分析DOM.了解网页的结构.以inove主题为例.每一条留言都包含在li标签里.我们希望实现的功能是当链接有@并且,链接的href总是有#comment-字段.找到了共性!写成代码.这里需要正则表达式. /^#comment-/和/^@/(正则表达式都是写在//之间的).
添加Class:
用addClass即可很容易添加一个class,为什么要添加?应为留言是写在li中段落p中,而我们操作的只是p中带有特定字符的链接.
做一个练习: (Html内容如下:)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script language="javascript"> $().ready(function(){ var A=/^#comment-/; var B=/^@/; if($('.myclass').text().match(B) && $('.myclass a').attr("href").match(A)){ alert('match works'); $('.myclass').addClass("cool"); }; }); </script> </head> <body> <p class="myclass"><a href="#comment-philna">@just for test add class</a> </body> </html> |
通过实例,我们看到p被成功的添加了一个class cool.此时它同时具有了两个class即myclass 和cool.
分析功能实现的办法.
既然是悬浮即可显示,而内容有和原来的一样,怎么做呢?jQuery给我们一个很好的东西clone.克隆一份.还是做个练习.来个实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script language="javascript"> $().ready(function(){ $('.myclass').click(function(){ $(this).clone().insertAfter('.h')});}); </script> <style type="text/css"> </style> </head> <body> <p class="myclass">test clone</p> <p class="h">clone to here</p> </body> </html> |
以上实例,当点击test clone的时候, clone to here的后面会不断出现test clone即myclass的内容被复制了.
好了,到这里我们把核心的两个问题已经解决了.即找到特定的内容和如何使用clone.如果你还没有学会,请回顾上面的两个实例.如果你对click和insertAfter有疑问,请查看文档.
接下来的问题,我放在下一篇日志来写.这里我什么也没有讲.哈哈,只是些基础的东西,写一篇,我会将代码全部解释一遍.到时候你一定也能实现这个小功能.如果你看完这个就茅塞顿开,那太好了.还不赶快去试试?
声明:本站遵循署名-非商业性使用-相同方式共享3.0共享协议. 转载请注明转自 PhilNa ™
汗.
我来抢沙发！！！