jQuery Trickshots来自Tutorialzine的一本关于100个高级jQuery技术书籍分享

最近看到一篇写的不错的文章,来自jQuery中的100个技巧.首先感谢作者辛苦翻译.

不过我也想找原文…于是也是辛苦了很久才找到了这篇伟大的文章出处,更难能可贵的是该站竟然有多个版本的电子书,开放免费.当然是需要注册的,我注册了一个,下载了与大家分享.

这个压缩包包含了全部html,js实例源码,还有多个版本的电子版(pdf,mobi,epub),满足了用电脑,手机或者kindle的用户简直太棒了!!!迫不及待放出分享连接了.以下是分享地址

百度网盘: 英文原版下载页面(以及鸟语版,不懂鸟语的不要下)

如果不能下载了请与发邮件

最后再次感谢伟大的

作者:Tutorialzine

来源:http://tutorialzine.com/books/jquery-trickshots/

介绍:

In this book, you will find 100 advanced jQuery techniques that we have developed over the years as JavaScript programmers and authors for Tutorialzine, presented as easy to understand tips.

带进度条(时间轴)的焦点图切换特效(jQuery)

首先恶搞一下,电脑性能不佳者误入(其实我本来想用jsFiddle展示的,因为调用外部的速度太慢了.所以还是传到服务器给大家看).点击查看”高速幻灯片“…好了,来说说正常点的.先看正常效果.

http://jsfiddle.net/kingterrors/xGvkK/embedded/result,html,css,js/

看完效果,代码什么的自己研究一下.当然这个效果部分是我写的,另外一部分是参考的网上的几个demo,以前收集的,也分享给大家:

继续阅读带进度条(时间轴)的焦点图切换特效(jQuery)

wumii相关文章插件样式暴力修改

话说无觅的一个相关文章的插件好像的确能够带来很多流量,如此来说不愧是个好插件,但是,这个插件内置到了PHPCMS的show.html模板中后,那效果简直惨不忍睹,我经过大量研究测试修改,终于让这个插件展示效果变得美观,而这种通过js修改的方式是不是很友好的,先来看看效果图:

wumii插件修改效果预览
wumii插件修改效果预览

继续阅读wumii相关文章插件样式暴力修改

利用jQuery点击显示更多元素演示代码

上次说了一个phpcms单页面模板不能用翻页的问题.之后居然发现全系列IE不兼容.之后,一块一块进行排查找出来了.还做了个小demo,这里为了让大家看得更加清楚.我将这个demo分享出来,当然目前情况下来看,IE6,IE7是无法兼容的.代码效果如下:

http://jsfiddle.net/kingterrors/VXQ9d/embedded/result,html,css/

继续阅读利用jQuery点击显示更多元素演示代码

phpcms单页面模板获取栏目数据翻页无效解决办法

不得不说有时候为了做一些很奇特的页面,或者说为了解决一些很蛋疼的功能,我们不得不做一些不正常的工作…比如,我把PHPCMS的单页面模板做成了一个读取某个限定条件类的文章列表.限定条件的字段已经添加到数据库内.编辑器中只要选中它属于哪一类即可,这里不多说.

发表相关思路之前先给大家看看效果,觉得还不错的,那么你可以继续看看 :lol:

PHPCMS单页面模板列表作弊
PHPCMS单页面模板列表作弊

那么既然是单页面模板,它就有个问题,这个问题就是,单页面模板内是不能使用翻页的功能的.起初我是不知道的,找了一些资料也没解决.那么我就只有想别的办法了.经过一番思索,我认为,可以仿照腾讯微博看到页面底部,自动无限刷新.那么代码的思路就是:

打开该页面获取指定数目的数据(比如20条) > 跟踪坐标当用户拖到页面底部触发事件(js) > 自动生成一段新的异步获取数据下一批数据的代码并更新当前坐标重新计算 > 循环.

继续阅读phpcms单页面模板获取栏目数据翻页无效解决办法

列表中最后一个元素样式清除修改方法(jQuery)

我们在做动态网站的时候,当遇到导航条的栏目列表或某区域内文章列表等含有大量重复内容区域时,通常会用循环将他们输出,而他们节点的样式都是相同的,比如下边距,外边框的分隔样式,通过循环输出的结果就是最后一个节点依然保留着所有的样式我们是不希望他有下边距或者外边框.

