开发自己需要的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是一个强大的表单验证工具,它可以帮助开发者轻松地对用户输入进行验证,确保数据的正确性和完整性。这个插件通过设置不同的参数,允许开发者自定义错误信息,提供更加友好的用户体验。 ...
6. **插件生态**:jQuery拥有庞大的插件生态系统,涵盖了表单验证、图表绘制、轮播图、日期选择器等各种功能,极大地扩展了jQuery的功能范围。 7. **兼容性**:jQuery致力于浏览器兼容性,使得开发者无需关注不同...
这里提到的"jqurey 插件-很好的树和tab效果"是针对jQuery的一些特定插件,旨在增强网站的用户体验,提供美观且功能丰富的树形视图和选项卡组件。 1. **simpleTree**:这是一个jQuery插件,用于创建可折叠的树状结构...
jQuery是一个广泛使用的JavaScript库,它的设计目的是简化HTML文档遍历和操作、事件处理、动画以及Ajax交互。...而且,jQuery拥有丰富的插件生态,进一步扩展了其功能,使其成为前端开发中的一个重要工具。
这款插件是针对jQuery进行的扩展,它解决了原生jQuery弹出框在不同浏览器上兼容性问题,提升了用户体验。ExfJsPopup1.4的特点在于其高度可定制化,可以调整弹出框的样式、位置、大小,甚至添加复杂的动态效果,满足...
学习如何选择、引入和使用这些插件可以极大地扩展jQuery的功能。 8. **实践项目**:理论学习后,通过实际的小项目来巩固和应用所学知识,例如创建一个响应式的导航菜单,或者实现一个简单的图片幻灯片展示,这样...
在jQuery中实现弹框,通常会使用`$.fn.extend()`方法来扩展jQuery对象,创建自定义的插件。例如,我们可以定义一个名为`dialog`的函数,用于创建弹框: ```javascript $.fn.dialog = function(options) { // ... }...
通过阅读源代码,我们可以发现其内部实现机制,包括如何扩展jQuery对象,添加新的方法,以及如何处理各种配置选项和动画效果。 总结来说,`jqurey插件隐藏显示层`涉及的核心知识点有:jQuery库的使用、`toggle`方法...
对于开发者来说,这是一个很好的学习资源,可以通过查看修改后的代码,了解如何根据实际需求去扩展和定制jQuery Easy UI,提升自己的前端开发技能。 总的来说,这个自定义版本的jQuery Easy UI 1.1.1展示了前端开发...
5. **选择器扩展**:jQuery扩展了许多CSS选择器,如`:first`, `:last`, `:even`, `:odd`, `:gt()`, `:lt()`, `:contains()`, `:not()`, `:has()`, `:parent()`等,使得选取特定元素变得更为方便。 6. **链式操作**...
3. **优化和扩展** - **懒加载**:为了进一步提高性能,可以采用懒加载策略,只在用户滚动到接近底部时才加载下一页数据。 - **跳转页码**:添加输入框,允许用户直接输入页码进行跳转。 - **分页状态保存**:...
jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作和Ajax交互等任务,使得开发者能够更高效地编写代码。...记得在编写代码时保持简洁和高效,以便于未来的维护和扩展。
在这个特定的场景中,"OpenLayers附加js支持"意味着我们不仅在使用OpenLayers的基础功能,还可能引入了额外的JavaScript库来扩展其功能。 jQuery 是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和...
UploadProgress 插件则是基于 jQuery 的扩展,它专门针对文件上传过程中的进度显示进行优化。在传统文件上传中,用户通常无法得知文件上传的进度,只能等待直到文件完全上传。UploadProgress 插件通过监听 AJAX 上传...
此外,jQuery还提供了插件机制,使得开发者可以扩展其功能。通过研究官方文档和实践,可以掌握如何创建自己的jQuery插件,以满足特定需求。 总之,这个jQuery学习资料包为初学者提供了一个全面的学习资源,包括基础...
这本书的高清版本提供了一种舒适的阅读体验,同时附带了书中源码和扩展训练,使得读者能够在实践中巩固理论知识。 jQuery是一个广泛使用的JavaScript库,它的核心功能包括DOM操作、事件处理、动画效果以及Ajax交互...
jQuery的可扩展性极强,通过`.fn.extend()`可以创建自定义方法,实现插件。许多流行的插件,如Bootstrap、jQuery UI等,都是基于此机制构建的。 七、源码分析 深入研究《锋利的jQuery第二版》源码,可以了解其内部...
jQuery CheckTree 是一个针对 jQuery 的扩展,它允许开发者创建可选的、可折叠的树形结构,支持通过 AJAX 动态加载子节点,极大地提升了用户体验。该插件的主要特点包括: - **复选框支持**:每个树节点都可以设置...
jQuery UI,作为jQuery框架的一个强大扩展,为Web开发者提供了丰富的用户界面组件和交互功能。本文将深入探讨jQuery UI 1.8.23这个官方最新版本,以及如何下载、安装和使用其中的资源。 首先,jQuery UI 1.8.23是该...