JQuery学习收拾-自定义插件

JQuery学习整理--自定义插件

//1、自定义对象级别的插件
<script type="text/javascript"? src="Plugin/jquery.lifocuscolor.js"></script>//自定义插件文件
<script type="text/javascript">
??????? $(function() {
??????????? $("#u1").focusColor("red");//调用自定义的插件
??????? })
</script>
<ul id="u1">
??? <li><span>张三</span><span>男</span></li>
??? <li><span>李四</span><span>女</span></li>
??? <li><span>王五</span><span>男</span></li>
</ul>
-------------------jquery.lifocuscolor.js----------------------------
/// <reference path="jquery-1.4.2-vsdoc.js"/>
/// <reference path="jquery-1.4.2.js"/>
/*------------------------/
功能：设置列表中表项获取鼠标焦点时的背景色
参数：li_col【可选】 鼠标所在表项行的背景色
返回：原调用对象
示例：$("ul").focusColor("red");
/------------------------*/
; (function($) {
??? $.fn.extend({
??????? "focusColor": function(li_col) {
??????????? var def_col = "#ccc"; //默认获取焦点的色值
??????????? var lst_col = "#fff"; //默认丢失焦点的色值

??????????? //如果设置的颜色不为空，使用设置的颜色，否则为默认色
??????????? li_col = (li_col == undefined) ? def_col : li_col;

??????????? $(this).find("li").each(function() { //遍历表项<li>中的全部元素
??????????????? $(this).mouseover(function() { //获取鼠标焦点事件
??????????????????? $(this).css("background-color", li_col); //使用设置的颜色
??????????????? }).mouseout(function() { //鼠标焦点移出事件
??????????????????? $(this).css("background-color", "#fff"); //恢复原来的颜色
??????????????? })
??????????? })
??????????? return $(this); //返回jQuery对象，保持链式操作
??????? }
??? });
})(jQuery);

//2、自定义类级别的插件(如加和$.addNum 和 减差$.subNum)
<script type="text/javascript"? src="Plugin/jquery.twoaddresult.js"></script>
<script type="text/javascript">
??????? $(function() {
??????????? $("#Button1").click(function() {
??????????????? $("#Text3").val(
??????????????? $.addNum($("#Text1").val(),$("#Text2").val()));
??????????? }); //调用自定义的插件计算两数之和
??????????? $("#Button2").click(function() {
??????????????? $("#Text6").val(
??????????????? $.subNum($("#Text4").val(), $("#Text5").val()));
??????????? }) //调用自定义的插件计算两数之差
??????? })
</script>
-----------------------------jquery.twoaddresult.js-------------------------
/// <reference path="jquery-1.4.2-vsdoc.js"/>
/// <reference path="jquery-1.4.2.js"/>
/*------------------------/
功能：计算二个数字相加或相减的结果
参数：数字p1,p2
返回：两数相加后的结果
示例：$.AddNum(1,2);$.subNum(3,1)；
/------------------------*/
; (function($) {
??? $.extend({
??????? "addNum": function(p1, p2) {
??????????? //如果传入的数字不为空，使用传入的数字，否则为0
??????????? p1 = (p1 == undefined) ? 0 : p1;
??????????? p2 = (p2 == undefined) ? 0 : p2;
??????????? var intResult = parseInt(p1) + parseInt(p2);
??????????? return intResult;
??????? },
??????? "subNum": function(p1, p2) {
??????????? //如果传入的数字不为空，使用传入的数字，否则为0
??????????? var intResult = 0;
??????????? p1 = (p1 == undefined) ? 0 : p1;
??????????? p2 = (p2 == undefined) ? 0 : p2;
??????????? if (p1 > p2) { //如果传入的参数前者大于后者
??????????????? intResult = parseInt(p1) - parseInt(p2);
??????????? }
??????????? return intResult;
??????? }
??? });
})(jQuery);