自定义jQuery插件

最新推荐文章于 2024-03-19 19:45:10 发布

yven_style

最新推荐文章于 2024-03-19 19:45:10 发布

阅读量1.1k

点赞数

分类专栏： JavaScript CSS HTML

本文链接：https://blog.csdn.net/yangwen123222/article/details/79024998

版权

JavaScript 同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

HTML

17 篇文章 0 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

1、在编写对象级别的插件时，使用jQuery.fn.extend()方法进行功能扩展；针对类级别的插件，使用jQuery.extend()方法进行扩展。

2、

（1）对象级别插件开发实例:

/*------------------------------------------------------------/
功能：设置列表中表项获取鼠标焦点时的背景色
参数：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);

使用：

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

（2）类级别的插件实例：

/*------------------------------------------------------------/
功能：计算二个数字相加或相减的结果
参数：数字p1,p2
返回：两数相加后的结果
示例：$.AddNum(1,2);
/------------------------------------------------------------*/
; (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);

使用：

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

<body>
    <div class="divFrame">
         <div class="divTitle">
              类级别的插件
         </div>
         <div class="divContent">两数相加：
             <input id="Text1" type="text" class="txt" />
             +
             <input id="Text2" type="text" class="txt" />
             =
             <input id="Text3" type="text" class="txt" />
             <input id="Button1" type="button" 
                    value="等于" class="btn" />
             <hr />两数相减：
             <input id="Text4" type="text" class="txt" />
             - 
             <input id="Text5" type="text" class="txt" />
             =
             <input id="Text6" type="text" class="txt" />
             <input id="Button2" type="button" 
                    value="等于" class="btn"/>
         </div>
     </div>
    
</body>

yven_style

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义jQuery插件

1、在编写对象级别的插件时，使用jQuery.fn.extend()方法进行功能扩展；针对类级别的插件，使用jQuery.extend()方法进行扩展。2、（1）对象级别插件开发实例:/*------------------------------------------------------------/功能：设置列表中表项获取鼠标焦点时的背景色参数：li_col【可选】
复制链接

扫一扫