随笔-610  评论-121  文章-168  trackbacks-6
  2011年3月31日
使用jQuery检查浏览器类型

不同的浏览器执行脚本的方法有点不一样,但你可以使用jQuery轻松识别浏览器的类型,然后执行相应的自定义代码,下面是用jQuery检查浏览器的代码片段:

  1. if (jQuery.browser.mozilla)   
  2. {  
  3.     // Code to execute if browser is Mozilla  
  4. }  
  5. if (jQuery.browser.msie)   
  6. {  
  7.     // Code to execute if browser is IE  
  8. }  
  9.    
  10. if (jQuery.browser.safari)   
  11. {  
  12.     // Code to execute if browser is Safari  
  13. }  
  14. if (jQuery.browser.opera)   
  15. {  
  16.     // Code to execute if browser is Opera  
  17. }
posted @ 2011-03-31 16:06 念时 阅读(175) 评论(0) 编辑

    随着众多框架和特效代码库的推出,JavaScript的复兴已经有目共睹,借助框架,学习JavaScript已经非常容易,而jQuery无疑将是您的首选。

最近2、3年以来,我们目睹了JavaScript的卷土重来。由于缺乏跨浏览器兼容性,以及慢如蜗牛的运行时性能和可怜的调试功能,JavaScript脚本语言一直备受指责。

但是随着众多框架和特效代码库的推出,JavaScript的复兴已经有目共睹。甚至浏览器厂商也加入其中,纷纷推出能够大幅提高JavaScript代码执行速度的新引擎。JavaScript 2.0似乎将成为下一代Web应用的助推剂。

51CTO推荐专题:入门到精通 jQuery开发手册

很长时间以来我多少有些忽视这种趋势。对于多数开发者来说,值得学习的新东西已经很多,JavaScript往往并非第一选择。但是,借助于目前已 经存在的众多不同框架,诸如MooTools、Dojo、Prototype和jQuery等,学习JavaScript已经非常容易。以下我将列举七条 理由来证明,为什么你应该学习一个JavaScript框架,而且jQuery将是您的首选。

51CTO相关文章推荐:了解jQuery技巧来提高你的代码质量

1、jQuery实现脚本与页面的分离

在HTML代码中,我们还经常看到类似这样的代码:

  1. <form id="myform" onsubmit=return validate();" >
  2.  

即使validate()函数可以被放置在一个外部文件中,实际上我们依然是把页面与逻辑和事件混杂在一起。jQuery让你可以将这两部分分离。借助于jQuery,页面代码将如下所示:

  1. <form id="myform">
  2.  

接下来,一个单独的JS文件将包含以下事件提交代码:

  1. $("myform").submit(function() {  
  2. ...your code here  
  3. )} 

这样我们可以实现灵活性非常强的清晰页面代码。jQuery让JavaScript代码从HTML页面代码中分离出来,就像数年前CSS让样式代码与页面代码分离开一样。

2、最少的代码做最多的事情

最少的代码做最多的事情,这是jQuery的口号,而且名副其实。使用它的高级selector,开发者只需编写几行代码就能实现令人惊奇的效果。 开发者无需过于担忧浏览器差异,它除了还完全支持Ajax,而且拥有许多提高开发者编程效率的其它抽象概念。jQuery把JavaScript带到了一 个更高的层次。以下是一个非常简单的示例:

  1. $("p.neat").addClass("ohmy").show("slow");
  2.   

通过以上简短的代码,开发者可以遍历“neat”类中所有的<p>元素,然后向其增加“ohmy”类,同时以动画效果缓缓显示每一个段落。开发者无需检查客户端浏览器类型,无需编写循环代码,无需编写复杂的动画函数,仅仅通过一行代码就能实现上述效果。

3、性能

在大型JavaScript框架中,jQuery对性能的理解最好。尽管不同版本拥有众多新功能,其最精简版本只有18KB大小,这个数字已经很难 再减少。jQuery的每一个版本都有重大性能提高。本篇文章讲的是jQuery未经过任何优化的原始速度。如果将其与新一代具有更快 JavaScript引擎的浏览器(如火狐3和谷歌Chrome)配合使用,开发者在创建富体验Web应用时将拥有全新速度优势。

4、它是一个“标准”

之所以使用引号,是以为jQuery并非一个官方标准。但是业内对jQuery的支持已经非常广泛。谷歌不但自己使用它,还提供给用户使用。另外戴 尔、新闻聚合网站Digg、WordPress、Mozilla和许多其它厂商也在使用它。微软甚至将它整合到Visual Studio中。如此多的重量级厂商支持该框架,用户大可以对其未来放心,大胆的对其投入时间。

5、插件

基于jQuery开发的插件目前已经有大约数千个。开发者可使用插件来进行表单确认、图表种类、字段提示、动画、进度条等任务。jQuery社区已 经成长为一个生态系统。这一点进一步证明了上一条理由,它是一个安全的选择。而且,jQuery正在主动与“竞争对手”合作,例如Prototype。它 们似乎在推进JavaScript的整体发展,而不仅仅是在图谋一己之私。

6、节省开发者学习时间

当然要想真正学习jQuery,开发者还是需要投入一点时间,尤其是如果你要编写大量代码或自主插件的话,更是如此。但是,开发者可以采取“各个击 破”的方式,而且jQuery提供了大量示例代码,入门是一件非常容易的事情。我建议开发者在自己编写某类代码前,首先看一下是否有类似插件,然后看一下 实际的插件代码,了解一下其工作原理。简而言之,学习jQuery不需要开发者投入太多,就能够迅速开始开发工作,然后逐渐提高技巧。

