-002Adding jQuery object methods

Posted 2020-07-06 shamgod

一、Object method context

1.We have seen that adding global functions requires extending the jQuery object with new methods. Adding instance methods is similar, but we instead extend the jQuery.fn object(The jQuery.fn object is an alias to jQuery.prototype,provided for conciseness.):

1 jQuery.fn.myMethod = function() {
2     alert(‘Nothing happens.‘);
3 };

We can then call this new method from our code after using any selector expression:

1 $(‘div‘).myMethod();

Our alert is displayed (once for each <div> in the document) when we invoke the method.

 

2.交换CSS的类样式

 1 // Unfinished code
 2 (function($) {
 3     $.fn.swapClass = function(class1, class2) {
 4         if (this.hasClass(class1)) {
 5             this.removeClass(class1).addClass(class2);
 6         } else if (this.hasClass(class2)) {
 7             this.removeClass(class2).addClass(class1);
 8         }
 9     };
10 })(jQuery);
11 $(document).ready(function() {
12     $(‘table‘).click(function() {
13         $(‘tr‘).swapClass(‘one‘, ‘two‘);
14     });
15 });

 

二、Implicit iteration

 1 (function($) {
 2     $.fn.swapClass = function(class1, class2) {
 3         this.each(function() {
 4             var $element = $(this);
 5             if ($element.hasClass(class1)) {
 6                 $element.removeClass(class1).addClass(class2);
 7             } else if ($element.hasClass(class2)) {
 8                 $element.removeClass(class2).addClass(class1);
 9             }
10         });
11     };
12 })(jQuery);

The meaning of "this"
Caution: The keyword this refers to a jQuery object within the object method‘s body, but refers to a DOM element within the .each() invocation.

 

三、Enabling method chaining

 1 (function($) {
 2     $.fn.swapClass = function(class1, class2) {
 3         return this.each(function() {
 4             var $element = $(this);
 5             if ($element.hasClass(class1)) {
 6                 $element.removeClass(class1).addClass(class2);
 7             } else if ($element.hasClass(class2)) {
 8                 $element.removeClass(class2).addClass(class1);
 9             }
10         });
11     };
12 })(jQuery);