推荐9个非常有用的开发技巧给Web开发者
2015-03-04 13:40
513 查看
在这篇文章中,我们将推荐9个非常有用的CSS,HTML和JavaScript开发窍门。如果你也是一个非常热爱前端开发的Web开发人员,那么这几个CSS3和Html5对你肯定非常有用。
1.Html5 placeholder
一个非常有用的脚本创建,用于对字段标签中的占位符和普通的JavaScript之间切换,我知道,你可能会认为这个是多余的,但是如果你想给现代浏览器一个更加敏捷和干净的解决方案,那么你可以使用Html5 placeholder,可以从Franck
Maurin获得这个脚本的。
支持的浏览器: Opera 11+, Firefox 9+,Safari 5+,IE 10+
2. font face
该使用些什么,让那些糟糕的网页字体变的更好和独具特色呢?你现在可以使用font-face。有人说,可以使用谷歌的字体服务,但是如果你想自己控制字体,你就使用字体发生器@font-face,在你的Web网页中使用下面的CSS代码。
支持的浏览器:Opera 11+, Firefox 3+, Safari 5,IE6+
3.Box Sizing
这是我近期最喜欢的一个CSS属性了,它可以帮你解决布局问题,例如,当你向textfield里面填充时,那个宽度将会变成textfield的宽度加上padding的宽度,这样的话,布局通常就会被破坏,而且很让人感到苦恼。然而,你只要使用这个属性,类似的问题就会被解决。更多的例子,你可以从CSS
Trick Box Sizing上阅读。
支持的浏览器:Opera 8.5+, Firefox 1+, Safari 3, IE8+, Chrome 4+
4.禁止对Textare进行调整
有时,你只想textarea在Safari和Chrome中禁用调整大小功能,使其他浏览器保持一致,下面将教你怎么做:
支持的浏览器:Webkit browser only (Chrome and safari)
5. jQuery.trim()
上次,我一直在寻找一个能去掉空格的函数,却没想到jQuery早已经把这个函数封装成起来了,如果你想去掉字符串前后那些空白字符,这个方法就可以派上用场了。
6. jQuery.inArray()
这是一个与Javascript里面的indexOf()很相似的一个方法。如果你知道PHP,这个方法基本上是做同样的事情,它看起来就像是大海捞针,但一旦被发现,这个方法就会返回一个布尔值true。
7. jQuery的插件模式
这是我最近阅读的最好的一篇文章了,谢谢Doug Avery,他写了一个fire patterns,你可以使用它去写jQuery插件。他们中的每一个都可以进行利与弊方面的比较,最后由你来决定使用哪个更合适。 与此同时,我自己也创建了一个简单的jQuery插件模式,或者你可以阅读我们“10个很棒的jQuery插件技巧”这篇文章。
8. 可扩展的jQuery选择器功能
James Padolsey创建了一些非常使用的jQuery选择器。你可以去他的网站上面进行一次全面的关于可扩展的jQuery选择器功能方面的学习,里面有很多好例子和好的想法,你可以选择一些看看。
这是我最近在项目中经常使用的一个,正则选择器。
9.最有效的方法去压缩和优化PNG图像
它并不是最近刚出来的新方法,但是它帮助我和其他人很多次,所以我决定再次拿出来分享一下以防你们错过。它基本上是通过色调分离来减少png图像的大小,你可以阅读我们的png文件压缩教程。(张红月/编译)
1.Html5 placeholder
一个非常有用的脚本创建,用于对字段标签中的占位符和普通的JavaScript之间切换,我知道,你可能会认为这个是多余的,但是如果你想给现代浏览器一个更加敏捷和干净的解决方案,那么你可以使用Html5 placeholder,可以从Franck
Maurin获得这个脚本的。
支持的浏览器: Opera 11+, Firefox 9+,Safari 5+,IE 10+
// jQuery code var i = document.createElement("input"); // Only bind if placeholder isn't natively supported by the browser if (!("placeholder" in i)) { $("input[placeholder]").each(function () { var self = $(this); self.val(self.attr("placeholder")).bind({ focus: function () { if (self.val() === self.attr("placeholder")) { self.val(""); } }, blur: function () { var label = self.attr("placeholder"); if (label && self.val() === "") { self.val(label); } } }); }); } <!-- html5 --> <input type="text" name="search" placeholder="Search" value="">
2. font face
该使用些什么,让那些糟糕的网页字体变的更好和独具特色呢?你现在可以使用font-face。有人说,可以使用谷歌的字体服务,但是如果你想自己控制字体,你就使用字体发生器@font-face,在你的Web网页中使用下面的CSS代码。
支持的浏览器:Opera 11+, Firefox 3+, Safari 5,IE6+
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } body { font-family: 'MyWebFont', Fallback, sans-serif; }
3.Box Sizing
这是我近期最喜欢的一个CSS属性了,它可以帮你解决布局问题,例如,当你向textfield里面填充时,那个宽度将会变成textfield的宽度加上padding的宽度,这样的话,布局通常就会被破坏,而且很让人感到苦恼。然而,你只要使用这个属性,类似的问题就会被解决。更多的例子,你可以从CSS
Trick Box Sizing上阅读。
支持的浏览器:Opera 8.5+, Firefox 1+, Safari 3, IE8+, Chrome 4+
textarea { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }
4.禁止对Textare进行调整
有时,你只想textarea在Safari和Chrome中禁用调整大小功能,使其他浏览器保持一致,下面将教你怎么做:
支持的浏览器:Webkit browser only (Chrome and safari)
textarea { resize: none }
5. jQuery.trim()
上次,我一直在寻找一个能去掉空格的函数,却没想到jQuery早已经把这个函数封装成起来了,如果你想去掉字符串前后那些空白字符,这个方法就可以派上用场了。
$.trim(" a lot of white spaces, front and back! ");
6. jQuery.inArray()
这是一个与Javascript里面的indexOf()很相似的一个方法。如果你知道PHP,这个方法基本上是做同样的事情,它看起来就像是大海捞针,但一旦被发现,这个方法就会返回一个布尔值true。
var arr = [ "xml", "html", "css", "js" ]; $.inArray("js", arr);
7. jQuery的插件模式
这是我最近阅读的最好的一篇文章了,谢谢Doug Avery,他写了一个fire patterns,你可以使用它去写jQuery插件。他们中的每一个都可以进行利与弊方面的比较,最后由你来决定使用哪个更合适。 与此同时,我自己也创建了一个简单的jQuery插件模式,或者你可以阅读我们“10个很棒的jQuery插件技巧”这篇文章。
//You need an anonymous function to wrap around your function to avoid conflict (function($){ //Attach this new method to jQuery $.fn.extend({ //This is where you write your plugin's name pluginname: function() { //options var defaults = { option1: "default_value" } var options = $.extend(defaults, options); //a public method this.methodName: function () { //call this method via $.pluginname().methodName(); } //Iterate over the current set of matched elements return this.each(function() { var o = options; //code to be inserted here }); } }); //pass jQuery to the function, //So that we will able to use any valid Javascript variable name //to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) ) })(jQuery);
8. 可扩展的jQuery选择器功能
James Padolsey创建了一些非常使用的jQuery选择器。你可以去他的网站上面进行一次全面的关于可扩展的jQuery选择器功能方面的学习,里面有很多好例子和好的想法,你可以选择一些看看。
这是我最近在项目中经常使用的一个,正则选择器。
jQuery.expr[':'].regex = function(elem, index, match) { var matchmatchParams = match[3].split(','), validLabels = /^(data|css):/, attr = { method: matchParams[0].match(validLabels) ? matchParams[0].split(':')[0] : 'attr', property: matchParams.shift().replace(validLabels,'') }, regexFlags = 'ig', regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags); return regex.test(jQuery(elem)[attr.method](attr.property)); } /******** Usage ********/ // Select all elements with an ID starting a vowel: $(':regex(id,^[aeiou])'); // Select all DIVs with classes that contain numbers: $('div:regex(class,[0-9])'); // Select all SCRIPT tags with a SRC containing jQuery: $('script:regex(src,jQuery)');
9.最有效的方法去压缩和优化PNG图像
它并不是最近刚出来的新方法,但是它帮助我和其他人很多次,所以我决定再次拿出来分享一下以防你们错过。它基本上是通过色调分离来减少png图像的大小,你可以阅读我们的png文件压缩教程。(张红月/编译)
相关文章推荐
- 转载 - 推荐9个非常有用的开发技巧给Web开发者
- Web开发中9个有用的提示和技巧
- 推荐10款非常有用的Web设计和开发工具
- 推荐10款非常有用的Web设计和开发工具
- 推荐10款非常有用的Web设计和开发工具
- [Android Tips]Android 开发技巧 (二) 非常有用的优化工具Lint
- 8个对于Web设计和开发人员非常有用的在线工具
- 分享20个非常有用的Web开发工具和框架
- 8个对于Web设计和开发人员非常有用的在线工具
- 分享8个对于Web设计和开发人员非常有用的在线工具
- web开发经验推荐-新网站项目中的8个有用片段
- 8个对于Web设计和开发人员非常有用的在线工具
- 分享8个对于Web设计和开发人员非常有用的在线工具
- Web 开发中 9 个有用的提示和技巧
- 精心收藏的50个有用的PSD到HTML/CSS转换教程推荐给web开发人员
- 分享20个非常有用的Web开发工具和框架
- Web开发人员非常有用的手册
- 11对于Web开发人员和设计师非常有用的在线工具
- 8个非常有用的在线工具(对于Web设计和开发人员 )
- 推荐8款非常有用的 CSS 开发工具