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:匿名函数的实参

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

插件

;(function($){

    $.fn.extend({

        "color":function(value){

            if(value==undefined){

                return this.css('color');

            }else{

                this.css('color',value);

            }

        }

    });

})(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

后台管理系统

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

粘贴代码 后台 百度

邮箱注册页面

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

邮箱注册 代码 (百度)

jQuery第七章插件的编写和使用的更多相关文章

  1. IDEA第七章----插件

    idea的另一个可爱之处,就是它的强大的插件,下面我以CodeGlance插件为例,这个可以快速定位代码 第一节:安装插件 ● All plugins 显示所有插件. ● Enabled 显示当前所有 ...

  2. jQuery 第七章 实例方法 位置图形

    位置坐标图形大小相关方法: .offset() .position() .scrollTop() .scrollLeft() .width() .height() .innerWidth() inne ...

  3. Jquery插件的编写和使用

    第七章 Jquery插件的编写和使用    插件的定义: 插件也称为扩展,是一种遵循一定规范的应用程序接口编写出来的程序. 下面是Jquery插件的编写很使用:要查看请点击:Jquery插件的编写很使 ...

  4. Knockout应用开发指南 第七章：Mapping插件

    原文:Knockout应用开发指南 第七章:Mapping插件 Mapping插件 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些 ...

  5. jQuery插件的编写和使用 <思维导图>

    以下是jQuery插件的编写和使用的思维导图,全屏观看,请点击:jQuery插件的编写和使用

  6. jQuery系列 第七章 jQuery框架DOM操作

    第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...

  7. jQuery用面向对象的思想来编写验证表单的插件

    本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...

  8. 读《编写可维护的JavaScript》第七章总结

      第七章 事件处理 7.1 典型用法 作者首先给了个我们一个处理事件的方法.看起来也没啥俩样,不过后来给出的优化方法很值得学习: // 不好的写法 function handleClick(even ...

  9. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

随机推荐

  1. java异常处理规范

    异常处理的优势[存在意义]:异常检测者有检测出异常的能力,但不知道在出现该异常的情况下应该怎么处理.故库方法一般会抛出异常给调用者来处理.所以总结而言,异常处理的优势就是,将处理错误(调用者处理)从检 ...

  2. CodeForces 1151C Problem for Nazar

    题目链接:http://codeforces.com/problemset/problem/1151/C 题目大意: 有一个只存奇数的集合A = {1, 3, 5……2*n - 1,……},和只存偶数 ...

  3. golang 数组、切片、map

    一.数组(类似python的list) 数组的长度一旦定义了就不能动态增长.并且存储的数据类型必须相同. 创建方法: var 数组名 [长度]数据类型 例如: package main import ...

  4. Window下搭建X5本地应用打包服务器

    总的来说就是安装虚拟机,装载VM文件 X5打包服务器(App-Builder)是通过服务方式把X5开发工具(Studio)创建的本地应用进行打包和数字签名,开发者不用单独构建原生代码的编译环境,方便开 ...

  5. python之生成器和列表推导式

    一.生成器函数 1.生成器 就是自己用python代码写的迭代器,生成器的本质就是迭代器(所以自带了__iter__方法和__next__方法,不需要我们去实现). 2.构建生成器的两种方式 1,生成 ...

  6. socketserver和socket的补充(验证客户端合法性)

    一.socket的补充 1.参数 socket.socket(family=AF_INET,type=SOCK_STREAM,proto=0,fileno=None) 参数说明: family 地址系 ...

  7. eclipse报错 : One or more constraints have not been satisfied.

    当eclipse进行报错时,但是不影响运行时,这种错误一般是编译时的问题 进行修改3个地方,即可完成 一 :  进行修改这三个地方的配置文件,都改成你统一的jdk版本,和你用的Dynamic Web ...

  8. Magento2 API 服务合同设计模式 依赖注入 介绍

    公共接口和API 什么是公共界面? 一个公共接口是一组代码,第三方开发者可以调用,实现或构建一个 插件 .Magento保证在没有重大版本更改的情况下,此代码在后续版本中不会更改. 模块的公共接口 标 ...

  9. markdown笔记实现页内目录跳转

    方法一 使用Markdown的语法来增加跳转链接:[名称](#id). 1. 只要()内 #号 后面的内容和锚点处标签内的id对应即可,可以任意使用标签支持html语法 2. id不可以有括号和空格, ...

  10. 通过crontab调度java -jar任务提示"nohup: failed to run command `java': No such file or directory"

    通过crontab无法运行,提示如标题的信息: 但直接在终端控制台执行sh和java -jar都可以: 网上给的提示解决方法,在.sh文件开始上面加上 source /etc/profile 然后cr ...