不愿多想，就是感觉特别失落和无聊

第零重：肉体凡胎，这个时期指代的是对于计算机编程毫无基础，对于变量、常量、循环、迭代、条件……一无所知的人；

第一重：筑道之基，有了上面第零重做基础，这个时期内开发者对于语言有一定的基础，但是对于特定的语言刚刚理解语法等常识；

第二重：引气入体，对于语言使用不够纯熟，对于语法、函数、框架等感觉似是而非，除了比做个HELLO WORLD稍微难点的东西外，几乎什么都做不了的人；

第三重：练气化神，这个境界的人应该是看了一些小程序的源码，写过一个小的留言本，完成了Ten Minutes Blog的小盆友，是的，是小盆友，这个时候你还说明都不算！别骄傲，继续努力；

第四重：炼神返虚，到了这个境界，基本上可以完成一些常规的开发了，勉强算是一个“开发者”了，这个时候就该开始了解MVC分层架构、框架、数据库优化、高级正则匹配等知识了；

第五重：返虚合道，经过一两年甚至更长时间的开发实践，不断的学习积累和追求新技术的情况下，这个时候已经可以完成大中型项目的架构，完成安全、高效的系统，并且不断的向社区贡献力量。尝试最新的玩意，比如JAVA+.NET+PHP的开发，中间件。分布式数据库部署(这个严格意义上有Database Manager来完成，但是作为开发者你必须要做出别人可以方便部署的系统结构)、附件的分布式部署与存取、负载平衡等一系列工作。

第六重：神域，作为这个境界的高手，我们只有在传说中才能听到，一般周围几乎不会出现，比如设计编程语言——如Ruby之父松本行弘一流的，心情不好了就搞一门编程语言出来，我等无法望其项背啊！我们永远在踏着他们的脚步前进，却落后的十万八千里，之间差距之大委实不可言表！

在我的学习经验中，任何一门语言，最是做完hello world前后令人无法忍受：之前需要下载很多的软件，搭建开发环境，如果不熟悉，光是开发环境的搭建都得花费很多时间。还没做程序呢，自己心都乏了，无法继续~~  之后呢，看着书照猫画虎的在canvas上打印了一个hello world的字符串——闷骚者一般输出 hello XXX (其中XXX为某闷骚男的字号)，然后练习了一番加减乘除法运算，差不多了，自己想要写个NB叉叉的CMS出来了，结果发现根本无从下手！再读书，发现书里的知识难记、表达拗口、繁复、逻辑不清 ——总之这本书写的很烂，读不懂，或者读了理解不清楚，知识点记不住！哎呀，真是痛苦！！！这是一个学习的黑暗期，最是乏味和无助，如果能熬过这一时期，必然感觉神清气爽海阔天空！这个时候开始，我的建议是一定要和人交流，去相关的社区论坛多读多记，如果感觉基础知识不行，就下死力气练习基本功！这方面 CSDN 、博客园 、JAVAEYE、phpchina 都是非常出色的社区，里面有无数大牛小牛混迹出没，有问题一定要通过搜索，搜索不行了论坛提问等手段搞的彻彻底底清清楚楚明明白白！我的看法是，自己琢磨很重要！一定要自己研究！别人给出了代码，但是自己再敲一遍，然后默写一遍，再思考一遍，再变通着使用一遍，这个问题基本上就可以说是结了！最后，记得不忘学英语——很多新技术全是用英语在发布；还有给社区做贡献——帮助和之前小菜一样的你一样的新手，不但可以树立圈子里自己的威望，而且能加深对技术的理解……

恩，其实还有很多啊，只是不知道从何说起，而且~~关键问题是哥要去嘘嘘了 ，时间不早了，全火星的人民们，晚安咯~

微软在今年六月正式发布了Live搜索的继承者Bing，同时也提供了一套非常全面的API。如同Google API，通过使用Bing API，Web开发者可以在网站中集成bing搜索中的各种服务，从而丰富网站功能，并为网站带来流量。本篇文章通过一个完整的使用示例，向大家展示如何使用jQuery来调用Bing API实现简单的Web搜索引擎，并对Bing API有一个基本的了解。

