Of Stack

jQuery Plug in Extension Test Instance

  • 2021-06-29 09:57:03
  • OfStack

This article provides an example of the jQuery plug-in extension test method.Share it for your reference, as follows: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JQquery Extension testing </title>
  <script type = "text/javascript" src="jquery-1.7.2.min.js"> </script>
  <style type = "text/css">
   .a{
    background:#ccc;
   }
   .b{
    background:#555;
   }
  </style>
  <script type = "text/javascript">
  //1. Object Level Extensions  jQuery.fn yes jQuery.prototype Alias of 
  //  Be careful : In object methods, keywords this Quoted is 1 individual jQuery Object, but on each call .each() In the method, this Quoted is 1 individual dom Element (so each Internal Use jQuery Packing this, While in return Later, call directly jQuery On Methods .each() ) 
  (function($){
   $.fn.toggleClass = function(options){
    return this.each(function(){
     var opts = $.extend({},$.fn.toggleClass.defaults,options);
     var $element = $(this);
     if($element.hasClass(opts.class1)){
      $element.removeClass(opts.class1).addClass(opts.class2);
     }else if($element.hasClass(opts.class2)){
      $element.removeClass(opts.class2).addClass(opts.class1);
     }
    })
   }
   $.fn.toggleClass.defaults = {
    class1:"",
    class2:""
   }
   $.fn.setBorder = function(){
    return this.each(function(){
     $(this).css("border","1px solid red");
    })
   }
  })(jQuery);
  $(function(){
   var opts = {
     class1:"a",
     class2:"b"
    }
   $("h1").click(function(){
    $("h1").toggleClass(opts).setBorder();
   })
  })
  //2. Class Level Extensions 
   //1). Add directly: for jQuery Object Add Global Function 
   jQuery.sum = function(array){
    var total = 0;
    jQuery.each(array,function(idx,num){
     total += num;
    })
    return total;
   }
   //2). use extend Add to: 
   jQuery.extend({
    fn1:function(){},
    fn2:function(){}
   })
  </script>
 </head>
 <body>
  <h1 id = "h1" class = "a">JQuery Extended Test </h1>
 </body>
</html>

More readers interested in jQuery-related content can view this site's topics: jQuery Extension Skills Summary, jQuery Common Plug-ins and Usages Summary, jQuery Drag-and-Drop Special Effects and Skills Summary, jQuery Table (table) Operation Skills Summary, Ajax Usage Summary in jquery, jQuery Common Classic Special Effects Summary,jQuery Animation and Utility Summary and jquery Selector Usage Summary

I hope that the description in this paper will be helpful to everyone's jQuery program design.

Related articles: