jQuery第七章插件的编写和使用

时间:2022-10-13 19:21:31

1.本章目标

  编写jquery插件

2.插件

  也称为扩展,是一种按照一定的规范的应用程序接口编写出来的程序

  插件的目标是给已有的一系列函数做一个封装,以便在其他的地方复用,方便维护和开发效率

3.jquery插件的种类

  1.封装对象方法的插件

    将对象方法封装起来,用于选择器获取的对象进行操作

    比如$("#myForm").attr('action','xxxServlet')

    比如:jQuery.trim()

  3.选择器插件

    扩展我们自己的选择器

4.jquery插件的编写

  1.jquery插件的命名:jquery.插件名.js

  2.jquery插件的代码放入:

    ;(function($){

    //第一种插件

    $.fn.extend({

      //逻辑代码

    })

    //第二三种插件

    $.extend({

      //逻辑代码

    })

     })(jquery);

    补充:

      ;--为了更好的兼容性

      $:匿名函数的形参

      jquery:匿名函数的实参

完成:设置和获取选定元素的颜色

插件

jQuery第七章插件的编写和使用jQuery第七章插件的编写和使用
;(function($){
    $.fn.extend({
        "color":function(value){
            if(value==undefined){
                return this.css('color');
            }else{
                this.css('color',value);
            }
        }        
    });
})(jQuery);
插件代码
jQuery第七章插件的编写和使用jQuery第七章插件的编写和使用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript" src="js/jquery.color.js" ></script>
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){
                $("div").color("red");
            })
        })
    </script>
    </head>

    <body>
        <div>测试颜色的插件</div>
        <button>改变div的颜色</button>
    </body>
</html>
设置和获取选定元素的颜色

5.easyui

后台管理系统

jQuery第七章插件的编写和使用jQuery第七章插件的编写和使用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/default/easyui.css">
            <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/icon.css">
            <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/demo/demo.css">
            <script type="text/javascript" src="jquery-easyui-1.7.0/jquery.min.js"></script>
            <script type="text/javascript" src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
    </head>
    <body class="easyui-layout">
        <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">
            欢迎使用XXX后台管理系统
        </div>
        <div data-options="region:'west',split:true,title:'功能菜单'" style="width:150px;">
            <div class="easyui-accordion" data-options="fit:true,border:false">
                <div title="基础管理" >
                    基础管理
                </div>
                <div title="核心管理" >
                    核心管理
                </div>
                <div title="其余管理">
                    其余管理
                </div>
            </div>
        </div>
        <div data-options="region:'east',split:true,collapsed:true,title:'看不见我'" style="width:100px;padding:10px;">
            你看不见我
        </div>
        <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">
            ©2019 李文正, 中国重庆. All rights reserved.
        </div>
        <div data-options="region:'center',title:'中心内容'">
            
        </div>
    </body>
</html>
粘贴代码 后台 百度

邮箱注册页面

jQuery第七章插件的编写和使用jQuery第七章插件的编写和使用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/default/easyui.css">
            <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/icon.css">
            <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/demo/demo.css">
            <script type="text/javascript" src="jquery-easyui-1.7.0/jquery.min.js"></script>
            <script type="text/javascript" src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
            <script type="text/javascript" src="jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
            
    </head>
    <body>
        <h2>Basic Form</h2>
        <p>Fill the form and submit it.</p>
        <div style="margin:20px 0;"></div>
        <div class="easyui-panel" title="New Topic" style="width:400px">
            <div style="padding:10px 60px 20px 60px">
            <form id="ff" method="post">
                <table cellpadding="5">
                    <tr>
                        <td>Name:</td>
                        <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
                    </tr>
                    <tr>
                        <td>Email:</td>
                        <td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
                    </tr>
                    <tr>
                        <td>Subject:</td>
                        <td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
                    </tr>
                    <tr>
                        <td>Message:</td>
                        <td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:60px"></input></td>
                    </tr>
                    <tr>
                        <td>Language:</td>
                        <td>
                            <select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
                        </td>
                    </tr>
                </table>
            </form>
            <div style="text-align:center;padding:5px">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
            </div>
            </div>
        </div>
        <script>
            function submitForm(){
                $('#ff').form('submit');
            }
            function clearForm(){
                $('#ff').form('clear');
            }
        </script>
    </body>
</html>
邮箱注册 代码 (百度)