jQuery技术

抛砖引玉 自定义jQuery扩展接口

字号+ 作者: 来源: 2014-11-16 22:49 我要评论( )

jQuery是一款很优秀的轻量级JavaScript框架,有其独特的优点,本文将用一个简单的例子演示jQuery的扩展接口的简单示例,希望能对读者起到抛砖引玉的作用。

jQuery是一款很优秀的轻量级JavaScript框架,有其独特的优点。很多Web开发者都却对其乐此不疲。因为在这个框架中,除了拥有丰富的客户端处理功能、动画功能外,更是提供了很自定义扩展接口,方便更多的开发者来扩展jQuery。

51CTO推荐专题: jQuery从入门到精通

  1. $.extend({  
  2.       max: function(a, b) {  
  3.           return a > b ? a : b;  
  4.       },  
  5.       min: function(a, b) {  
  6.           return a > b ? b : a;  
  7.       },  
  8.       avg: function(a, b) {  
  9.           return a / b;  
  10.       }  
  11. });  

该示例用以在jQuery中增加新函数,该函数是静态函数。调用如下:

  1. jQuery.min(2,3); // => 2  
  2. jQuery.max(4,5); // => 5 


如果针对组件的功能扩展函数,同样也是很简单。比如,你想要扩展TextBox的功能,使到它在获取焦点时,高亮显示;失去焦点时,则取消高亮。当然,高亮的效果可以使用CSS来实现,因此,你可以用一个颜色的名称作为参数进行调用。代码如下:

  1. $.fn.hightlight = function(colorName) {  
  2.     this.mouseover(function() {  
  3.         $(this).css('background-color', colorName);   //this对是对组件自身的引用  
  4.     });  
  5.     this.mouseout(function() {  
  6.         $(this).css('background-color', '');  
  7.     });  

调用如下:

  1. $(function() {  
  2.     $('#test').hightlight('red');  
  3. });  

扩展jQuery的Json技巧

下面我们将分析在jQuery基础上扩展了其处理Json字符串能力,伟大的jQuery将会更伟大用jQuery写JavaScript非常高效,jQuery对Ajax的封装也非常到位;使用jQuery一段时间后发现,jQuery在处理Json字符串方面功能不是很强,至少比prototype.js差远了。

以前用习惯了扩展Jquery的Json,在进行Ajax开发时,处理json数据非常方便;而在jQuery中,只提供了一个简单的jQuery.getJSON()方法,并未提供jQuery本身对json数据的转换处理,将json字符串转换为Javascript数据对象还比较容易利用eval()函数即可,但要将Javascript的数据类型转换成json字符串就比较难了;刚开始不得同时使用prototype.js和jQuery。扩展Jquery的Json代码:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
-