7、让JavaScript编程变得有趣

我发现使用jQuery是一件充满乐趣的事情。它简洁而强大,开发者能够迅速得到自己想要的结果。它解决了许多JavaScript问题和难题。我 过去曾讨厌JavaScript编程,但现在却非常喜欢它。通过一些基础性的改进,开发者可以真正去思考开发下一代Web应用,不再因为语言或工具的差劲 而烦恼。我相信它的“最少的代码做最多的事情”口号。

posted @ 2011-03-31 12:21 念时 阅读(55) 评论(0) 编辑

    文章分析了用JSON作为jQuery异步请求的传输对象时,对返回后的结果不明朗,其归根结底还是对jQuery对相关JSON对象获取的理解有所偏差。

等到问题解决了,也大致明白怎么个意思了,归根结底还是对jQuery对相关JSON对象获取的理解有所偏差

这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSON Object等插件封装的JSON对象,与此亦是大同小异,这里不再做说明。这里首先给出JSON字符串集,字符串集如下:

  1. var data="   
  2. {   
  3. root:   
  4. [   
  5. {name:'1',value:'0'},   
  6. {name:'6101',value:'西安市'},   
  7. {name:'6102',value:'铜川市'},   
  8. {name:'6103',value:'宝鸡市'},   
  9. {name:'6104',value:'咸阳市'},   
  10. {name:'6105',value:'渭南市'},   
  11. {name:'6106',value:'延安市'},   
  12. {name:'6107',value:'汉中市'},   
  13. {name:'6108',value:'榆林市'},   
  14. {name:'6109',value:'安康市'},   
  15. {name:'6110',value:'商洛市'}   
  16. ]   
  17. }"; 

这里以jquery异步获取的数据类型——json对象和字符串为依据,分别介绍两种方式获取到的结果处理方式。

对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象,以下举例说明:

  1. var dataObj=eval("("+data+")");//转换为json对象   
  2. alert(dataObj.root.length);//输出root的子对象数量   
  3. $.each(dataObj.root,fucntion(idx,item){   
  4. if(idx==0){   
  5. return true;   
  6. }  
  7.  
  8. //输出每个root子对象的名称和值   
  9. alert("name:"+item.name+",value:"+item.value);   
  10. })  

注:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。

对于服务器返回的JSON字符串,如果jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方 法获得服务器返回,那么就不需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法 为例说明数据处理方法:

  1. $.getJSON("http://gaoyusi.blog.163.com/",{param:"gaoyusi"},function(data){   
  2. //此处返回的data已经是json对象   
  3. //以下其他操作同第一种情况   
  4. $.each(data.root,function(idx,item){   
  5. if(idx==0){   
  6. return true;//同countinue,返回false同break   
  7. }  
  8.  
  9. alert("name:"+item.name+",value:"+item.value);  
  10.  
  11. });   
  12. }); 

这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。

posted @ 2011-03-31 11:54 念时 阅读(438) 评论(0) 编辑

之前只是针对所有的IE浏览器:

<!--[if IE]>   <link href="Style/IE.css" rel="stylesheet" type="text/css" /> <![endif]-->

要避掉IE8的话就得:

<!--[if lt IE 8]>   <link href="Style/IE.css" rel="stylesheet" type="text/css" /> <![endif]-->

lt在此作小于用,也就是小于IE8的版本都能识别。

或者:

<!--[if lte IE 7]>   <link href="Style/IE.css" rel="stylesheet" type="text/css" /> <![endif]-->

lte在此作小于及等于用,也就是小于及等于IE7的版本能识别。

或者:

<!--[if !(IE 8)]>   <link href="Style/IE.css" rel="stylesheet" type="text/css" /> <![endif]-->

<!–[if !(IE 8)]><![endif]–>在此单独避掉IE8版本。

在网上找了以下代码,测试了下有几个不符合:

1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> 2.  <!--[if IE]> 所有的IE可识别 <![endif]--> 3. <!--[if IE 5.0]>  只有IE5.0可以识别 <![endif]--> 4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别  <![endif]--> 5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别  <![endif]--> 6. <!--[if IE 6]> 仅IE6可识别 <![endif]--> 7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> 8.  <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> 9. <!--[if  IE 7]> 仅IE7可识别 <![endif]--> 10. <!--[if lt IE 7]>  IE7以及IE7以下版本可识别 <![endif]--> 11. <!--[if gte IE 7]>  IE7以及IE7以上版本可识别 <![endif]-->

经过测试后:

5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->

这个只有IE6以上的版本才可识别,也就是不包括IE5.0

7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

这个只有IE5以下的版本才能识别,也就是不包括IE6

10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->

这个只有IE6以下的版本才能识别,也就是不包括IE7

后来才在经典那找到:

gt = Great Then 大于 &gt; = > 大于号 lt = Less Then  小于 &lt; = < 小于号 gte = Great Then or Equal 大于或等于 lte = Less Then  or Equal 小于或等于

一下就明白过来了,还费了那么大劲。

posted @ 2011-03-31 10:26 念时 阅读(227) 评论(0) 编辑

细节决定成败!态度决定一切!