一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

JavaScript开发者常忽略或误用的七个基础知识点

JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序。很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧。本文将为你呈献其中七个基础知识点: 1. 在 String.prototype.replace 方法中使用 /g 和 /i标志位 令很多 JavaScript 初学者意外的是,字符串的 replace 方法并不会 替换所有匹配的子串——而仅仅替换第一次匹配。当然 JavaScript 老手们都知道这里可以使用正则表达式,并且需要加上一个全局标志位(/g): 1 // Mistake 2 // 踩到坑了 3 var str = "David is an Arsenal fan, which means David is great"; 4 str.replace("David", "Darren"); // "Darren is an Arsenal fan, which means David is great" 5 6 // Desired 7 // 符合预期 8 str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great" 另一个基本的逻辑错误就是在大小写不敏感的校验场合(字母可大写可小写)没有忽略大小写,此时 /i标志位就很实用: 1 str.replace(/david/gi, "Darren"); // "Darren will always be an Arsenal fan, which means Darren will always be great" (译注:上面这段例程我没有看懂用意,可能是注释有误吧……) 每个 JavaScript 开发者都曾踩过这两个标志位的坑——因此别忘了在适当的时候用上它们! 2. […]

龙生   21 Aug 2013
View Details

css中的注释要注意了

周末给客户写了一个专题页面,今天发现在IE8下是空白页面,直接不显示,直接怀疑是CSS的问题的; 通过一行一行排查,发现是CSS里有html的注释<!—->导致的,直接去掉,一切正常。

龙生   19 Aug 2013
View Details

Dwz关闭弹出的窗口

龙生   15 Aug 2013
View Details

DWZ (JUI) 教程 navTab 刷新分析

navTab的刷新在doc文件里也有说明 首先 在form表单里指定好回调函数 * <form action="/user.do?method=save" onsubmit="return validateCallback(this, navTabAjaxDone)"> 如果不指定回调函数的话框架会默认使用DWZ.ajaxDone() <div class="dp-highlighter bg_html"><div class="bar"><div class="tools"><b>[html]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a><div style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; z-index: 99;"><embed id="ZeroClipboardMovie_2" src="//static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="0" height="0" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=0&height=0" wmode="transparent"></div></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span>function&nbsp;navTabAjaxDone(json){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DWZ.ajaxDone(json);&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//注意返回的JSON的数据结构&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(<span class="attribute">json.statusCode</span><span>&nbsp;==&nbsp;DWZ.statusCode.ok){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(json.navTabId){&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//把指定navTab页面标记为需要“重新载入”。注意navTabId不能是当前navTab页面的&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navTab.reloadFlag(json.navTabId);&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//重新载入当前navTab页面&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navTabPageBreak();&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;("closeCurrent"&nbsp;==&nbsp;json.callbackType)&nbsp;{&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function(){navTab.closeCurrentTab();},&nbsp;100);&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;("forward"&nbsp;==&nbsp;json.callbackType)&nbsp;{&nbsp;&nbsp;</span></li><li […]

龙生   15 Aug 2013
View Details

js Date

Date 对象用于处理日期和时间。 创建 Date 对象的语法: var myDate=new Date() Date 对象会自动把当前日期和时间保存为其初始值。 参数形式有以下5种: new Date("month dd,yyyy hh:mm:ss"); new Date("month dd,yyyy"); new Date(yyyy,mth,dd,hh,mm,ss); new Date(yyyy,mth,dd); new Date(ms); 注意最后一种形式,参数表示的是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数。各种函数的含义如下: month:用英文表示月份名称,从January到December mth:用整数表示月份,从(1月)到11(12月) dd:表示一个月中的第几天,从1到31 yyyy:四位数表示的年份 hh:小时数,从0(午夜)到23(晚11点) mm:分钟数,从0到59的整数 ss:秒数,从0到59的整数 ms:毫秒数,为大于等于0的整数 如: new Date("January 12,2006 22:19:35"); new Date("January 12,2006"); new Date(2006,0,12,22,19,35); new Date(2006,0,12); new Date(1137075575000);   Date() 返回当日的日期和时间。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getFullYear() 从 Date 对象以四位数字返回年份。 getYear() 请使用 getFullYear() 方法代替。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMinutes() 返回 Date 对象的分钟 […]

龙生   15 Aug 2013
View Details

10 个很有用的 HTML5 和 CSS3 生成器资源

HTML5 和 CSS3 是用来编写网站的两种语言,这里我们向你介绍 10 个非常不错的在线工具,可帮你自动生成很多 HTML5 和 CSS3 代码,节省你大量的时间。   CSS3.me

龙生   09 Aug 2013
View Details

推荐 16 个免费的 jQuery 日期和时间插件

JQuery Age Demo || Download   FLIPCLOCK.JS – JQUERY PLUGIN TIMER, CLOCK, COUNTDOWN WITH FLIP EFFECT

龙生   09 Aug 2013
View Details

11 个用来创建图形和图表的 JavaScript 工具包

Aristochart DEMO || Download Aristochart 是一个用来创建图形和图表的最佳 JavaScript 工具包之一。完全可定制的灵活线图库。

龙生   06 Aug 2013
View Details

15 个使用 jQuery 和 CSS 的选项卡菜单教程

Net.Tuts’ Tab Interface 本教程帮助网页设计者、开发者和程序员创建选项卡界面,只需要一行代码搞定 Alfajango.com’s Easy Tabs ( DEMO || DOWNLOAD)   Unwrongest.com’s Tabify ( DEMO || DOWNLOAD)   Red Team Design’s Google Play’s Minimal Tabs ( DEMO || DOWNLOAD)   Codrops’ Fancy Sliding Form ( DEMO || DOWNLOAD)   Raymond Selda’s Tab Content Rotator 这是一个很棒的选项卡菜单,支持旋转 Republic of 3’s HTML Tabs   Will P’s Blog’s Animated Feedback Tabs 动画的带反馈的 Tab Thingy,很多网站在使用,非常简单,只适用了一些隐藏层实现切换 CSS Tricks’ Organic Tabs ( DEMO || DOWNLOAD) Organic Tabs 可防止选项卡切换时的卡顿,提供更平滑和快速的移动 Tutorialzine’s Sweet Tabs ( DEMO || DOWNLOAD)   Net.tuts’ Blogroll   Net.tuts’ Slick Tab Content   Sunsean’s idTabs ( DEMO || DOWNLOAD)   Queness’ Moving and Sliding Tab ( DEMO || DOWNLOAD)   9 Lessons’ Tab Style Login and […]

龙生   01 Aug 2013
View Details

HTML < iframe > 标签

  定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。 提示和注释: 提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器。 可选的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset. 属性 值 描述 DTD align left right top middle bottom 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 TF frameborder 1 0 规定是否显示框架周围的边框。 TF height pixels % 规定 iframe 的高度。 TF longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。 TF marginheight pixels 定义 iframe 的顶部和底部的边距。 TF marginwidth pixels 定义 iframe 的左侧和右侧的边距。 TF name frame_name 规定 iframe 的名称。 TF scrolling yes no […]

龙生   28 Jul 2013
View Details
1 45 46 47 58