• jQuery插件


    参考:jQuery权威指南
    jQuery初步
    jQuery选择器
    jQuery操作dom
    jQuery操作dom事件
    jQuery插件
    jQuery操作Ajax
    jQuery动画与特效
    jQuery实现导航栏
    jQuery实现点击式选项卡
    jQuery实现select三级联动

    jQuery插件分类:

    1.封装方法插件(常用)

    是对象级别的插件,通过jQuery选择器获取对象,然后为对象添加方法。即可使用,例如:$("li").foucsColor();

    编写简单,容易调用。

    2.封闭函数插件

    是类级别的插件,就是可以直接给jQuery添加静态方法。类似于$.ajax(),$.trim();

    3.选择器插件(很少用)


    插件开发要点:

    1.插件名称必须遵循jQuery.[插件名称].js,例如:jQuery.newplugin.js

    2.对象级别插件,使用jQuery.fn.extend()方法进行扩展

      类级别插件,使用jQuery.extend()方法进行扩展

    3.结尾都必须以;结尾

    4.插件内部可以使用this来获取元素,this.each遍历全部元素

    5.为了保证jquery原有的能使用方法链的形式调用多个方法,每个插件本身最后比较返回一个jquery对象,也就是this


    插件开发示例:

    1、对象级别插件开发示例:jquery.lifocuscolor.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    /*-----------------------------------/
    功能:设置ul中li的鼠标经过和离开背景色
    参数:【li_col】可选,鼠标所在行的颜色
    返回:原调用的对象
    示例:$("ul").focusColor();  或者$("ul").focusColor("red");
    /-----------------------------------*/
    ;(function($){
        $.fn.extend({
            "focusColor":function(li_col){//focusColor表示插件名称,li_col表示调用该函数时参数
                //插件具体代码开始
                //1.设置默认属性
                var def_col = "#ccc";
                var lst_col = "#fff";
                li_col = (li_col == undefined)?def_col:li_col;
                //2.插件实现代码
                this.find("li").each(function(index, el) {
                    $(this).mousemove(function() {//鼠标经过
                        $(this).css("background-color",li_col);
                    }).mouseout(function() {//鼠标离开
                        $(this).css("background-color","#fff");
                    });
                    return $(this);//返回jQuery对象
                })
                //插件具体代码结束
            }
        })
    })(jQuery);

    测试jquery.lifocuscolor.js插件


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.4.4.js"></script>
    <script type="text/javascript" src="jquery.lifocuscolor.js"></script>
    <script type="text/javascript">
    $(function(){
        // $("#ul").focusColor();//使用默认样式
        $("#ul").focusColor("red");//鼠标经过红色
    });
    </script>
    <title>测试lifocuscolor插件</title>
    </head>
    <body>
      <ul id="ul">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>   
      </ul>
    </body>
    </html>

    默认样式调用结果:


    使用红色调用结果:


    2、类级别插件开发示例:jquery.twoaddresult.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    /*-----------------------------------/
    功能:计算两个数字相加或相减的结果
    参数:数字p1,p2
    返回:原调用的对象
    示例:$.addNum(1,2);  $.subNum(4,2);
    /-----------------------------------*/
    ;(function($){
        $.extend({
            "addNum":function(p1,p2){//两数相加
                p1 = (p1 == undefined)?0:p1;
                p2 = (p2 == undefined)?0:p2;
                var resultInt = parseInt(p1) + parseInt(p2);
                return resultInt;
            },
            "subNum":function(p1,p2){//两数相减
                var resultInt = 0;
                p1 = (p1 == undefined)?0:p1;
                p2 = (p2 == undefined)?0:p2;
                if (p1 > p2) {
                    resultInt = parseInt(p1) - parseInt(p2);   
                };     
                return resultInt;
                return $(this);
            }
        });
    })(jQuery);

    测试twoaddresult插件


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.4.4.js"></script>
    <script type="text/javascript" src="jquery.twoaddresult.js"></script>
    <script type="text/javascript">
    $(function(){
        console.info($.addNum(-2,2));//0
        console.info($.subNum(4,2));//2   
    });
    </script>
    <title>测试twoaddresult插件</title>
    </head>
    <body>    
    </body>
    </html>










  • 相关阅读:
    MyBatis高级查询 存储过程
    MyBatis高级查询 一对多映射
    第20章-使用JMX管理Spring Bean
    第19章-使用Spring发送Email
    第18章-使用WebSocket和STOMP实现消息功能
    第17章-Spring消息
    第16章-使用Spring MVC创建REST API
    第15章-使用远程服务
    基于IKAnalyzer搭建分词服务
    第08章-使用Spring Web Flow
  • 原文地址:https://www.cnblogs.com/meet/p/4748478.html
Copyright © 2020-2023  润新知