jQuery插件开发模式

最新推荐文章于 2024-01-05 19:47:22 发布

强哥blog

最新推荐文章于 2024-01-05 19:47:22 发布

阅读量427

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_36263601/article/details/72178523

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

 
   
 
 
   <!DOCTYPE html 
   > 
  
 
   < 
   html 
    lang= 
   "en" 
   > 
  
 
   < 
   head 
   > 
  
 
   < 
   meta 
    charset= 
   "UTF-8" 
   > 
  
 
   < 
   meta 
    name= 
   "viewport" 
    content= 
   "width=device-width, initial-scale=1.0" 
   > 
  
 
   < 
   meta 
    http-equiv= 
   "X-UA-Compatible" 
    content= 
   "ie=edge" 
   > 
  
 
   < 
   title 
   >Document 
   </ 
   title 
   > 
  
 
   < 
   script 
   src= 
   "jquery-1.11.1.min.js" 
   ></ 
   script 
   > 
  
 
   </ 
   head 
   > 
  
 
   < 
   body 
   > 
  
 
   < 
   div 
    id= 
   "myDiv" 
   >This is a Params JQuery! 
   </ 
   div 
   > 
  
 
   < 
   script 
   > 
  
 
   /*  
  
 
   方法列表：  
  
 
   1、jQquery.extend(Object); 是对jQuery类的自定义扩展 
  
 
   2、jQuery.fn.exten(Object)；是对jQuery对象的自定义扩展*/ 
  


 
   jQuery. 
   fn. 
   test = 
   function(){ 
  
 
   alert( 
   '这是jquery对象方法!'); 
  

    } 
  

 
   jQuery( 
   'div'). 
   click( 
   function(){ 
  
 
   $( 
   this). 
   test() 
  

    }) 
  

 
   jQuery. 
   fn. 
   extend({ 
  
 
   test: 
   function(){ 
  
 
   return 
   this. 
   each( 
   function(){ 
  
 
   alert( 
   this. 
   nodeName) 
  

    }); 
  

    } 
  

    }); 
  
 
   jQuery( 
   'body *'). 
   click( 
   function(){ 
  
 
   $( 
   this). 
   test() 
  

    }) 
  

 
   /*优选*/ 
  

    ( 
   function( 
   $){ 
  
 
   $. 
   fn. 
   hilight= 
   function( 
   options){ 
  
 
   var 
   defaults={ 
  
 
   foreground: 
   'red', 
  
 
   background: 
   'yellow' 
  

    }; 
  
 
   var 
   opts = 
   $. 
   extend( 
   defaults, 
   options); 
  
 
   $( 
   this). 
   css( 
   'background-color', 
   opts. 
   background); 
  
 
   $( 
   this). 
   css( 
   'color', 
   opts. 
   foreground); 
  

    }; 
  

    })( 
   jQuery) 
  
 
   $( 
   '#myDiv'). 
   hilight({ 
   foreground: 
   'blue', 
   background: 
   'red'}) 
  
 
   </ 
   script 
   > 
  
 
   </ 
   body 
   > 
  
 
   </ 
   html 
   > 
  
 
   
 