例如: 导航上每个栏目标题(li)右侧可能会用竖线分隔每个栏目标题,于是最后一个栏目右侧也出现了不想要的竖线,但是这些同级的li都是循环出来的 ,我们无法单独给最后一个元素添加特殊的样式,本来有个很简单的方法,那就是使用CSS3的:first和:last选择器,但是当IE6和IE7不支持:first和:last选择器的,有个简单的方法,通过Js(本文用的jQuery)去除或修改列表或循环内容的第一个和最后一个节点的样式,可以兼容所有浏览器,是比较方便的,其实用js可以轻松实现,但是我后来发现,jQuery来处理或许更加轻松些,也是正好我最近在学习jQuery,的确很好用.在body内最后加上一小段就可以了,比如下面这个简单的例子:

<!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>LastChildStyleRemove</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#mainContent {background-color:#eee;}
#mainContent ul.nav {list-style:none;font-size:12px;}
#mainContent ul.nav li {float:left;padding:5px 15px;border-left:1px solid #fff;border-right:1px solid #ddd;}
#mainContent ul.nav li a {color:#666;text-decoration:none;}
</style>
</head>
<body>
	<div id="mainContent">
		<ul class="nav">
			<li><a href="#">导航一</a></li>
			<li><a href="#">导航二</a></li>
			<li><a href="#">导航三</a></li>
			<li><a href="#">导航四</a></li>
		</ul>
		<div style="clear:both;"></div>
	</div>
</body>
<script>
	$("#mainContent ul.nav li:first-child").css("border-left", "none")
	$("#mainContent ul.nav li:last-child").css("border-right", "none")
</script>
</html>

这个例子除了用到最后一个元素样式清除,也用了首个元素样式清除,这个很好理解,这是两个方法,其实只用到一个函数css( propertyName , value  ),而关于元素选择器可以查看jQuery的例子::first-child Selector:last-child Selector.上面的例子也很简单清晰易懂…

当然我也在网上看到有这样的javascript写法,不过相对较为复杂,内容如下:

<script language="javascript" type="text/javascript">
  function addClassName(tag,classname){
   if(!tag.className){
    tag.className=classname;
   }else{
    tag.className+=" "+classname;
   }
  }

  function addFirstChild(){
   var olitems=document.getElementsByTagName("ol");
   var ulitems=document.getElementsByTagName("ul");

   for(var i=0;i<olitems.length;i++){
    addClassName(olitems[i].getElementsByTagName("li")["0"],"first-child");
   }
   for(var i=0;i<ulitems.length;i++){
    addClassName(ulitems[i].getElementsByTagName("li")["0"],"first-child");
   }
  }
  function addLastChild(){
   var olitems=document.getElementsByTagName("ol");
   var ulitems=document.getElementsByTagName("ul");

   for(var i=0;i<olitems.length;i++){
    addClassName(olitems[i].getElementsByTagName("li")[olitems[i].children.length-1],"last-child");
   }
   for(var i=0;i<ulitems.length;i++){
    addClassName(ulitems[i].getElementsByTagName("li")[ulitems[i].children.length-1],"last-child");
   }
  }

  if(document.all && !window.opera){
   window.onload=addFirstChild;
   window.onload=addLastChild;
  }
 </script>

如果有兴趣可以尝试,至此,大家也发现实际上用jQuery并不困难,用好就有讲究了,不过最好还是打好js的基础,下次我将介绍另外一个简单的效果,关于用jQuery控制下拉菜单悬浮,我用了一个很笨的嵌套方法,有空我在写一下.今天就写到这里希望大家能有所收获.


PS: 其实这个例子就是简单介绍了jQuery的两个用法,如果动态脚本支持判断首尾元素的话,其实直接在HTML内写个判断(例如:phpcms文章列表循环不同样式制作方法),给首尾元素加个class=”first-tag”和class=”last-tag”之类的样式也是不错的选择,实际上现在已经不推荐这样的写法,因为你会发现有很多冗余的小代码,维护十分不方便,这里也就是举一反三,大家视情况来写吧( update: 2014年5月17日 )