自定义jQuery插件

最新推荐文章于 2022-06-21 20:05:35 发布

我是曾老师

最新推荐文章于 2022-06-21 20:05:35 发布

阅读量178

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_41097820/article/details/82771315

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 插件机制简介

往jquery类库里面去扩展方法，这类方法就是jquery插件

2. json的三种格式

在学习自定义jQuery插件之前，首先得了解json字符串的三种格式。

1.1 对象 {sid: 's001', sname: '张三' } (理解成java中的Map集合就ok了) 调用时使用变量名点键名

1.2 列表/数组 ['a' , 'b' , 'c'] (可理解成数组) 用数组的调用相同

1.3 混合模型 {sid: 's001', sname: '张三' , shoppy: ['a' , 'b' , 'c']} (也可理解为java中的Map集合，只是前两种和在了一起)

（注：调试json字符串时 'alert();' 无效，需使用 'console.log();' ,F12的console栏可看见值）

3.$.extend和$.fn.extend

3.1 $.extend是用来扩充jQuery类属性或者方法所用

3.1.1 $.extend：对象的扩展(或继承):

写法： $.extend(obj1,obj2,obj3);

后面的对象扩充第一个对象，之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性，会继续扩充。（说白了就和Map集合的特征有点像, 键相同会覆盖，不相同则添加）

3.1.2 $.extend：方法的扩展:

写法： $.extend(

methodName : function(a){ 方法体 }

);

调用时：$.methodName(a);

3.2 $.fn.extend是用来扩充jQuery实例属性或者方法所用

3.2.1 $.fn.extend：对象的扩展(或继承): 同 $.extend；

3.2.2 $.fn.extend方法的扩展；

写法：$.fn.extend（

methodName :function(a){ 方法体 }

）；

调用： $("table").methodName(a); (注：实例方法需得到控件对象，才能调用)

4. jQuery插件的添加
其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中

注意事项：

4.1 规范：

4.1.1 命名 jquery.xxx.js

4.1.2 目录 WebContent 目录下的jQuery文件夹内专门用于放jQuery插件

4.1.3 js文件的调用以及css文件的调用:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<link href="${pageContext.request.contextPath}/jQuery/table/css/cgColor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jQuery/table/js/cgColor.js"></script>

（注：此文件放于WebContent目录下的jsp文件夹下的common文件夹内。！！！规范！！！）

以下代码为jsp页面调用公用jsp页面的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ include file="/jsp/common/head.jsp" %>
<!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">
<title>Insert title here</title>
</head>
	<body>
	
	</body>
</html>

完！

我是曾老师

关注

0
点赞
踩
0

收藏

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

1. 插件机制简介往jquery类库里面去扩展方法，这类方法就是jquery插件2. json的三种格式在学习自定义jQuery插件之前，首先得了解json字符串的三种格式。1.1 对象 {sid: 's001', sname: '张三' } (理解成java中的Map集合就ok了) 调用时使用变量名点键名1.2 列表/数组 ['a' , 'b' ...
复制链接

扫一扫