欢迎您来到中软卓越!中软国际教育-权威官方IT教育机构 微信

加入收藏
  • 教育部授予:“软件工程专业大学生实习实训基地”资质
  • 商务部授予:“中国服务外包示范培训中心”资质
  • 工信部授予:“国家信息技术紧缺人才培养工程521计划”资格
2016年产学合作
协同育人项目
优秀合作伙伴奖

13943015724

 > IT技术知识点

【前端】窍门:如何快速掌握jQuery插件开发

时间:2017-07-11 16:34:25 作者: 点击次数:0

 jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件是jQuery对象的一个方法。


jQuery插件的使用方式就是jQuery对象方法的调用。


如何快速掌握jQuery插件开发?且看文章讲解~

 

1.jpg

 

一、最简单的jQuery插件封装

 


我们要做一个改变标签文字颜色的插件。


代码

2.jpg

3.jpg

 

审查元素>

4.jpg

 

二、链式调用

 

  链式调用时jQuery的一大特色,一个通用的插件应该遵循jQuery风格,满足链式调用要求。

  添加简单的一行代码return this,在插件执行完之后,就会把当前的jQuery对象返回,然后就可以在插件方法后面继续调用其它jQuery方法。


代码

5.jpg


三、使用立即执行函数避免$符号的污染

 

  因为使用了立即执行函数,所以此时的$只属于这个立即执行函数的函数作用域,这样就可以避免$符号的污染。


代码

6.jpg

 

四、带参数的jQuery插件


继上面的例子,增加一个可以改变文字大小的功能。

 

代码

7.jpg

执行结果 >

8.jpg

 

五、总结


  定义插件的方式除了上面说的用$.fn来定义,还有另外一种方式来定义插件,那就是使用$.fn.extend方法。


代码

 

9.jpg

 

  使用$.extend方法给插件设置默认属性,这个方法在这里的用法就是合并两个对象,即把后面一个对象的存在的属性值赋值给第一个对象。

 

  $.extend方法和$.fn.extend方法都可以用来扩展jQuery功能,$.extend方法是在jQuery全局对象上扩展方法,$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法,定义插件一般用$.fn.extend方法。