jQuery扩展插件——$.extend(obj)与$.fn.extend(obj)

最新推荐文章于 2022-04-30 18:11:49 发布

强哥blog

最新推荐文章于 2022-04-30 18:11:49 发布

阅读量957

点赞数 1

分类专栏： jquery 文章标签： jquery 扩展插件

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

版权

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 
  > 
 
  < 
  ul 
   id= 
  "_ul" 
  > 
 
  < 
  li 
  >aaa 
  </ 
  li 
  > 
 
  < 
  li 
  >ccc 
  </ 
  li 
  > 
 
  < 
  li 
  >bbb 
  </ 
  li 
  > 
 
  </ 
  ul 
  > 
 
  < 
  div 
   id= 
  "test" 
  ></ 
  div 
  > 
 
  < 
  script 
  > 
 
  // (function($){ 
 
  // $.fn.AlertSelf = function(){ 
 
  // this.click(function(){alert($(this).html())}); 
 
  // } 
 
  // })(jQuery) 
 
  // $('#_ul li').AlertSelf(); 
 
  // var result = $.extend({},{name:'tom',age:21},{name:'jerry',sex:'boy'}) 
 
  // console.log(result); 
 
  // $.extend({ 
 
  // hello:function(){alert('hello');} 
 
  // }) 
 
  // $.hello() 
 
  /* $.entend 是将方法合并到jquery的全局对象中， $.fn.extend 是将方法合并到jquery的实例对象中去 */ 
 
  // $.fn.extend({ 
 
  // hello:function(){alert('hello');} 
 
  // }) 
 
  // $.extend({net:{}}); 
 
  // $.extend($.net,{ 
 
  // hellp:function(){alert('hello');} 
 
  // }) 
 
  /* 1.定义一个全局函数*/ 
 
  jQuery. 
  foo = 
  function(){ 
 
  alert( 
  "全局"); 
 
   } 
 
  jQuery. 
  bar = 
  function(){ 
 
  alert( 
  "在一个全局"); 
 
   } 
 
  /* 2.使用 extend 定义全局函数*/ 
 
  jQuery. 
  extend({ 
 
  foo1: 
  function(){ 
  alert( 
  "extend全局1");}, 
 
  bar1: 
  function(){ 
  alert( 
  "extend全局2");} 
 
   }); 
 
  /* 3. 使用命名空间定义函数*/ 
 
  jQuery. 
  plugin = { 
 
  foo2: 
  function(){ 
 
  alert( 
  "使用namespace定义函数"); 
 
   } 
 
   } 
 
  /*$(function(){ 
 
  $.foo(); 
 
  $.bar(); 
 
  $.foo1(); 
 
  $.bar1(); 
 
  $.plugin.foo2(); 
 
  })*/ 
 
  /* 二、对象级别的插件开发*/ 
 
  /* 形式一*/ 
 
   ( 
  function( 
  $){ 
 
  $. 
  fn. 
  extend({ 
 
  foo3: 
  function(){ 
  alert( 
  '队形级别extend1');}, 
 
  bar3: 
  function(){ 
  alert( 
  '对象那个级别extend2');} 
 
   }) 
 
   })( 
  jQuery); 
 
  /*形式二*/ 
 
   ( 
  function( 
  $){ 
 
  $. 
  fn. 
  foo4 = 
  function(){ 
 
  alert( 
  '队形级别fn方法'); 
 
   } 
 
   })( 
  jQuery); 
 
  /* 接受参数来控制插件的行为*/ 
 
   ( 
  function( 
  $){ 
 
  $. 
  fn. 
  bar4 = 
  function( 
  options){ 
 
  var 
  defaults = { 
  aaa: 
  '1', 
  bbb: 
  '2'}; 
 
  var 
  opts = 
  $. 
  extend( 
  defaults, 
  options); 
 
  alert( 
  '参数值：aaa：'+ 
  opts. 
  aaa+ 
  ';bbb:'+ 
  opts. 
  bbb); 
 
   } 
 
   })( 
  jQuery); 
 
  /* 提供公有方法访问插件的配置项值*/ 
 
   ( 
  function( 
  $){ 
 
  $. 
  fn. 
  foo5 = 
  function( 
  options){ 
 
  var 
  opts = 
  $. 
  extend({}, 
  $. 
  fn. 
  foo5. 
  defaults, 
  options); 
 
  alert( 
  '参数值：aaa：'+ 
  opts. 
  aaa+ 
  ';bbb:'+ 
  opts. 
  bbb); 
 
   } 
 
  $. 
  fn. 
  foo5. 
  defaults = { 
  aaa: 
  '1', 
  bbb: 
  '2'}; 
 
   })( 
  jQuery); 
 
  /* 提供公有方法来访访问插件中其他的方法 */ 
 
   ( 
  function( 
  $){ 
 
  $. 
  fn. 
  bar5 = 
  function( 
  options){ 
 
  $. 
  fn. 
  bar5. 
  alert( 
  options); 
 
   } 
 
  $. 
  fn. 
  bar5. 
  alert = 
  function( 
  params){ 
 
  alert( 
  params); 
 
   } 
 
   })( 
  jQuery); 
 
  $( 
  function(){ 
 
  $( 
  '#test'). 
  foo3(); 
 
  $( 
  '#test'). 
  bar3(); 
 
  $( 
  '#test'). 
  foo4(); 
 
  $( 
  '#test'). 
  bar4(); 
 
  $( 
  '#test'). 
  bar4({ 
  aaa: 
  '3'}); 
 
  $( 
  '#test'). 
  bar4({ 
  aaa: 
  '3', 
  bbb: 
  '4'}); 
 
  $( 
  '#test'). 
  foo5(); 
 
  $( 
  '#test'). 
  foo5({ 
  aaa: 
  '5', 
  bbb: 
  '6'}); 
 
  $( 
  '#test'). 
  bar5( 
  'aaaa'); 
 
   }) 
 
  </ 
  script 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >