前端观察 » jquery

在IE中使用高级CSS3选择器

神飞 — Wed, 20 Jan 2010 11:17:31 +0000

别误会，IE是不支持CSS3高级选择器，包括最新的IE8（详见《CSS选择器的浏览器支持》），但是CSS选择器的确是很有用的，它可以大大的简化我们的工作，提高我们的代码效率，并让我们很方便的制作高可维护性的页面。

然而IE对高级CSS选择器特别是CSS3选择器的支持让我们一直不能将CSS选择器推广应用。不过，虽然我们无法左右浏览器的市场份额，却可以通过一些技术改善我们的工作。我们也可以使用其它的一些技术，让IE可以变相支持CSS3选择器。

一位来自英国的网页开发工程师Keith Clark开发了一个JavaScript方案来使IE支持CSS3选择器。该脚本支持从IE5到IE8的各个版本。

用法

你只需要下载Robert Nyman的DOMAssistant脚本和ie-css3.js并将它们在你的页面的head标签中导入，如下：

<head>
	<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
	<script type="text/javascript" src="ie-css3.js"></script>
</head>

支持的选择器

:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:first-child
:last-child
:only-child
:first-of-type
:last-of-type
:only-of-type
:empty

ie-css3的一些限制

样式表必须通过标签引入。页面级的样式表或者内联的样式表将无效。不过你可以在外部样式文件中使用@import 导入其它样式文件；
样式表文件必须和页面放在同一个域名下面；
使用file://路径的样式文件将由于浏览器的安全问题而不起作用；
:not()选择器尚不支持；
该方法不是动态的，样式被应用之后再改变DOM，将会无效。

如何工作的?

ie-css3.js下载页面的每一个样式文件并解析它的CSS3伪选择器。如果一个选择器被找到，它就会被替换为同名的CSS class。比如： div:nth-child(2) 将会变成 div._iecss-nth-child-2 。然后，Robert Nyman的DOMAssistant用于寻找匹配元素CSS3选择器的DOM节点然后将相应的CSS类添加给它。

最终，元素的样式表会被新的版本替代，然后用CSS3选择器对相应元素添加对应的样式。

避免IE的CSS解释器

根据W3C的规定，一个浏览器应该无视它不认识的CSS规则。这就出现一个问题——我们需要利用样式表文件中的CSS3选择器，但是IE会将它们丢弃。

为了避免这个问题，每一个样式文件都会通过XMLHttpRequest下载。这允许该脚本绕开浏览器内置的CSS解释器并能够读取原始的CSS文件。

替代方案

显然这个也并非完美的方案，对于Ajax网站来说，它基本上是不能用的，因为在生成的样式表被应用之后再改变DOM，就不会有效了。但是事实上我们可以自己来自定义一个ie-css3的。只是没有它这个这么智能。

使用 cssQuery

cssQuery是由业界大牛Dean Edwards开发的一个Javascript组件。它就是为CSS 选择器而生的。它可以支持几乎所有的CSS 选择器，包括CSS3选择器。当然它在实现的时候进行了分级，分别针对CSS1，CSS2和CSS3制作了一个独立的js包，以及一个标准包。支持所有A级浏览器。

简单的用法：

1
2
3

var tags = cssQuery("body > p");
var tags = cssQuery("[href]");
var tags = cssQuery("a[href='#']");

然后你就可以自己写一些js为相应的对象添加想用的样式了。

我建议对支持CSS高级选择器的浏览器使用原生的CSS选择器写法，然后通过cssQuery在IE中动态的为响应的元素添加一个样式名。

比如，我们可以这样写CSS：

a[herf='#'],a.empty{color:red}

这里的第一条CSS3选择器是用于Firefox/webkit等支持CSS3选择器的非IE浏览器的，a.empty是专门为IE而写。然后通过CSSQuery动态的在IE浏览器中为对应的元素添加样式：

1 2	var tags = cssQuery("a[href='#']"); tags.className="empty";

当然，上面的这段js最好使用IE的条件注释。

使用 jQuery

据说jQuery的选择器比cssQuery要快很多。当然，无可否认，jQuery的选择器是目前流行的js框架中最好用的一个。而使用jquery来实现类似上述功能要方便很多，因为jQuery的选择器更好用。

OK，jQuery的做法和cssQuery有些类似，CSS可以写成上面一样的，JS可以这样写：

$("a[href='#']").addClass("empty");

更具体的用法可以查看我之前写的一个小例子《使用jQuery创建个性化链接样式》

使用 DOMAssistant

DOMAssistant也是一个很不错的JS库，它提供了一些类似jQuery的功能，比如CSS 选择器、事件以及一些DOM操作。它的优点就是小巧，压缩后只有9KB，我想这就是Keith Clark选择DOMAssistant来作为ie-css3.js的基础框架的主要原因吧。jQuery越来越肥胖了，而且用于实现这个功能有些浪费了。而且DOMAssistant的用法和jQuery非常类似。

事实上，DOMAssistant的选择器和对DOM的CSS Class的操作与jQuery一模一样。

$("a[href='#']").addClass("empty");

欲了解更多，可查看DOMAssistant官方，以及下载官方中文PDF文档

总结

其实，无论是ie-css3.js本身，还是后来我们讨论的三种替代方法，都是一种方法，就是用js动态的添加class到页面元素中。不同是ie-css3自动化的完成了这些工作，而后面的三种方案要自己动手根据自己的项目写一些js来实现。我认为ie-css3最方便，基本不用怎么维护，但是它一刀切，效率比较低，而且灵活性差，不适合于ajax项目。而后面的这几种方案灵活性强，但是要做很多额外的工作，无论你是将IE专用样式独立到一个专用的css文件中还是像文中写的那样和CSS3选择器写到一起，都会大大的增加你的工作量和维护成本。

为IE，我们要额外付出很多。

有更好的想法或创意吗？欢迎与我们分享。

jquery 1.4 发布

神飞 — Fri, 15 Jan 2010 02:18:08 +0000

时隔一年，jquery在今天正式发布了 1.4版本。事实上，今天也是jquery发布四周年，先祝jquery生日快乐。jquery每年周年的时候都会发布一个新的版本，比如1.3版本是09年1月14号发布的。

OK，言归正传。jquery 1.4其实已经发布了两个alpha版本和一个RC版本，相信关注jquery的同学已经有所了解。

jquery团队为了发布1.4，专门启动了一个 jquery 1.4的网站，计划在14天内逐步揭开jquery1.4的神秘面纱。该网站的内容包括文章和在线视频。

本文就先不简述jquery 1.4带来的新的改进了，在稍后，我们将推出几篇比较好的介绍jquery 1.4的比较详细的文章，敬请期待。

PS:从上面的列表可以看出，jquery1.4胖了很多，当然性能和功能肯定提升了不少。

20多个漂亮的使用jQuery交互的网站设计欣赏

神飞 — Thu, 17 Dec 2009 10:52:58 +0000

jQuery是使用最多的JS库之一，它有很多优点，比如轻量、易用、完善的Ajax、良好的浏览器兼容，以及它有健壮的选择器等。这些优点使得jQuery成为帮助前端开发人员的有力工具。越来越多的大型网站开始使用jQuery及其插件实现其前端交互。

这里，前端观察收集了20多个使用jquery交互的漂亮网站设计，它们不仅交互效果比较酷，界面设计的也很棒，希望能够给你的设计提供某些参考。当然，使用jQuery的优秀的网站并不只这些，如果你知道有很不错的基于jQuery的网站设计，欢迎与我们共享，多谢。

翻页、滑动、lightbox – serialcut.com

滑动、导航 – tearoundapp.com

滑动、导航 – mtvsticky.com

滑动、动画 – worldofmerix.com

滑动、拖拽 – icondock.com

滑动、导航 – directdesign.it

翻页、弹出 – jumpstartforbusiness.co.uk

滑动, Lightbox – 10bestthings.com

滑动 – paramoreredd.com

滑动 – bulletpr.co.uk

滑动、淡出、Ajax、导航 – bestbefore.ro

lightbox、Ajax – www.geochirp.com

滑动、导航 – eyedraw.eu

LightBox、Ajax、拖拽 – rachelbloch.ch

滑动、动画 – marfil.me

动画、提示 – jquerystyle.com

弹出、Ajax、提示 – virtuousquare.fr

滑动、动画 – bonadiesarchitect.com

滑动、热键 – pauljnoble.com

翻页、滑动、lightbox – ormanclark.com

提示、lightbox – tedxbucharest.com

jQuery视觉手册

神飞 — Fri, 25 Sep 2009 03:14:02 +0000

jQuery视觉手册(jQuery Visual Cheat Sheet)是国外知名前端专家Woork制作的对网站设计师和开发人员都灰常有用且实用的参考手册，针对jQuery 1.3。该手册(共6页)包含了全部的附有较详细描述jQuery API参考和部分示例代码。

手册的设计风格简洁，模块化的组织结构可以让你很方便的找到自己想要的内容。

预览：

下载：

从box下载

本视觉手册官方地址为 http://woorkup.com/2010/06/13/jquery-1-4-2-visual-cheat-sheet/ 目前由于某些众所周知的原因，暂时不能访问。另外，如果你发现上面的下载地址无法下载，请通过留言告诉我们，多谢。

PS:update to 1.4.2 @2010-12-20

jQuery文字变色

神飞 — Fri, 14 Aug 2009 14:34:59 +0000

很久很久以前，我翻译了《jQuery 链接变色》，原作者是大名鼎鼎的Mootools和jQuery高手David Walsh，那个链接变色比较优雅一些。今天我要给大家带来一款更酷的文字变色效果。

看一下demo先.

正如你看到的那样，当你将鼠标放到文字上去的时候，文字就会变成五颜六色的。

其实这种效果来自于知名开源微博chyrp，它实现起来也并不难。基本原理是使用charAt()函数将文字打散并逐个设置字体颜色，当然，也要用到jquery的选择器和相关函数。

定义色彩数组先，这里定义了7个，当然可以定义更多。

var colors = ["#ff2e99", "#ff8a2d", "#ffe12a", "#caff2a", "#1fb5ff", "#5931ff", "#b848ff"]

核心函数:

function colorize(text) {
    var colorized = ""
    var bracket_color = ""
    for (i = 0; i < text.length; i++) {
        var index = Math.floor(Math.random()*7)
        if (text[i] == "(")
            bracket_color = colors[index]
            color = (bracket_color.length && (text[i] == "(" || text[i] == ")")) ? bracket_color : colors[index]//取色
    		colorized = colorized + '+color+' !important">' + text.charAt(i) + '' //重构
		}
    return colorized
}

最后，使用jquery选择器将colorize()函数应用到相关对象上：

 $(".colorize").bind("mouseenter", function(){
        $(this).data("text", $(this).text());
		$(this).html(colorize($(this).text()));
	}).bind("mouseleave", function(){
		$(this).html($(this).data("text"));
	});

这里使用了jquery的bind()函数绑定了两个事件：mouseenter和mouseleave，其实这样稍有些麻烦，我们可以简化一些，换做hover()：

$(".colorize2").hover(
	function(){
		$(this).data("text", $(this).text());
		$(this).html(colorize($(this).text()));
		},
	function(){
		$(this).html($(this).data("text"));
});

当然，这个效果，并不是只能用于链接，只要是内容为文字的元素，都可以使用这个效果。想必这个对一般的高手，都不难吧，大家有没有更好的方法或者在其他框架上实现？请通过评论与我们分享吧！

15个最佳jQuery幻灯插件和教程

神飞 — Mon, 10 Aug 2009 15:30:55 +0000

原文：15个最佳jQuery幻灯插件和教程
译自： 15 Best Examples of Free jQuery Content Sliders
版权所有，转载请注明出处，多谢！！

官方网站 | 演示

13. 一个简约的jQuery插件

官方网站 | 演示

WebDesignBooth的一个教程，介绍如何使用强大的jQuery库创建简单的内容幻灯效果。

神飞 — Sat, 06 Jun 2009 05:32:21 +0000

jquery是一个非常容易使用，同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程。

插件

LavaLamp

相信很多人都见过这个很酷的菜单插件，也有很多网站成功的应用了这个插件。

插件主页

jquery Kwicks 插件

如果你多Mootools有些了解，或许会注意到Mootools上一版主页的一个滑动菜单效果(现在已经看不到了)。这个插件就是来自于这个效果，很酷，也很容易定制。使用这个插件不仅仅可以制作非常个性的菜单，制作某些步骤演示也非常合适——比如购物流程的演示。插件主页

查看演示 | 下载

仿Mac的停靠菜单插件

这是个仿苹果机的停靠菜单的一个jQuery插件，支持水平和竖直两种。查看插件页面。

查看演示 | 下载

jquery滑动菜单

一个和LavaLamp很像的菜单，而且脚本只有不到1kb(lavalamp也是这么小)，也比较容易使用。该菜单的原理是，通过在当前ul元素的下面(或者说”后面”更合适些？)添加一个额外的div，用position定位该div。然后用jquery和插件来控制这个div的大小和位置，并实现动画效果。

这是一个教程，作者结合了上面提到的CSS Sprites2教程，结合jquery 背景动画插件来实现的一个效果。这个效果很不错，很酷。查看教程。

查看演示 | 下载

使用jQuery创建个性化链接样式

神飞 — Mon, 01 Jun 2009 13:41:49 +0000

在上一篇《使用CSS选择器创建个性化链接样式》中，我们使用css的选择器标签来实现相关功能。但是css 选择器虽然被绝大部分浏览器支持，但是不被该死的IE6支持，那么怎么办呢？是的，我们可以通过jQuery来实现。

还是看一下演示，点击图片可打开演示页面。

你可以看到，使用jQuery实现的样式和使用css选择器实现的一模一样，而且它在IE6中被支持。

原理是很简单的——通过jQuery的选择器来匹配相关条件，然后动态为该链接添加一个class。比如，jQuery匹配到mailto类型的链接，然后我们在该链接上添加一个mailto的class。

jQuery的属性选择器和CSS的基本一致，用法也很类似：

1	$("a[href^='mailto']").addClass("mailto");

这里就不再多介绍jQuery的属性选择器了，如果你还不了解，可以查看jQuery官方参考文档。

样式方面，我们只需将原来的选择器语法改为class就OK了。

最终的样式：

a {
background:url(a.gif) no-repeat right 4px;
padding-right:18px;color:#369;line-height:24px;
}
a.mailto{background-position:right -242px;}
a.doc{background-position:right -161px}
a.xls{background-position:right -282px}
a.pdf{background-position:right -79px}
a.mp3{background-position:right -204px}
a.swf{background-position:right -120px}
a.rar{background-position:right -38px}
a.home{background-position:right -328px}

最终的js脚本：

<script type="text/javascript" src="jquery.js">script>
<script>
  $(document).ready(function(){
    $("a[href^='mailto']").addClass("mailto");
	$("a[href$='.doc']").addClass("doc");
	$("a[href$='.mp3']").addClass("mp3");
	$("a[href$='.swf']").addClass("swf");
	$("a[href$='.rar']").addClass("rar");
	$("a[href$='.pdf']").addClass("pdf");
	$("a[href$='.xls']").addClass("xls");
	$("a[href*='qianduan.net']").addClass("home");
  });
script>

HTML代码不需要做什么改动。看看演示。

看电影时请关灯——一个很酷的页面效果

神飞 — Sat, 23 May 2009 19:11:10 +0000

YouTube 上的一些视频有个很酷的功能叫做”关灯”(Turn the lights down)。基本上来说，当你关灯，整个页面全部变黑，就像在电影院的效果一样。本教程将向你展示如何使用jQuery实现这个效果。

查看演示下载源文件

问题

正如你在演示页面看到的那样，这个实例的结构是很简单的 – 它只包括头部、视频、“关灯”链接和侧栏。在下面的代码中你将看到包含了开关转换链接的“command”层，包含视频的”movie”层以及实现侧栏的”description”层：

<div id="container">
	<div id="header">
		<h1>前端观察</h1>
		<h2>看电影时请关灯- 演示</h2>
		<div id="command"> <a class="lightSwitcher" href="#">关灯</a> </div>
	</div>
	<div id="movie">
		<object width="420" height="363">
		<param name="movie" value="http://www.tudou.com/v/kccxrpqN16w" />
		<param name="allowFullScreen" value="true" />
		<param name="allowscriptaccess" value="always" />
		src="http://www.tudou.com/v/kccxrpqN16w" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="420" height="363"></embed>
	</object>
	</div>
	<div id="description">
		<p>一些描述或其它内容</p>
	</div>
</div>

CSS代码也很简单:

body{font:13px "微软雅黑", Arial, Sans-Serif;	text-align:center;margin:0;position:relative;}
#container { width:960px; margin:0px auto; text-align:left; overflow:hidden;}
#movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;}
#description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;}
.lightSwitcher {background:url(light_bulb.png) no-repeat 0 0; padding: 0;text-indent:20px; outline:none; text-decoration:none;}
.lightSwitcher:hover {text-decoration:underline;}

让我们开始吧

当点击”关灯” 按钮时，我们需要将整个页面变黑——当然除了视频。这可以通过一个有半透明黑色背景的div来实现。这个div需要在它的相对定位（通常就是body）的容器内使用绝对定位，而且需要覆盖整个窗口——从左上角到右下角。

这样我们就需要在页面的最底部添加这个额外的div：

<div id="shadow"></div>

这个shadow层的样式可以这样写:

1	#shadow {background:#000;position:absolute;left:0;top:0;width:100%;z-index:100;opacity:0.80;filter: alpha(opacity = 80);zoom:1;}

