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

川长思鸟来 2022-06-16 12:27 155阅读 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 >

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关自己编写JQuery扩展分页插件

相关 Chrome扩展插件

相关 jQuery插件

相关【jquery扩展】jquery扩展方法extend(),以及扩展插件

相关 jquery extend jquery插件扩展

相关 js插件扩展

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

相关 jQuery扩展插件

相关 jquery插件

相关 jQuery-插件