JQuery plug-in, silly !, Jquery plug-in silly points

JQuery plug-in, silly !, Jquery plug-in silly points
Not to mention, directly add the code!

First extend

<! -- Extend extension jQuery is actually adding a static method -->
$. Extend ({
SayHello: function (name)
{
Alert ('hello, '+ (name? Name: 'xxxx') + '! ')
}
});

$ (Function (){
$. SayHello ();
$. SayHello ('hangsan ');
});

Type 2 $. fn
<! -- $. Fn: Add a method to the JQuery object -->
$. Fn. Red = function (){

This. each (function (){
$ (This). append (''+ $ (this). attr ('href '));
});

Return this.css ('color', 'red ');
}



$ (Function (){
$ ("A" ).Red().css ('color', 'Gray ');
});

Third: Comprehensive Utilization

<! -- Comprehensive Utilization -->
$. Fn. MyDesign = function (options ){
Var defaults = {
'Color': 'red ',
'Fontsize': '12pt'
}
Var settings = $. extend ({}, defaults, options)

This. each (function (){
$ (This). append (''+ $ (this). attr ('href '));
});

Return this.css ({'color': settings. color, 'fontsize': settings. fontSize });
}

 

Fourth optimization (Object-Oriented and other details)

; (Function ($, window, document, undefined ){
Var Beautifier = function (ele, options ){
This. defaults = {
'Color': 'yellow ',
'Fontsize': '20pt'
}
This. ele = ele,
This. options = options,
This. setting = $. extend ({}, this. defaults, this. options)
}

Beautifier. prototype = {
Beautify: function (){
Return this.ele.css ({
'Color': this. setting. color,
'Fontsize': this. setting. fontSize
})
}
}

$. Fn. MyDesgin = function (options ){
Var beautifier = new Beautifier (this, options );
Beautifier. beautify ();
}
}) (JQuery, window, document)