基于jq的插件开发是什么鬼,$.fn是什么鬼,我在实际工作中也遇到过这个问题,下面就让我们一起来看一看这些都是什么鬼。

首先我们介绍$.fn。

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子:$("#div").abc();

jQuery为开发插件提拱了两个方法,分别是:

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。

fn是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype ={
   init: function( selector, context ){//.... 
   //......
};

原来 jQuery.fn =jQuery.prototype.对prototype肯定不会陌生啦。
jQuery便是一个封装得非常好的类,比如我们用语句 $("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

$.extend({
  add:function(a,b){returna+b;}
});

便为 jQuery 添加一个为add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7

jQuery.fn.extend(object);对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert当前编辑框里的内容。可以这么做:

jQuery代码

$.fn.extend({
  alertWhileClick:function(){
    $(this).click(function(){
    alert($(this).val());
  });
  }
});

$.fn弹窗实例

这里边的mPop相当于给jq新加了一个事件。

类似于

jQuery.fn = jQuery.prototype ={
   mPop: function( selector, context ){//.... 
   //......
};

使用起来这么写 $.fn.mPop();

//弹窗
$.fn.mPop = function(){
$("body").css("position","relative");
var sctop = top.location == self.location ? $(window).scrollTop() : $(parent.window).scrollTop();
var winW = $(window).width();
var winH = $(window).height();
var tcH = $("body").height();
var w = $(this).innerWidth();
var h = $(this).innerHeight();
$(this).css({"left":(winW - w)/2+"px","z-index":"30"});
var bgdiv = "<div class='bgdiv'></div>";
$("body").append(bgdiv);
if(h>winH){
$(this).css({"display":"block","top":"0px"})
} else{
$(this).css("display", "block").css({top: ((winH - h) / 2 + sctop) + "px"});
}
$(".bgdiv").css({"width": winW + "px","height": tcH + "px","opacity": .6,"position": "absolute","left": "0","top": "0","z-index": 10,"background-color": "#000","display":"block"});
}

在使用的时候直接用就可以了

$('.tanchu').mPop();    
==============================================================

说完$.fn我们再说说这里边的

var sctop = top.location == self.location ? $(window).scrollTop() : $(parent.window).scrollTop();
top.location != self.location 就是说当前窗体的url和父窗体的 url是不是相同

如果相同执行$(window).scrollTop();不同$(parent.window).scrollTop()。这个是为了防止别的网站嵌入你的网站的内容(比如用iframe嵌入的你的网站的页面)

基于jq插件开发及弹窗实例的更多相关文章

  1. 基于JQ的自定义弹窗组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 基于jq图片居中插件 [center]

    最近在做一个项目,大量的图片基于js进行缩放(图片放大镜),考虑用css要写许多hack,而已经基于jq了,干脆写个方法得了. 代码很简单,不用多讲但是很实用. $.fn.extend({ cente ...

  3. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  4. 【转】基于Python的接口测试框架实例

    下面小编就为大家带来一篇基于Python的接口测试框架实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   背景 最近公司在做消息推送,那么自然就会产生很多接口,测试 ...

  5. 基于jq流畅度非常好的图片左右切换焦点图

    今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图.这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  6. react.js插件开发,x-dailog弹窗浮层组件

    react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...

  7. 基于zabbix 的memached 多实例监控

    基于zabbix 的memached 多实例监控 zabbix agentd 配置文件新增配置: UserParameter=memcached.server.discovery[*],ps uax ...

  8. 基于Python的接口测试框架实例

    文章来源:http://www.jb51.net/article/96481.htm 下面小编就为大家带来一篇基于Python的接口测试框架实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考. ...

  9. 基于JQ的简单左右轮播图

    // 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...

随机推荐

  1. 数据结构(树链剖分):BZOJ 4034: [HAOI2015]T2

    Description 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中 ...

  2. 字符串(马拉车算法,后缀数组,稀疏表):BZOJ 3676 [Apio2014]回文串

    Description 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. Input 输入只有一行 ...

  3. WebBrowser控件默认使用IE9,IE10的方法

    1,打开注册表 HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)     SOFTWARE        Microsoft           Internet E ...

  4. vim下缩进及高亮设置

    1.配置文件的位置 在目录 /etc/ 下面,有个名为vimrc的文件,这是系统中公共的vim配置文件,对所有用户都有效.而在每个用户的主目录下,都可以自己建立私有的配置文件,命名为:“.vimrc” ...

  5. 数据结构——N皇后放置方法种数

    Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...

  6. 数据结构——UVA 1600 机器人巡逻

    描述 A robot has to patrol around a rectangular area which is in a form of mxn grid (m rows and n colu ...

  7. bzoj1251 序列终结者(Splay Tree+懒惰标记)

    Description 网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列 要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这 ...

  8. 【最短路】埃雷萨拉斯寻宝(eldrethalas) 解题报告

    问题来源 BYVoid魔兽世界模拟赛 [问题描述] 一万两千年前,当精灵还是在艾萨拉女王的统治下的时候,辛德拉就是是女王手下一名很有地位的法师了.他受任建造了一座城市,来保存女王的法师们进行魔法研究的 ...

  9. setState的同步更新

    react中的setState特点: 是异步操作函数: 组件在还没有渲染之前, this.setState 还没有被调用: 批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setSt ...

  10. VB.NET版机房收费系统—DataGridView应用

    事实上,先前刚刚開始敲机房的时候,刚用到DataGridView的时候,总显得力不从心,先要一下子就学会,看了非常多的资料,但是依照写的时候,自己有不知道从什么地方下手,于是,当自己用查询SQL语句, ...