Here only explains how to write their own plug-ins, as to what functions to achieve, to vary from person to person ... Okay, here we go.
jquery plug-ins are mainly divided into three kinds
1, encapsulating the object method of Plug-ins
2, encapsulating the global function of Plug-ins
3, the extension selector plug-in
Here only the first two kinds of writing, that is more common.
Most plug-ins are written in this form:
Copy Code code as follows:
(function ($) {
/* Place code here * *
}) (JQuery);
The advantage is that the function can still use $ as an alias for jquery without affecting other libraries using $
jquery provides two extensions for writing Plug-ins
$.fn.extend ({}); used to extend the first type of
$.extend ({}); Used to extend the second type of
Below is a screenshot of the implementation effect and the code
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<style type= "Text/css" >
Li {border:1px solid #000; cursor:pointer; width:200px; display:block;}
</style>
<script src= ". /scripts/jquery-1.4.1.min.js "type=" Text/javascript "></script>
<script type= "Text/javascript" >
(function ($) {
$.fn.extend ({
"CHGSC": function (Options) {
Options = $.extend ({fontsize: "100px", Color: "Red"}, Options); Here we use the $.extend method to extend an object
Return This.hover (function () {//return in order to maintain the chain operation of jquery
$ (this). css ({"FontSize": Options. FontSize, "Color": Options. Color});
}, function () {
$ (this). css ({"FontSize": "", "Color": "});
});
}
});
$.extend ({
' Urlparam ': function () {
var pageurl = Location.search;
if (Pageurl!= "")
return Pageurl.slice (1);
Else
Return "no parameters";
}
});
}) (JQuery);
$ (function () {
$ ("Li"). CHGSC ({fontsize: "130px"});
Alert ($.urlparam ());
});
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
