jquery插件视频教程 jquery插件使用

转载

mob6454cc647bdb 2023-05-24 11:38:31

文章标签 js插件写法 jQuery 封装对象方法 文章分类 jQuery 前端开发

编写插件的目的是给已有的一些方法或函数做一个封装，便于复用

jQuery插件分三种类型

　　1.封装对象方法的插件：

　　　　　这种是将对象方法封装起来，用于对通过选择器获取的jq对象进行操作，是最常见的一种插件

　　2. 封装全局函数的插件:

　　　　可以将独立的函数加到jq命名空间下

　　3.选择器插件:

插件的基本要点：

　　文件命名推荐 jquery,[插件名].js

　　所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上

　　在插件内部，this指向当前通过选择器获取的jQuery对象，而不像一般方法那样，例如click(),内部this指向DOM元素

　　通过this.each来遍历所有元素

　　所有方法或函数插件都应该以分号结尾，可以在插件头部先加上分好，避免他人的不规范代码给插件带来影响

　　;(function($){

　　//此处编写jQuery插件代码

　　})(jQuery);

　　jQuery插件机制

　　jQuery提供了两个用于扩展jQuery功能的方法，jQuery.fn.extend()方法，用于扩展对象方法；jQuert.extend()用于扩展后两种插件

　　jQuery.extend()除了可以扩展jquery对象外，还可以扩展已有的object对象 jQuery.extend(target, obj1,obj2....)

　　用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象

　　如：合并setting对象和options对象，修改并返回setting对象

　　　　var setting = {validate: false, limit: 5,name: "foo" };

　　　　var options = {validate: true, name: "bar"};

　　　　var newOptions = jQuery.extend(setting, options);

　　结果为：

　　　　newOptions = {validate:false, limit: 5, name:"foo"};

　　jQuery.extend()方法经常被用于设置插件方法的一系列默认参数

　　如： ;(function($){

　　　　　　options = $.extend({

　　　　　　　　name: "bar",

　　　　　　　　length:5,

　　　　　　　　dataType: 'xml' //默认参数

　　　　　　}, options); //options为传递的参数

　　})(jQuery);

　　通过使用jQuery.extend()方法，可以很方便的用传入的参数来覆盖默认值

　　1.封装对象方法插件

　　//实现表格隔行变色和单选按钮选中，单选按钮所在行变色

　　<style>
           thead td{
               border-bottom:1px solid #F00
           }
           table{
               width: 500px;
               margin: 0 auto;
               text-align: center;

           }
           tr{
               line-height: 40px;

           }
           .odd{background-color: #7EC4CC;}
           .even{background-color: #A1A1A1;}
           .selected{background-color: #FF0000;}
       </style>

　　引入js

　　js代码

　　$('#tab2').alertBgColor().find('thead tr').css('color','red');

　　插件代码

写法1：jquery选择符一个元素

;(function($) {
   $.fn.extend({
       'alertBgColor': function(options) {
           options = $.extend({
               odd: 'odd',
               even: 'even',
               selected: 'selected'
           }, options);
           //不能直接用$('tbody>tr')选择表各行，这样会使页面中全部的tr都各行变色，应该使用选择器选中某个表格，执行alertBgColor方法后
           //将对应的表格内tr元素进行隔行变色，$('tbody>tr:odd',this)表示在匹配的元素内查找
           $('tbody>tr:odd', this).addClass(options.odd);
           $('tbody>tr:even', this).addClass(options.even);
           $('tbody>tr').click(function() {
               var hasSelected = $(this).hasClass(options.selected);
               $(this)[hasSelected ? 'removeClass' : 'addClass'](options.selected)
                   .find(':checkbox').prop('checked', !hasSelected);
           });
           $('tbody>tr:has(":checked")', this).addClass(options.selected);

           return this; //返回this，使方法可链
       }

   })
})(jQuery);

写法2：jquery选择符可能匹配一个或多个元素

;(function($) {
   $.fn.extend({
       'alertBgColor': function(options) {
           options = $.extend({
               odd: 'odd',
               even: 'even',
               selected: 'selected'
           }, options);
           //不能直接用$('tbody>tr')选择表各行，这样会使页面中全部的tr都各行变色，应该使用选择器选中某个表格，执行alertBgColor方法后
           //将对应的表格内tr元素进行隔行变色，$('tbody>tr:odd',this)表示在匹配的元素内查找
           return this.each(function() {             //jquery选择符可能匹配一个或多个。用this.each()遍历匹配元素
               $('tbody>tr:odd', this).addClass(options.odd);
               $('tbody>tr:even', this).addClass(options.even);
               $('tbody>tr').click(function() {
                   var hasSelected = $(this).hasClass(options.selected);
                   $(this)[hasSelected ? 'removeClass' : 'addClass'](options.selected)
                       .find(':checkbox').prop('checked', !hasSelected);
               });
               $('tbody>tr:has(":checked")', this).addClass(options.selected);
           })
       }
   })
})(jQuery);

//封装全局函数的插件

　　//实现字符串拼接字符串

　　;(function($){
                   $.extend({
                       connect: function(text){
                           return '你好'+text;
                       }
                   })
               })(jQuery);
               var val = $.connect('world!');
               console.log(val)
           });