首先我们来感性感受一下：在线示例

Bing API提供了三种检索结果数据类型：SOAP、XML、JSON，在示例中是通过jQuery ajax调用json数据类型接口展示数据的。下面我们来看它的实现：

准备工作：

微软通过Bing API站点向我们展示了详细的开发文档：

1. 访问bing开发者站点：http://bing.com/developers，在这里也可以找到Bing API在MSDN上的入口
2. 使用微软的账户登录（没有只能先注册一个啦）
3. 填写表格，获取“APP ID”（用来调用API时用的，微软要确定你是微软的开发者）

HTML部分

页面元素很简单，主要包括检索入口、结果显示区域、结果描述、错误信息显示及翻页导航五部分，下面看HTML：

        <div class="line search-content">
            <div class="column col-threefifths">
                <h3 id="results-header"></h3>
                <p id="results-summary"></p>
<!--结果显示区域-->
                <div id="search-result">
                    <h3>搜索结果</h3>
<!-- 结果描述，例如总共多少条，但前是哪些条 -->
                    <div id="result-aggregates" class="results"></div>
                    <ul id="result-list" class="results">
                    </ul>
<!--翻页导航-->
                    <ul id="result-navigation" class="result-navigation">
                        <li id="prev">&laquo;</li>
                        <li id="next">&raquo;</li>
                    </ul>
                </div>
<!--错误信息显示-->
                <p id="error-list">
                </p>
            </div>
<!-- 搜索入口 -->
            <div class="column last-col">
                <h3>输入搜索词:</h3>
                <p>
                    <input id="txtQuery" type="text" title="Search Terms" />
                    <button id="btnSearch" type="button" title="搜索">搜索</button>
                </p>
            </div>
        </div>

通过jQuery调用Bing API部分

1. 定义Bing API需要传入的一些参数：

       //申请的APP ID，这里换成你自己的。
       var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186";
       //通过用户输入搜索词获得检索串
       var Query = "Query="
       //指定检索来源类型，Bing提供了网页、视频、图片等所有类型，参考API
       //这里指定的是网页类型
       var Sources = "Sources=Web";
       //指定API版本
       var Version = "Version=2.0";
       //指定所在地区，如google，每个地区搜索结果是不一样的，这里指定中国
       var Market = "Market=zh-cn"; 
       //一些选项设置，这里开启搜索结果中的搜索词高亮
       var Options = "Options=EnableHighlighting";
       //每页返回条数
       var WebCount = 10;
       //当前为第几页，从0开始的
       var WebOffset = 0;

2. 为搜索按钮绑定处理方法：

   $(function() {
       $('#btnSearch').click(function() {
   //这里调用最关键的Search方法，取数据
           Search();
       });
   });

3. 下面来看最关键的Search部分，调用API获取结果数据：

   $(function() {
   function Search() {
    
   //获取用户输入的搜索词，并替换空格为“+”
           var searchTerms = $('#txtQuery').val().replace(" ", "+");
    
   //防止传输中文时产生乱码
           searchTerms = encodeURI(searchTerms);   
    
   //将接口需要的所有参数封装为数组
           var arr = [AppId, Query + searchTerms, Sources, Version, Market, Options, "Web.Count=" + WebCount, "Web.Offset=" + WebOffset, "JsonType=callback", "JsonCallback=?"];
    
   //将参数数组拼装成url串，最终得到bing的URL Service的请求URL
           var requestStr = "http://api.search.live.net/json.aspx?" + arr.join("&");
    
   //通过jquery ajax调用bing json数据接口
           $.ajax({
               type: "GET",
               url: requestStr,
    //指定数据类型为jsonp
               dataType: "jsonp",  
    
   //调用成功后返回数据对象，并调用处理方法
               success: function(msg) {
                   SearchCompleted(msg);
               },
               error: function(msg) {
                   alert("Something hasn't worked\n" + msg.d);
               }
           });
       }
   });

   我们看到在使用jquery ajax时，指定数据类型为jsonp，jsonp是一种可跨域访问的协议，我对其也不是非常清楚，可以在这里了解一下。

