<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>甜·咖啡&#187; jQuery</title>
	<atom:link href="http://blog.xiao3.info/tag/jquery/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.xiao3.info</link>
	<description>Software  Wordpress  &#124;&#124;  ProE  SolidWorks</description>
	<lastBuildDate>Thu, 29 Jul 2010 03:00:51 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>使用jQuery为非站内超链接添加图标</title>
		<link>http://blog.xiao3.info/jquery-favicon.html</link>
		<comments>http://blog.xiao3.info/jquery-favicon.html#comments</comments>
		<pubDate>Mon, 25 Jan 2010 06:19:53 +0000</pubDate>
		<dc:creator>xiao3</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[favicon]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.xiao3.info/?p=391</guid>
		<description><![CDATA[一般我们在写博客的过程中，大多数的文章都会有些外部链接到别的网站。这时若是使用明显的标记提前告知来访者点击链接后会进入到其他网站，对于用户体验提升有些帮助。在很多博客上看到的都是这样的：在外部链接的后面会出现一个小图标，指明是站外链接。在我的博客上，所有导向其他网站的链接都会有对应网站的 favicon 图标显示，这个大家应该都会看得到。

我使用的是 jQuery 的方法，就一句代码的问题。但是有一些地方还需要改进，只能请教各位大神了
&#60;!-- 非本站超链接添加图标 Start --&#62;    
　　&#60;script type="text/javascript"&#62;    
　　jQuery(document).ready(function($){
　　$(".post .content a:not([href*=xiao3.info])").each(function(e){
　　$(this).prepend("&#60;img src=http://www.google.com/s2/favicons?domain="+this.href.replace
　　(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+"
　　style=line-height:16px;padding-right:5px;padding-left:5px;height:16px;vertical-align:middle;&#62;");
　　});
　　});    
　　&#60;/script&#62;
&#60;!-- 非本站超链接添加图标 End --&#62;

大家可以看到上面的代码就是通过调用外链网站的 Google 的 favicon 缓存地址来实现的，a:not([href*=xiao3.info])这个的意思是不对含有 xiao3.info 的链接显示图标，因为这个是站内链接。但是缺点也出来了，就是这样调用的话全部的链接都会出现 Favicon 图标，即一些我外链的图片也会有图标出来，这样就会有一些不美观，不知道该如何去除 .gif .png .jpg 的图标，各位老师有知道的能给个解决的方法么？
请各位老师有解决办法的在留言中给个说明。谢谢～







 © xiao3 for 甜·咖啡, 2010. &#124;
链接 &#124;
评论(16) &#124;
Twitter
 &#124; GHS IP &#124; [...]]]></description>
			<content:encoded><![CDATA[<p style="text-indent:2em" >一般我们在写博客的过程中，大多数的文章都会有些外部链接到别的网站。这时若是使用明显的标记提前告知来访者点击链接后会进入到其他网站，对于用户体验提升有些帮助。在很多博客上看到的都是这样的：在外部链接的后面会出现一个小图标，指明是站外链接。在我的博客上，所有导向其他网站的链接都会有对应网站的 favicon 图标显示，这个大家应该都会看得到。</p>
<p><span id="more-391"></span></p>
<p style="text-indent:2em" >我使用的是 jQuery 的方法，就一句代码的问题。但是有一些地方还需要改进，只能请教各位大神了</p>
<pre><font face="Fixedsys"><font color="#008000">&lt;!-- 非本站超链接添加图标 Start --&gt;</font><font color="#000000">    </font><font color="#0000ff">
　　&lt;script </font><font color="#ff0000">type</font><font color="#0000ff">=</font><font color="#ff00ff">"text/javascript"</font><font color="#0000ff">&gt;</font>    <font color="#800000">
　　jQuery(</font><font color="#ff0000">document</font><font color="#800000">).ready(</font><font color="#0000ff">function</font><font color="#800000">($){</font>
　　<font color="#800000">$(</font><font color="#ff00ff">".post .content a:not([href*=xiao3.info])"</font><font color="#800000">).each(</font><font color="#0000ff">function</font><font color="#800000">(e){</font>
　　<font color="#800000">$(</font><font color="#0000ff">this</font><font color="#800000">).prepend(</font><font color="#ff00ff">"&lt;img src=http://www.google.com/s2/favicons?domain="</font><font color="#800000">+</font><font color="#0000ff">this</font><font color="#800000">.href.replace</font>
　　<font color="#800000">(/^(http:\/\/[^\/]+).*$/, </font><font color="#ff00ff">'$1'</font><font color="#800000">).replace( </font><font color="#ff00ff">'http://'</font><font color="#800000">, </font><font color="#ff00ff">'' </font><font color="#800000">)+</font><font color="#ff00ff">"
　　style=line-height:16px;padding-right:5px;padding-left:5px;height:16px;vertical-align:middle;&gt;"</font><font color="#800000">);
</font>　　<font color="#800000">});</font>
　　<font color="#800000">});</font>    
<font color="#0000ff">　　&lt;/script&gt;</font><font color="#008000">
&lt;!-- 非本站超链接添加图标 End --&gt;
</font></font></pre>
<p style="text-indent:2em" >大家可以看到上面的代码就是通过调用外链<a target="_blank" href="http://blog.xiao3.info/google-favicon-cache.html">网站的 Google 的 favicon 缓存地址</a>来实现的，<font><font><font face="Fixedsys"><font color="#ff00ff">a:not([href*=xiao3.info])</font></font></font></font>这个的意思是不对含有 xiao3.info 的链接显示图标，因为这个是站内链接。但是缺点也出来了，就是这样调用的话全部的链接都会出现 Favicon 图标，即一些我外链的图片也会有图标出来，这样就会有一些不美观，不知道该如何去除 .gif .png .jpg 的图标，各位老师有知道的能给个解决的方法么？</p>
<p style="text-indent:2em" ><span style="color:#307f00;background-color:#fee573;">请各位老师有解决办法的在留言中给个说明。谢谢～</span></p>
<P><div style="margin:3px 5px 2px 0px;float:left;"><A HREF="http://catfun.info" target="_blank">
<IMG SRC="http://xiao3meng.googlecode.com/files/cat.gif" BORDER="0"  ALT="咪咪集散地">
</A></div><A HREF="http://feeds.feedburner.com/mengzehe/CatFun" target="_blank">
<IMG SRC="http://feeds.feedburner.com/mengzehe/CatFun.gif?w=1&c=1&bb=s4Kh" BORDER="0"  ALT="咪咪集散地">
</A>
<br/>
<hr noshade style="margin:0;height:1px" /></br>
<p> <strong>©</strong> xiao3 for <a href="http://blog.xiao3.info">甜·咖啡</a>, 2010. |
<a href="http://blog.xiao3.info/jquery-favicon.html">链接</a> |
<a href="http://blog.xiao3.info/jquery-favicon.html#comments">评论(16)</a> |
<a href="https://twitter.com/mengzehe" title="欢迎在 Twitter 上 Follow 我!" style="font-weight:700;color:#33ccff;background-color:#fff;">Twitter</a>
 | <a title="实时更新可用的 GHS.google.com 的 IP " href="http://www.xiao3.info/ghs-ip.php" style="color:#FF6600;" target="_blank">GHS IP</a> | <a title="有了它，伟大的墙要倒下啦！"  href="https://xiao3proxy.appspot.com/" style="color:#FF0000;">代理</a> 
| <a title="本站一些小文件都在这里" href="http://mengzehe-app.appspot.com/" style="color:#666600;">文件</a> 
| <a title="你想翻墙么？看这里" href="http://proxy.xiao3.info/" style="color:#AA6600;">FUCK GFW</a>
<br/>
<br/>
<br/>
原文地址：<a href="http://blog.xiao3.info/jquery-favicon.html">使用jQuery为非站内超链接添加图标</a>          标签: <a href="http://blog.xiao3.info/tag/favicon" rel="tag">favicon</a>, <a href="http://blog.xiao3.info/tag/jquery" rel="tag">jQuery</a><br/>
</p>]]></content:encoded>
			<wfw:commentRss>http://blog.xiao3.info/jquery-favicon.html/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>
