jQuery 自动识别外部链接并设置新窗口打开

上次跟大家分享了 用 CSS 突出显示不同类型的链接，区分网站内链和外链 ，但方法中并没有提到如何自动让外链在新窗口打开。今天就跟大家分享下如何用强大的 jQuery 实现自动识别外部链接并设置新窗口打开。

其实此方法的灵感来自于 等待 的 增强用户体验之文章内的链接 ，基本代码也差不多，只是做了一些的修改。在此先表示感谢，他的博客上也有很多关于 CSS 和 jQuery 的技巧，对技术感兴趣的可以多去逛逛，哈哈！

我先上代码再解释吧，也就两句话：

解释下：第一句，用 jQuery 选择所有 a 链接中含有 “www.xiaorsz.com” . “javascript” . “#” 的链接，这是网站中所有的内链了，当然我不敢担保还有其它的情况。a:has(img) 是将图片链接也排除，因为我们并不想在图片链接的右侧也加个小图标。.attr(“rel”,”inlinks”) 是为所有已经选择的元素添加 rel=inlinks 的属性，标识一下。

第二句就是设置所有链接中 rel 属性不等于 inlinks 的（也就是外部链接了），在新窗口打开，并设置相应的 CSS 属性，也就是加一个外部链接的标识小图片。

OK，基本上就这么多了，当然这样的话是给博客中所有的外链都进行了设置，而我只想在内容区域的外部链接添加图标标识，因为我的侧边栏有很多的外部链接，如果我在右边加个小图片的话会比较夸张，也影响美观，对于留言区域也是一样。于是，我的代码是这样写的：

这样我让所有的外链在新窗口打开，而只为 .content 中的 a 链接设置了 CSS 样式。

这样做还有一点点小问题存在，就是这个样式是在 JS 中设置的，也就是说我的 JS 加载完之后才会给链接加上对应的样式信息，这样如果网速不够快的话，就会出现一开始并没有右空白和图片标识，等一下后又突然出现，特别对于我这样在尾部加载 JS 的话有时就比较明显。解决办法是参考 用 CSS 突出显示不同类型的链接，区分网站内链和外链 ，用 CSS 对外部链接进行判断并实现相应的样式，而只用 jQuery 来设置新窗口打开的动作就可以了！！

OK！应该结束了吧，有问题可以留言，我会尽量解决的。当然有建议我也会虚心接收……