Basic jquery Tutorial-8th Chapter -002adding jquery Object Methods

One, Object method context

1.We has 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 (theJquery.fn object was an alias T o Jquery.prototype, provided forconciseness. ):

1 function () {2     alert (' nothing happens. ') ); 3 };

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

1 $ (' div '). MyMethod ();

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

2. Exchanging CSS class styles

1 //Unfinished Code2(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     };Ten }) (jQuery); One$ (document). Ready (function() { A$ (' table '). Click (function() { -$ (' tr '). Swapclass (' One ', ' both ')); -     }); the});

Second, 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             }Ten         }); One     }; A}) (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.

Third, 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             }Ten         }); One     }; A}) (JQuery);

Basic jquery Tutorial-8th Chapter -002adding jquery Object Methods