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);

JQuery学习收拾-自定义插件

相关推荐