4. 再来看获取到数据后的UI处理，主要包括显示结果和显示错误信息两部分：

    
       function SearchCompleted(response) {
   //检查结果数据对象中的Errors对象，判断是否发生错误
           var errors = response.SearchResponse.Errors;
           if (errors != null) {
               // 发生错误的话调用错误信息显示方法
               DisplayErrors(errors);
           }
           else {
               // 没有错误的话调用结果信息显示方法
               DisplayResults(response);
           }
       }

   下面是显示结果方法，因为要改变UI，所以代码多一点，不过这里可以感受一下jquery中dom操作的灵活。

       function DisplayResults(response) {
   //清空结果列表
           $("#result-list").html("");  
    //清空翻页导航
           $("#result-navigation li").filter(".nav-page").remove();   
   // 清空结果描述信息
           $("#result-aggregates").children().remove(); 
    
   //获取结果数据对象
           var results = response.SearchResponse.Web.Results;  
    
   //描述信息部分，即总过多少条，当前是哪些条
           $('#result-aggregates').prepend("<p>检索词： " + response.SearchResponse.Query.SearchTerms + "</p>");
           $('#result-aggregates').prepend("<p id=\"result-count\">当前显示 " + StartOffset(results)
               + " 至 " + EndOffset(results)
               + "&nbsp;&nbsp;总共:" + parseInt(response.SearchResponse.Web.Total) + "</p>");
    
   //创建结果列表，把每一项要显示的内容放在一个数组中
           var link = [];  
   //因为开启了搜索词高亮选项，这里进行高亮匹配
           var regexBegin = new RegExp("\uE000", "g");    
           var regexEnd = new RegExp("\uE001", "g");     
           for (var i = 0; i < results.length; ++i) {
   //创建每一结果项的信息
               link[i] = "<li><a href=\"" + results[i].Url + "\" title=\"" + results[i].Title + "\">"
                   + results[i].Title + "</a>"
                   + "<p>" + results[i].Description + "<p>"
                   + "<p class=\"result-url\">" + results[i].Url + "</p></li>";
    
   //搜索词加粗显示
               link[i] = link[i].replace(regexBegin, "<strong>").replace(regexEnd, "</strong>");
           }
   //在页面结果区域显示结果列表    
          $("#result-list").html(link.join('')); 
    
   //处理导航区域
           CreateNavigation(response.SearchResponse.Web.Total, results.length);
       }

导航部分代码比较简单，就不在这里大块的贴了，直接下载代码看吧。

下载：示例源码

另外，在MSDN的bing api部分为开发者提供了非常多的代码实例，感兴趣的可以去看。

—————————————————————————–

有朋友留言提出检索中文的时候出现乱码。我又做了测试，如这位朋友所说，在IE中检索时有乱码情况，但是在Firefox中正常（我此前只在Firefox下做测试，故未发现）。

出现这种情况，是由于ajax传输中文检索词时产生乱码，所以传递前需编码，改正如下：

