一 jquery类级别插件开发
1、
jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});
----------------
2、使用命名空间定义自己的jquery插件:
jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};
采用命名空间的函数仍然是全局函数,调用时采用的方法:
$.myPlugin.foo();
$.myPlugin.bar('baz');
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
二 jquery对象级别插件开发
// plugin definition
$.fn.hilight = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.hilight.defaults, options);
// Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
现在使用者可以包含像这样的一行在他们的脚本里:
//这个只需要调用一次,且不一定要在ready块中调用
$.fn.hilight.defaults.foreground = 'blue';
接下来我们可以像这样使用插件的方法,结果它设置蓝色的前景色:
$('#myDiv').hilight();
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
结论:
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性,方法
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 创建一个闭包
(function($) {
// 插件的定义
$.fn.hilight = function(options) {
debug(this);
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// 私有函数:debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// 定义暴露format函数
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
// 插件的defaults
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
// 闭包结束
})(jQuery);
相关推荐
教你如何做一个自己的jQuery插件,jQuery扩展
Write Less, Do More, 超详细的jQuery学习笔记,深入了解jQuery的语法,为前段开发带来更多的方便
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
jQuery的表调整大小简单的jQuery插件,用于调整HTML表的大小依存关系jQuery,可能是较新的版本之一用法// Options shown below are default values$('table').eeResizable({ tolerance: 8, // Pixels within column ...
jQuery插件类型: 1. jQuery方法: 大部分jQuery插件都是这种类型的插件,由于这种插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器优势。 2. 全局函数: 也可以...
====滑块.js ==== 描述:滑块的jQuery插件版本:1.0 日期 : 2013-10-15 14:00:09 版本:1.0.1 日期 : 2013-10-16 10:52:05 笔记 : 。 修复了 mouseout 事件的错误 . Fixed the bug for the clone first li node . ...
jQuery 屏幕插件这个插件是一种测试给定元素(或其中的一部分)是否在当前视口范围内的简单方法。 您可以将它用于各种事情,例如延迟动画和其他 javascript 的执行直到元素对用户可见 - 无论他们的设备或屏幕大小...
NULL 博文链接:https://langhua9527.iteye.com/blog/549632
简单实用的jQuery星级评分插件lq-score.zip
NULL 博文链接:https://121088825.iteye.com/blog/2175060
从jQuery的概述开始,包含jQuery选择器,包装集操作,DOM编程,事件编程,jQuery与ajax集成,常用的工具API,jQuery插件开发,内核研究以及常用插件知识。
jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用...
两一直在看Jquery插件的开发,上次在网上找了相关的文章,不过后来没记来,再去找就难了。
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
仿Facebook选择表情符号jQuery插件.zip
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
一个 jQuery 插件,使 div 跟随用户滚动并保持在其边界上。 用法 $('.div-wrapper').restrictedStickyScroll(); 选项 childObject:插件将尝试使第一个 div 子节点具有粘性,但您可以使用此选项进行更改 缓动(默认...