<?xml version="1.0" encoding="UTF-8"?><rss version="0.92">
<channel>
	<title>前端思考：专注前端开发，关注用户体验</title>
	<link>http://www.artcss.com</link>
	<description>一个像素的距离...</description>
	<lastBuildDate>Sat, 12 Feb 2011 03:34:07 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>en</language>
	<!-- generator="WordPress/3.2.1" -->

	<item>
		<title>微博</title>
		<description><![CDATA[我的微博 [liveblog]]]></description>
		<link>http://www.artcss.com/archives/867.html</link>
			</item>
	<item>
		<title>由页面开关灯效果引起的跨iframe操作dom的思考</title>
		<description><![CDATA[前两天需要在公司某网站页面头部加一个时下流行的页面开关灯效果,效果很简单，只要控制背景样式切换就行，但是现在的网站头不是个iframe，所以得在iframe里边操作iframe外边的dom。如果用原生的js，直接parent.document就可以获取到。考虑到原来网站引用了jQuery，所以想用jQuery的方法写，这个以前还真没写过，于是上google找答案&#8230; jQuery子iframe区父级dom方法如下：$(&#8216;ID&#8217;,window.parent.document) 子iframe操作父级页面dom的javascript代码如下: Download demo.js1 2 3 4 5 6 7 $&#40;&#34;.deng&#34;&#41;.toggle&#40; function&#40;&#41;&#123; $&#40;'body',window.parent.document&#41;.addClass&#40;&#34;bg2&#34;&#41;; $&#40;this&#41;.html&#40;'开灯'&#41;; &#125;, function&#40;&#41;&#123; $&#40;'body',window.parent.document&#41;.removeClass&#40;&#34;bg2&#34;&#41;; $&#40;this&#41;.html&#40;'关灯'&#41;; &#125;&#41; 项目应用实例：完美音乐在线 网址：http://radio.wanmei.com/ 延伸阅读：父级页面控制子iframe的Dom 用到的方法主要是：$(“fu_iframeID”).contents().find(“ID”) Download demo.js1 2 3 4 5 $&#40;&#34;#fu&#34;&#41;.toggle&#40;function&#40;&#41;&#123; $&#40;&#34;#light&#34;&#41;.contents&#40;&#41;.find&#40;&#34;.tools&#34;&#41;.addClass&#40;&#34;bg1&#34;&#41;; &#125;, function&#40;&#41;&#123; $&#40;&#34;#light&#34;&#41;.contents&#40;&#41;.find&#40;&#34;.tools&#34;&#41;.removeClass&#40;&#34;bg1&#34;&#41;; &#125;&#41; 点我试试 看到上边iframe里边的变化了吧 $(function(){ $("#fu").toggle(function(){ $("#light").contents().find(".tools").addClass("bg1"); }, function(){ $("#light").contents().find(".tools").removeClass("bg1"); }) });]]></description>
		<link>http://www.artcss.com/archives/870.html</link>
			</item>
	<item>
		<title>静态页面js传参</title>
		<description><![CDATA[js在静态页面传参，主要就是怎么在目的页面获取到相应的参数，这里通过一个小例子，演示一下参数传递的方法。 实例描述：比如有两个页面，分别叫a.html和b.html。b.html页面中有一个tab选项卡菜单，分别是“手机数码”、“电脑”、“家用电器”。这里要实现的是，怎么从a.html页面，连接到b.html中不同的选项卡中不同的项。比如点击a页面的电脑，连接到到b页面的第二个选项卡。 主要用到的是JavaScript substring()方法 语法 stringObject.substring(start,stop) 参数 描述 start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。 stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。 获取参数的javascript代码如下: Download getconfig.js1 2 3 4 5 6 7 8 9 &#40;function&#40;&#41;&#123; var hf = window.location.href; var index = hf.substring&#40;hf.lastIndexOf&#40;'='&#41;+1,hf.length&#41;; function showtab&#40;index&#41;&#123; $&#40;&#34;#&#34;+index&#41;.addClass&#40;&#34;hover&#34;&#41;.siblings&#40;&#41;.removeClass&#40;&#34;hover&#34;&#41;; $&#40;&#34;.&#34;+index&#41;.show&#40;&#41;.siblings&#40;&#41;.hide&#40;&#41;; &#125; window.load = showtab&#40;index&#41;; &#125;&#41;&#40;&#41;; 猛击下边几个链接看看是不是成功了 手机数码 电脑 家用电器 项目应用实例：《神魔大陆》-克兰蒙多生活指南 链接地址：http://event51.wanmei.com/shenmo/201008/life/]]></description>
		<link>http://www.artcss.com/archives/897.html</link>
			</item>
	<item>
		<title>浏览器兼容手册[总结]</title>
		<description><![CDATA[这是我总结多年的一个小文档，最近看见有人咨询浏览器兼容的问题，就贡献出来。 并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了&#8230;汗。大家一起慢慢完善吧。 javascript部分 1. document.form.item 问题 问题： 代码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行 解决方法： 改用 document.formName.elements["elementName"] 2. 集合类对象问题 问题： 代码中许多集合类对象取用时使用()，IE能接受，FF不能 解决方法： 改用 [] 作为下标运算，例： document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1] 3. window.event 问题： 使用 window.event 无法在FF上运行 解决方法： FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决： onMouseMove = “functionName(event)” function functionName (e) { &#160; &#160; e = e &#124;&#124; window.event; &#160; &#160; &#8230;&#8230; } 4. [...]]]></description>
		<link>http://www.artcss.com/archives/850.html</link>
			</item>
	<item>
		<title>仿校内textarea输入框字数限制效果</title>
		<description><![CDATA[这是一个仿校内textarea回复消息输入框限制字数的效果，具体表现如下： 普通状态是一个输入框，当光标获取焦点时，出现字数记录和回复按钮 PS:上边那个小三角可不是用的图片。 普通状态效果如下： 获取焦点时： 字数限制的javascript代码如下: Download oTab.js1 2 3 4 5 6 7 8 $&#40;function&#40;&#41;&#123; function maxLimit&#40;&#41;&#123; var num=$&#40;this&#41;.val&#40;&#41;.substr&#40;0,140&#41;; $&#40;this&#41;.val&#40;num&#41;; $&#40;this&#41;.next&#40;&#41;.children&#40;&#34;span&#34;&#41;.text&#40;$&#40;this&#41;.val&#40;&#41;.length+&#34;/140&#34;&#41;; &#125;; $&#40;&#34;#textlimit&#34;&#41;.keyup&#40;maxLimit&#41;;//调用方法 &#125;&#41;; 点击下面“运行”直接查看效果 &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34;&#62; &#60;meta name=&#34;author&#34; content=&#34;Web Layout:LiQiang.Gu;&#34; /&#62; &#60;meta name=&#34;description&#34; content=&#34;前端思考 web前端 前端制作 artskin www.artcss.com&#34; /&#62; &#60;meta [...]]]></description>
		<link>http://www.artcss.com/archives/831.html</link>
			</item>
	<item>
		<title>jQuery滑动导航菜单</title>
		<description><![CDATA[今天用jQuery写了个滑动导航菜单，加入了缓动展开的效果。比以前常用的用css伪类:hover+ie6模拟:hover的js写的那个效果好，所以拿出来分享一下，可能还可以更好的改进，欢迎大家多拍砖。 先看一下效果图 实例：Demo 用到的javascript代码如下: Download oTab.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $&#40;function&#40;&#41;&#123; $&#40;&#34;ul.sub&#34;&#41;.parent&#40;&#41;.append&#40;&#34;&#60;span&#62;&#60;/span&#62;&#34;&#41;; $&#40;&#34;ul.sub ul&#34;&#41;.parent&#40;&#41;.append&#40;&#34;&#60;em&#62;&#60;/em&#62;&#34;&#41;; $&#40;'#nav ul'&#41;.closest&#40;'li'&#41;.hover&#40;function&#40;&#41;&#123; $&#40;this&#41;.find&#40;&#34;span&#34;&#41;.addClass&#40;&#34;arrow&#34;&#41;; $&#40;this&#41;.find&#40;&#34;em&#34;&#41;.removeClass&#40;&#34;arrow&#34;&#41;; $&#40;this&#41;.children&#40;&#34;ul&#34;&#41;.stop&#40;true,true&#41;.slideDown&#40;'fast'&#41;.show&#40;&#41;; $&#40;&#34;#nav ul&#62;li&#34;&#41;.hover&#40;function&#40;&#41;&#123;$&#40;this&#41;.addClass&#40;&#34;hover&#34;&#41;&#125;, function&#40;&#41;&#123;$&#40;this&#41;.removeClass&#40;&#34;hover&#34;&#41;&#125;&#41;; &#125;,function&#40;&#41;&#123; $&#40;this&#41;.children&#40;&#34;ul&#34;&#41;.stop&#40;true,true&#41;.hide&#40;&#41;; $&#40;this&#41;.find&#40;&#34;span&#34;&#41;.removeClass&#40;&#34;arrow&#34;&#41;; $&#40;this&#41;.find&#40;&#34;em&#34;&#41;.addClass&#40;&#34;arrow&#34;&#41;; &#125;&#41; &#125;&#41;; 点击下面“运行”直接查看效果 &#60;!DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML 4.01//EN&#34; &#34;http://www.w3.org/TR/html4/strict.dtd&#34;&#62; &#60;html&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34;&#62; &#60;meta name=&#34;author&#34; content=&#34;Web [...]]]></description>
		<link>http://www.artcss.com/archives/821.html</link>
			</item>
	<item>
		<title>网页浮动工具条</title>
		<description><![CDATA[前两天用jQuery写了个网页浮动工具条，主要效果如下： 1、自动判断浏览器宽度。 当浏览器窗口小于1024时，工具条会自动隐藏 支持浏览器窗口拖拽 2、当拖动浏览器窗口大小时，工具条位置也会相应调整，始终保持贴在网页主体内容右侧。 用到的javascript代码如下: Download showBar.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 $&#40;function&#40;&#41;&#123; var name = $&#40;'#float_scroll'&#41;; //浮动工具条的ID function showBar&#40;time&#41;&#123; setTimeout&#40;function&#40;&#41;&#123; $&#40;name&#41;.show&#40;&#41;;&#125;,time&#41;; &#125; [...]]]></description>
		<link>http://www.artcss.com/archives/799.html</link>
			</item>
	<item>
		<title>最简单的代码实现Tab</title>
		<description><![CDATA[在工作中经常遇到这种Tab切换效果，网上这种效果也是一搜一大堆，但不一定完全适合自己。写过许多次后，发现了一种方法不但代码简洁，而且调用方便，所以分享给大家。 这是基于jquery写的一个Tab，选项卡标题的id和选项卡内容class的名称保持一致即可。 用到的javascript代码如下: Download oTab.js1 2 3 4 5 6 7 8 9 $&#40;function&#40;&#41;&#123; function oTab &#40;&#41;&#123; $&#40;this&#41;.addClass&#40;&#34;current&#34;&#41;.siblings&#40;&#41;.removeClass&#40;&#34;current&#34;&#41;.parent&#40;&#41;.siblings&#40;&#41; .hide&#40;&#41;.siblings&#40;&#34;.&#34;+$&#40;this&#41;.attr&#40;&#34;id&#34;&#41;&#41;.show&#40;&#41;; &#125; //调用方法 $&#40;&#34;.tabt span,.tabt2 span&#34;&#41;.mouseover&#40;oTab&#41;;//同时调用两个或以上 $&#40;&#34;.tabt3 span&#34;&#41;.click&#40;oTab&#41;; &#125;&#41;; 点击下面“运行”直接查看效果 &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34; /&#62; &#60;meta name=&#34;description&#34; content=&#34;前端思考，专注前端开发，关注用户体验，artskin artcss &#34; /&#62; &#60;meta name=&#34;keywords&#34; content=&#34;前端思考,artskin,artcss &#34; /&#62; [...]]]></description>
		<link>http://www.artcss.com/archives/762.html</link>
			</item>
	<item>
		<title>详解：JavaScript数据类型[转]</title>
		<description><![CDATA[JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。 String 字符串类型:字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）如：“The cow jumped over the moon.” 数值数据类型：JavaScript 支持整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。 Boolean 类型：可能的 Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。 Undefined 数据类型：一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。 Null 数据类型：null 值就是没有任何值，什么也不表示。 object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分，这部分将在后面章节详细介绍。 在 JavaScript 中变量用来存放脚本中的值，这样在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其它一些东西。 　　 JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如：var men = true; // men 中存储的值为 Boolean 类型。 变量命名:JavaScript 是一种区分大小写的语言，因此将一个变量命名为 [...]]]></description>
		<link>http://www.artcss.com/archives/747.html</link>
			</item>
	<item>
		<title>jQuery1.4官方文档中文版[转]</title>
		<description><![CDATA[2010年1月14号, 恰逢jQuery四周年纪念日, jQuery的团队早早便开始了1.4版发布的准备工作, 并以每天一则公告的方式进行庆祝, 活动将持续14天。发布的首日, jQuery的团队首先列出了1.4版中的重大改进。我个人认为这篇文档是这几天以来内容比较充实的一篇文档。所以翻译过来, 以便同僚日后可以参考。时间仓促, 可能有几处不太明确的地方, 或是原文就草草带过, 可能会不大通畅。欢迎讨论或提出意见，以便共同进步。 原译者:coolnalu 原文地址: http://jquery14.com/day-01 .wp_syntax { color: #100; background-color: #f9f9f9; border: 1px solid silver; margin: 0 0 1.5em 0; overflow: auto; } .wp_syntax div{ vertical-align: top; padding: 2px 4px; } .entry h2{ background: #eeeeee; padding: 5px; } jQuery 1.4 发布啦 为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的编程，测试，和记录文档的工作，我们为此感到很骄傲。 我要以个人的名义感谢 Brandon [...]]]></description>
		<link>http://www.artcss.com/archives/677.html</link>
			</item>
</channel>
</rss>