在function.js中第二十行var searchTerms = $(’#txtQuery’).val().replace(” “, “+”); 后添加下面一句：

searchTerms = encodeURI(searchTerms);   //防止传输中文时产生乱码

在线示例及下载源码已更正，感谢sundy提出问题。

Author: Victor Escobedo

I am a student at Cal State Fullerton who works in the IT field and dabbles in web development. Professionally, I enjoy administering computers, but design and develop for the web on my spare time.

Typetester

Typetester is an online application for comparing how different fonts and font attributes will appear on a given set of text. Its primary role is to make the life of a web designer easier by allowing them to quickly and easily visually compare different typefaces.

pForm

Create a php form in seconds with this free and easy to use tool. If you need a little more power you can check out its parent program MachForm or great alternatives wufoo and formspring (both of which offer limited free versions and paid premium versions).

ColourLovers

An international site created for color lovers. You can search the site for color palettes that you may use for projects or create new palettes which can be rated by peers. Great for inspiration or critique of design ideas.

Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. This is probably one of the most widely used web developer tools out there. If you don't have it, get it now!

HTML Entity Character Lookup

Need to know how to display the trademark symbol on one of your pages, this tool if just for you. The HTML Entity Lookup searches the html entities for matches to the searched character based on how the character looks. For instance, the letter "c" would match © and ¢ entity, because of the way they look. This is really a tool that you need to try to understand how useful it is (also available as a dashboard widget for you Mac users).

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Watch an in depth screencast on this framework.

Em Calculator

Em Calculator is a small JavaScript tool which allows you to enter a size in pixels and displays what the corresponding em value would be. This tool is extremely easy to use and handy for a quick reference.

Browser Shots

Browser Shots allows you to view your website in around 100 different browsers on 4 different platforms to determine the ultimate cross browser support. Given how many different types of configurations exists today, it is important to ensure that your site looks its best on as many platforms as possible.

Icon Finder

Iconfinder provides high quality icons for web designers and developers in an easy and efficient way. You simply type in a keyword into the search box and Iconfinder brings you back icons beautiful icons which you can freely use.

WhatTheFont

Want to know the font that your favorite blog uses, this tool can help you. Just upload an image of the font that you are intrigued about and the tool will do its best to match it with the right font. If you would rather trust a real person, the WhatTheFont forums are a great resource as well.

MeasureIt

A great Firefox plugin that lets you draw out a ruler to get the pixel width and height of any elements on a webpage.

ColorZilla

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can zoom the page you are viewing and measure distances between any two points on the page.

Pingdom

Pingdom loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser and then displays how long each of those elements took to load using nice visual time bars. This can be very useful when you are trying to improve the efficiency of your site.

Test Everything

Test Everything lets you run your website though approx. 100 different validators and testers, all from the comfort of one application. This can save an enormous amount of time during the testing phase of your site development.

CSS Sprite Generator

Sprites can increase the speed of your site by reducing the number of HTTP requests and are therefore becoming more popular. Using them, however, requires a good amount of foresight and planning which can make using them somewhat difficult. This amazing online tool allows you to upload your images in a zip file where they are then combined into a sprite. Once the sprite is created, it creates the CSS that you will need to use the sprite and allows you to download all of if free of charge.

Web Developer Toolbar

An extremely useful Firefox plugin which provides many tools which web developers use on a daily basis. Great for quickly validating your XHTML or inspecting HTTP header information.

Domainr

There are plenty of tools available that tell you whether a domain is taken or not. What sets Domainr apart is that it takes your query and then tries to create a more memorable name. Domainr helps you explore the entire domain name space beyond the ubiquitous and crowded .com, .net and .org. Inspired by jish.nu, burri.to and del.icio.us this tool can come in handy when you just can't think of a unique domain name.

Font Burner

Font Burner is a free online tool that allows you to search through over 1000 fonts they have available. Once you have found a font you like, the tool provides you with a snippet of code which allows you to use the font on your site, free of charge. The font will then be displayed on every computer, regardless if the user has the font installed or not.

Smush.It

Smush.It is a neat application which uses non-lossy image optimization tools to squeeze the last bytes out of your images

Load Impact

Are you about to release a product or come out of beta and are wondering whether your site will be able to take the increased traffic? Load Impact is a free tool which tests your site at different load levels and then displays your results in an easy to understand graph.

The End!

Well hopefully you will find something useful in this list. It is by no means an exhaustive list, but simply a list of tools that I have found to be useful in the past and that you may as well.

效果图

　　为便于理解和记忆，先从一些概念入手，所有特殊字符或字符组合有一个总表在后面，最后一些例子供理解相应的概念。

正则表达式

普通字符

非打印字符

特殊字符

　　构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符与操作符将小的表达式结合在一起来创建更大的表达式。正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。

限定符

定位符

选择

后向引用

各种操作符的运算优先级

全部符号解释

部分例子

巨搞笑，看看就知道了，^_^

GOGOGO

      出现这个问题是因为你的用户配置文件出了差错，不过关系不大，你只要把"C:\Documents and Settings\{你的用户名}Application Data\Adobe\Photoshop\9.0\Adobe Photoshop CS2 Settings"下的内容全部删除就可以，然后重新打开，OK？ :-)