由于项目开发需要,经常会用到一些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插件学习(一)的更多相关文章

  1. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  2. jquery插件学习之元素顶部悬浮

    jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  3. jquery插件 - 学习笔记 (插件参数及函数的调用)

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  4. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  5. jQuery插件学习笔记

    近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...

  6. [置顶] JQuery插件学习教程

    这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...

  7. jquery 插件学习

    练习jquery上的一个插件编写 1.标准的3个基本内容,根目录里面创建2个文件夹(存放css和js)和1个html页面文件: 2.测试的主html页面代码 <!DOCTYPE html> ...

  8. jQuery插件学习基础

    1.给jQuery添加全局的函数: $.zgz={  fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个 ...

  9. jQuery插件学习之选项卡Tab

    在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...

随机推荐

  1. python学习第十八天 --错误&异常处理

    这一章节主要讲解python的错误和异常处理 什么是错误和异常?及其区别? 错误: 1.语法错误:代码不符合解释器或者编译器语法. 2.逻辑错误:不完整或者不合法输入或者计算出现问题.   异常:执行 ...

  2. C 语言链表操作例程 (待完善)

    #include<stdio.h>#include<malloc.h>#include<conio.h>#include<stdlib.h>#inclu ...

  3. MVC 中引入Jquery文件的几种方法

    方法1: <script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/ ...

  4. 安卓 eclipse项目创建

    一. 创建项目工程 1.  点击 file -> new -> Android Application project -> 2.  创建工程项目名字   自己命名 (注: 不要出现 ...

  5. ios如何判断键盘是否已经显示

    ios如何判断键盘是否已经显示   在群里看到有人问:ios如何判断键盘已经显示在界面上. 其实这个解决很简单: 写一个单例来管理键盘的状态. 这个单例在初始化方法init种监听2个事件,分别是 UI ...

  6. IC卡接口芯片TDA8007的读写器设计

    摘要:阐述T=0传输协议,给出IC卡读写器中使用的IC卡APDU指令流程和原理框图:重点介绍其中的IC卡接口芯片Philips的TDA8007,给出通过TDA8007对CPU IC卡上下电过程.具体程 ...

  7. 智能卡安全机制比较系列(六) TimeCOS

    TimeCOS是握奇公司推出的智能卡操作系统,也可以说是国内早期自己开发的为数不多的几款COS之一.当然随着后来国内公司对于CPU卡开发的投入,其他公司的COS产品也纷纷推出. 其实从握奇的TimeC ...

  8. [置顶] css3 befor after 简单使用 制作时尚焦点图相框

    :befor.:after是CSS的伪元素,什么是伪元素呢?伪元素用于向某些选择器设置特殊效果. 我们用CSS手册可以查询到其基本的用法: E:before/E::before 设置在对象前(依据对象 ...

  9. spring与数据库之间的配置

    spring 配置数据源的三种方式 1.使用org.springframework.jdbc.datasource.DriverManagerDataSource配置文件: <bean id=& ...

  10. 【案例】舒邑:一个女装品牌的奇葩打法-@i黑马

    [案例]舒邑:一个女装品牌的奇葩打法-@i黑马 [案例]舒邑:一个女装品牌的奇葩打法