这里最重要的是z-index. 为了让它覆盖到整个页面的上面，它需要最大的z-index。但是，不管怎么样，这个嵌入的Flash元素（视频代码）将是不会被覆盖的。将一个div定位到顶部并将其设置为100%宽度是非常简单的，但是高度怎么办呢？如果我们将这个半透明层的高度设置为100%，那么它将只有与文档高度相同的高度——如果内容比较少或屏幕比较高，内容没有完全填充整个窗口，这个半透明的层将不能将整个页面盖住，或者，如果内容过多而出现滚动条，滚动下来的内容也将不会被盖住。

让我们用jQuery来搞定：

1
2
3

 $(document).ready(function(){
	$("#shadow").css("height", $(document).height()).hide();
});

该语句将该页面的真实高度赋值到#shadow上，并将其隐藏（当然你也可以将.hide()去掉，并在样式表里面将#shadow设置display:none）。

请注意：视频的属性设置不可以有设置，否则，在IE6中，视频也将会被覆盖。——神飞注。

我们只希望当lightSwitcher层被点击的时候，shadow层才会显示，这样我们就需要一个点击处理程序来控制lightSwitcher：

1
2
3

 $(".lightSwitcher").click(function(){
	$("#shadow").toggle();
});

如果你现在就运行这个页面，你会发现它已经OK了。LightSwitcher 将会切换shadow 层为可视的——“灯已经关了”。唯一的不足是点击链接本身也在“黑暗中”，而且你将不能再次点击该链接了。

解决方法也是很简单的。LightSwitcher 必须有个比shadow层更大的z-index。为了实现这一点，这个层必须“绝对”定位到一个相对定位的并且z-index大于100的容器里面：

1
2

#command { position:relative; height:25px; display:block;}
.lightSwitcher {position:absolute; z-index:102; background:url(light_bulb.png) no-repeat 0 0; padding: 0;text-indent:20px; outline:none; text-decoration:none;}

好了，现在可以了。

如果你看了演示，你可能会注意到，当你切换开关状态的时候，链接文字和图标也改变了。这也是通过CSS和jQuery来实现的。当你关灯以后，电灯泡图标和文字改变，文字颜色也变成了黄色。我们先定义关灯状态的链接样式：

1	.turnedOff {color:#ff0; background-position:0 -50px;}

扩展后的点击处理程序：

 $(".lightSwitcher").click(function(){
	$("#shadow").toggle();
	if ($("#shadow").is(":hidden"))
	$(this).html("关灯").removeClass("turnedOff");
	else
	$(this).html("开灯").addClass("turnedOff");
});

现在我们完全的实现了开关转换的功能了，最后，完整的代码将看起来是这样的:

CSS

body{font:13px "微软雅黑", Arial, Sans-Serif;	text-align:center;margin:0;position:relative;}
#container { width:960px; margin:0px auto; text-align:left; overflow:hidden; position:relative;}
#movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;}
#description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;}
#command { position:relative; height:25px; display:block; margin: 25px 0 0 0;}
.lightSwitcher ,.turnedOff{position:absolute; z-index:102;background:url(light_bulb.png) no-repeat 0 0; padding: 0;text-indent:20px; outline:none; text-decoration:none;}
.lightSwitcher:hover {text-decoration:underline;}
#shadow {background:#000;position:absolute;left:0;top:0;width:100%;z-index:100;opacity:0.80;filter: alpha(opacity = 80);zoom:1;}
.turnedOff {color:#ff0;background-position:0 -50px;}

jQuery

$(document).ready(function(){
	$("#shadow").css("height", $(document).height()).hide();
	$(".lightSwitcher").click(function(){
	$("#shadow").toggle();
	if ($("#shadow").is(":hidden"))
	$(this).html("关灯").removeClass("turnedOff");
	else
	$(this).html("开灯").addClass("turnedOff");
	});
});

注：本文原作者使用一个半透明的png图片平铺来实现#shadow层的半透明效果，也可以使用RGBa背景色来实现，我这里是利用背景色的半透明(opacity)来实现的，这三种方法在非IE浏览器中的效果是一致的。但是这三种方法在IE中都需要IE的专用滤镜来实现。经过测试，演示页面在IE各版本可以正常显示，但是对于IE6，由于IE6的诡异的z-index的bug，shadow层会完全盖住视频以外的所有内容，包括切换链接。

另外，由于最近YouTuBe被GFW墙了，我将原文链接的一个YouTuBe的视频更换为土豆的一个视频，该视频为Beyond的一首不太流行但是非常好听的歌曲《完全的爱吧》，希望大家能够喜欢。