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. 数据交换格式与SpringIOC底层实现

    1.数据交换格式 1.1 有哪些数据交换格式 客户端与服务器常用数据交换格式xml.json.html 1.2 数据交换格式应用场景 1.2.1 移动端(安卓.iOS)通讯方式采用http协议+JSO ...

  2. git生成ssh公钥方法--远程连接github仓库

    先配置全局的用户名和邮箱 $ git config --global user.name "runoob" $ git config --global user.email tes ...

  3. 2.3 os 模块

    目录 2.3.1 功能 2.3.2 常用方法 2.3.2.1 创建相关 2.3.2.2 切换相关 2.3.2.3 查看相关 2.3.2.4 编辑相关 2.3.2.5 删除相关 2.3.1 功能 2.3 ...

  4. Routing 为 Magento 2 一个重要的部分,本文介绍基本应用

    Routing 为 Magento 2 一个重要的部分,本文介绍基本应用 Magento 2请求的流程 在Magento 2中,请求URL将如下所示: http://example.com/index ...

  5. Python--logging模块不同级别写入到不同文件

    将不同级别的logging 日志信息写入到不同文件 # -*- coding: utf-8 -*- import os import time import logging import inspec ...

  6. TypeScript体系调研报告

    作者简介:aoto 蚂蚁金服·数据体验技术团队 Q:为什么要写这边文章?这篇文章要表达什么? A:我们考虑在SPA应用中使用TS作为开发语言,我们需要一篇系统性介绍TS本身及周边的文章来论证在项目中使 ...

  7. JMeter 的调式工具

    任何的编程工具都会相应的调式工具,JMeter的调式 工具主要有五种: 1.查看结果树:含请求信息.响应信息等 2.HTTP 镜像服务器:HTTP Mirror Server用于查看请求信息 3.De ...

  8. Vue(项目踩坑)_解决vue中axios请求跨域的问题

    一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...

  9. EF CodeFirst系列(7)---FluentApi配置存储过程

    FluentApi配置存储过程 1.EF自动生成存储过程 EF6的CodeFirst开发模式支持给实体的CUD操作配置存储过程,当我们执行SaveChanges()方法时EF不在生成INSERT,UP ...

  10. 从Socket入门到BIO,PIO,NIO,multiplexing,AIO(未完待续)

    Socket入门 最简单的Server端读取Client端内容的demo public class Server { public static void main(String [] args) t ...