jQuery插件学习(一)
由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了。所以这段时间会对插件进行一些研究,现将学习的一些重要内容记录下来,供那些像我一样的初学者借鉴下。嘻嘻。
(一)jQuery为开发插件提拱了两个方法
jQuery.extend(); 为扩展jQuery类本身.为类添加新的方法;
jQuery.fn.extend();给jQuery对象添加方法;
它们之间的区别是:jQuery是一个类,jQuery.extend(),是扩展的jQuery这个类,变成了jQuery这个类本身的方法,这个扩展也就是所谓的静态方法。
只跟这个类本身有关。跟你具体的实例化对象是没关系滴。
例如:
(function($) {
$.extend({
minValue : function(a,b){
return a>b? b:a;
}
})
})(jQuery);
要调用这个方法:$.minValue(2,3);
jQuery.fn.extend拓展的是jQuery对象(原型的)的方法,原型的作用就是给这个类的每一个对象都添加一个统一的方法,对象是啥?就是类的实例化嘛,例如
$("#abc") 就是一个实例化的jQuery对象。假设xyz()是拓展的方法:$('selector').xyz();要是这么用$.xyz();是会出错滴。
jQuery.extend()这个方法,主要是用来拓展个全局函数啦,例如$.ajax(),$.getScript(url,callback) 这些jQuery自带的方法这种,大部分插件都是用jQuery.fn.extend()。
附插件框架:
(function($){
$.fn.yourPluginName = function(options){
//各种属性和参数
var defaults = { } ;
var options = $.extend(defaults, options);
return this.each(function(){
//插件的实现代码
});
};
})(jQuery);
return this.each()中return的作用:each()方法返回jQuery对象,所以这样就可以继续链式操作了。
(二)jQuery中的this和$(this)
this其实是指向dom对象或当前元素,$(this)是jquery对象,当你用的方法是jquery时,就用$(this),如果是JS方法,就用this。
例如:
var node = $('#id');
node.click(function(){
this.css('display','block'); //报错 this是一个html元素,不是jquery对象,因此this不能调用jquery的css()方法
$(this).css('display','block'); //正确 $(this)是一个jquery对象,不是html元素,可以用css()方法
this.style.display = 'block'; //正确 this是一个html元素,不是jquery对象,因此this不能调用jquery的css()方法,但是可以用javascript来更改style属性
});
jQuery插件学习(一)的更多相关文章
- Jquery插件学习
前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...
- jquery插件学习之元素顶部悬浮
jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- jquery插件 - 学习笔记 (插件参数及函数的调用)
今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...
- JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...
- jQuery插件学习笔记
近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...
- [置顶] JQuery插件学习教程
这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...
- jquery 插件学习
练习jquery上的一个插件编写 1.标准的3个基本内容,根目录里面创建2个文件夹(存放css和js)和1个html页面文件: 2.测试的主html页面代码 <!DOCTYPE html> ...
- jQuery插件学习基础
1.给jQuery添加全局的函数: $.zgz={ fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个 ...
- jQuery插件学习之选项卡Tab
在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...
随机推荐
- Android退出程序
public class ExitApplication extends Application { private static ExitApplication instance ; List< ...
- EXC_BREAKPOINT (code=EXC_I386_BPT, subcode=0x0)
EXC_BREAKPOINT (code=EXC_I386_BPT, subcode=0x0) 原因:重复的release了某个对象
- laravel实现发送qq邮件
首先修改config/mail.php 'from' => [ 'address' => 'hello@example.com', 'name' => 'Example', ], 修 ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- SQL使用单引号
SQL> select 'xxxx'oooo' from dual; ERROR: ORA-01756: quoted string not properly terminated SQL> ...
- bzoj 1193
http://www.lydsy.com/JudgeOnline/problem.php?id=1193 大范围贪心,小范围宽搜. 膜拜大神 http://blog.csdn.net/u0129155 ...
- C(m,n)%P
program1 n!%P(P为质数) 我们发现n! mod P的计算过程是以P为周期的的,举例如下: n = 10, P = 3 n! = 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 ...
- Hadoop开发遇到的问题之reduce卡住
遇到的问题描述:在hadoop上面执行程序,程序运行之后能够正常执行.一切似乎都是正常的,然而过了一段时间之后程序便开始阻塞直到程序超时退出(如下). 14/08/19 21:17:51 INFO m ...
- Exchange Server 2010/2013功能差异
- iOS 语音识别使用讯飞报错
You must rebuild it with bitcode enabled(Xcode setting ENABLE_BITCODE), obtain an updated library fr ...