`
aiyan2001
  • 浏览: 71721 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jqurey 扩展

 
阅读更多

开发自己需要的jQuery插件,看个示例说明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
/*
jQuery插件的开发包括两种:
一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,
另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发
类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:
*/
//1.1定义一个全局函数
jQuery.foo = function() {
alert('添加一个新的全局函数');
}
//定义多个全局函数
jQuery.bar = function() {
alert('再增加一个全局函数');
}
//1.2使用extend定义全局函数
jQuery.extend({
foo1:function() {
alert('extend 定义全局函数1');
},
bar1:function() {
alert('extend 定义全局函数2');
}
});
//1.3 使用命名空间定义函数
jQuery.plugin = {
foo2:function() {
alert('使用namespace定义函数');
}
}

$(function(){
$.foo();
$.bar();
$.foo1();
$.bar1();
$.plugin.foo2();
});

/*
2、对象级别的插件开发
对象级别的插件开发需要如下的两种形式:
*/
//形式一
(function($){
$.fn.extend({
foo3:function() {
alert('对象级别插件extend方式1');
},
bar3:function() {
alert('对象级别插件extend方式2');
}
})
})(jQuery);

//形式二
(function($){
$.fn.foo4 = function() {
alert('对象级别插件fn方式');
}
})(jQuery);

//接收参数来控制插件的行为
(function($){
$.fn.bar4 = function(options) {
var defaults = {aaa:'1',bbb:'2'};
var opts = $.extend(defaults, options);
alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
}
})(jQuery);

//提供公有方法访问插件的配置项值
(function($){
$.fn.foo5 = function(options) {    
var opts = $.extend({}, $.fn.foo5.defaults, options);
alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
}
$.fn.foo5.defaults = {aaa:'1',bbb:'2'};
})(jQuery);

//提供公有方法来访问插件中其他的方法
(function($){
$.fn.bar5 = function(options) {
$.fn.bar5.alert(options);
}
$.fn.bar5.alert = function(params) {
alert(params);
}
})(jQuery);

$(function(){
$('#test').foo3();
$('#test').bar3();
$('#test').foo4();
$('#test').bar4();
$('#test').bar4({aaa:'3'});
$('#test').bar4({aaa:'3',bbb:'4'});
$('#test').foo5();
$('#test').foo5({aaa:'5',bbb:'6'});
$('#test').bar5('aaaa');
});
</script>
</head>

<body>
<div id="test"></div>
</body>
</html>

更多可以参看:jQuery基础教程

分享到:
评论

相关推荐

    JQuery扩展插件Validate 3通过参数设置错误信息

    最终显示在页面上的错误分为两种:第一种是默认错误信息,该信息已经被定义在插件中了,可以手动修改。

    锋利的jquery_第二版(高清)+书中源码及扩展训练

    锋利的jquery_第二版(高清)+书中源码及扩展训练。高清阅读,实战演练。

    犀利开发jQuery内核详解与实践

    本书循序渐进地讲解了jQuery高效开发的方法和技巧,内容包括jQuery框架的设计模式和思路、Sizzle选择器的构成和工作机制、DOM文档操作、事件处理、动画设计、Ajax异步通信、插件扩展和辅助工具等。执行效率是...

    jQuery完全实例.rar

    jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...

    JQuery数据校验插件

    使用JQuery开发的一套前台js校验插件,使用layer的tip做错误提示,支持配置校验,...内置多种校验规则,可扩展校验规则,使用方便简单,详细介绍参考文章https://blog.csdn.net/qq_28254093/article/details/82255923

    JQurey Validation表单验证使用详解

    是一款优秀的插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。本文就是通过讲解这个实例来理解Validation的应用。 本实例涉及到的验证有: 用户名:长度、字符验证,重复性...

    jquery.superdom:jQuery插件,用于非XHTML命名空间(如SVG)中的DOM操作

    另外,我想扩展jQuery而不是重写它(如 )。 用法 选择和操作DOM节点: $ ( 'circle' ) . addClass ( 'test test2' ) . attr ( { cx : 10 , cy : 50 } ) ; 在其他名称空间中创建DOM节点: $ ( '&lt;svg:text...

    JavaScript实现复制内容到粘贴板代码

    最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里。下面小编给大家分享JavaScript实现复制内容到粘贴板代码,需要的朋友参考下

    ztree加载完成后显示勾选节点的实现代码

    在开源的作用下,zTree 越来越完善,目前已经拥有了不少粉丝,并且今后还会推出更多的 zTree 扩展功能库,让 zTree 更加强大。 特点 ● zTree v3.0 将核心代码按照功能进行了分割,不需要的代码

    AnchorSystem:分支机构或集团新闻发布系统

    分支机构或集团新闻发布系统系统要求PHP 5(5.5-5.6) PHP 5 PDO扩展PHP GD扩展客观的适合那些对学习使用php mysql jqurey进行Web写作感兴趣的人。数据库连接和安装编辑文件。 app/config/db....

    jQuery封装的获取Url中的Get参数示例

    封装成jQuery扩展包. 代码如下: (function($){ $.extend({ /** * url get parameters * @public * @return array() */ urlGet:function() { var aQuery = [removed].href.split(“?”);//取得Get参数 var

    锋利的jQuery_高清_书签.part2

    1.4.2 jQurey对象和DOM对象的相互转换 1.4.3 实例研究 1.5 解决jQuery和其他库的冲突 1.6 jQuery开发工具和插件 1.7 小结 第2章 jQuery选择器 2.1 jQuery选择器是什么 2.2 jQuery选择器的优势 2.3 jQuery选择器 ...

Global site tag (gtag.js) - Google Analytics