文档章节

JS杂谈系列-jquery-插件开发小记

透笔度
 透笔度
发布于 2015/08/04 18:02
字数 2006
阅读 440
收藏 4
//=======================start
(function ($) {
//扩展 必须
$.fn.extend({ 
//插件名称 必须
colh: function (options) {
//默认参数 (放在插件外面,避免每次调用插件都调用一次,节省内存)
var defaults = {one: '#faa',two: '#ccc'};
//覆盖默认参数 必须
var opts = $.extend(defaults, options);
//主函数
return this.each(function () {
//激活事件
//操作对象
var obj = $(this);
//执行效果
obj.find('tr:even').css('background',opts.one);
obj.find('tr:odd').css('background',opts.two);
});
}
});
})(jQuery);
//=================end

上面是隔行换色的jq插件,一个最简单的插件实例,我们创建一个jqex.js文件,粘贴上面代码

我们新建一个demo.html页面,引入jquery类库和上面保存好的jqex.js文件,运行可见效果

静态html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript" src="jqex.js"></script>
<script type="text/javascript">
$(function(){
//start
//调用插件,改变奇偶颜色 赋值
$(".a1").colh({ one:'#114245',two:'#afe365'});
$(".a2").colh({ one:'#ffc',two:'#ccc'});
//end
})
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
table{ margin:50px;}</style>
</head>
<body>
<table width="100%" cellspacing="1" class="a1">
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
</table>
<table width="100%" cellspacing="1" class="a2">
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
</table>
<table width="100%" cellspacing="1" class="a2">
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
</table>
</body>
</html>

如上代码,执行demo,其中script中的 $(".a1").colh({ one:'#114245',two:'#afe365'}); 是调用插件

我们可以看见.a1的奇偶采用颜色是one:'#114245',two:'#afe365'

.a2的奇偶采用颜色是 one:'#ffc',two:'#ccc'

比对调用插件的代码发现实现了索要效果,只要把参数的one和two进行改变就实现了不用部分的隔行换色,我们来分析原理

 

//============================

(function ($) {

})(jQuery);

封装插件的最外层,一个立即执行的匿名函数,传入了一个jquery,我们先解释的jquery是什么

他就是 $("div").hide()中的$,$其实是jquery的简写,

而jquery是一个方法,简单比喻写成jquery=function(){} ,而且这个方法是一个构造方法,俗称就是类,jq是js的类库,名字合理解释了

这句代码的意思:闭包下,执行函数,传入jquery类

//============================

$.fn.extend({  
  });

下一层结构,其实$==jquery,不要迷糊

fn是什么,他就是prototype的简写,原型属性,用于给构造函数(类)添加共享的属性和方法,用于new的实例的调用中

prototype属性,任何的方法都会有这个属性

extend就是jq自己写的添加插件扩展方法,原理代码略,结构固定

这句代码的意思就是:给jquery类new出的实例添加扩展方法

//============================

//插件名称 必须
  colh: function (options) {
   }

第三层,定义一个插件,插件的名称是colh,自定义的,叫阿猫阿狗随意

意思:我要写一个自定义名称的插件了(其实是一个方法),这部分名称随意

当然我可以添加多个,多个的写法就是

colh: function (options) {
},

colh1: function (options) {
}

自己写几个就是造几个,逗号隔开,最后一个不要写逗号

//============================

   var defaults = {one: '#faa',two: '#ccc'};
   var opts = $.extend(defaults, options);

这次是关键代码了,也是你自己要写的

var defaults = {one: '#faa',two: '#ccc'};   定义一个object类型的内容,作为默认采用值,我们在调用插件这样写

$(".a1").colh(); 调用时没有写参数,那么采用的就是我们 defaults 的数值,表格奇偶颜色就是

one: '#faa',two: '#ccc' 可以试一试,这个的主要做用就是不传参数下,也添加一个最通用的效果

 

var opts = $.extend(defaults, options); 这个里面$.extend()的作用就是键值融合,我们举几个例子

var a={aa:1111,bb:2222},var b={bb:3333},var c={dd:4444},

$.extend(a,b)=>{aa:1111,bb:3333}

$.extend(a,c)=>{aa:1111,bb:2222,dd:4444}

方法理解就是,我会把前后的obj参数的全部键提出来,放在一个新obj类型里面,然后对出现同样键,第二个obj中键值会替换第一个obj的键值

$.extend(a,b) 提出所有键:aa和bb,第二个和第一个同样有bb键,第二个的bb键对应键值“3333”替换第一个的bb键值“2222”最后返回 {aa:1111,bb:3333}

$.extend()的另一个用处就是添加工具扩展,下面介绍

//============================

return this.each(function () {
       var obj = $(this);
    obj.find('tr:even').css('background',opts.one);
    obj.find('tr:odd').css('background',opts.two);
   });

这就是核心代码了

js中this上下文指针

$(".a1").colh({ one:'#114245',two:'#afe365'});    this指向 $(".a1")

 $(".a2").colh({ one:'#ffc',two:'#ccc'});   this指向 $(".a2")  有2个,当前页面

我们发现一个页面会出现多个同类名内容,这时候就是jq的 each() 发挥作用了,

他会遍历方法前面所有实例,并且在回调函数中,遍历到的每一个存放在$(this)

这样我们就可以实现通同类名对象,多实例的实现了

$(this)代表每一个实例,当前就是代表

$(".a1").colh({ one:'#114245',two:'#afe365'}); 中的$(".a1")、

$(".a2").colh({ one:'#ffc',two:'#ccc'}); 中的$(".a2")[0]、$(".a2")[1]

加上下面css设置obj.find('tr:even').css('background',opts.one);
obj.find('tr:odd').css('background',opts.two);

3个表格都实现了隔行换色

查找下面的奇偶,用伪类选择器

//============================

//============================

写一个tab切换插件

第一步  最外层

(function ($) {
})(jQuery);

第二步 第二层

(function ($) {

    $.fn.extend({
    });

})(jQuery);

第三步 第三层

(function ($) {

$.fn.extend({

    tab: function () {
     }

});

})(jQuery);

上面三步的代码几乎固定的,复制就好,除了插件名称

第四步 创建一个tab插件  插件全部代码

(function ($) {
$.fn.extend({
tab:function(){ 
return this.each(function () { 
var obj = $(this);
obj.find(".tabnav").children().click(function(){
obj.find(".tabbox").children().eq($(this).index()).show().siblings().hide();
});
});
}
});
})(jQuery);

tab插件已经完成了,下面是html代码

 <div class="tab1" style="height:400px; width:400px; background:#F93">
<div class="tabnav" style="height:50px; line-height:50px;">
<span>111</span>
<span>222</span>
<span>333</span>
</div>
<div class="tabbox" style="height:350px; background:#F9C;">
<div>111111</div>
<div style="display:none;">22222222222</div>
<div style="display:none;">33333333</div>
</div>
</div>

调用插件代码

$(".tab1").tab();

发现一个tab切换也被封装为插件了,下一步你可以封装更复杂的,如:焦点图、带动画的tab切换等

//===========================================

//===========================================

//===========================================

插件开发已经差不多了,我们会发现,jq里面有这样一些方法,如此调用

 var arr = [ 4, "Pete", 8, "John" ];

jQuery.inArray("John", arr);  //3
jQuery.inArray(4, arr);  //0
jq提供的 inArray()方法,调用$.inArray(4, arr);实现方法处理,返回结果

jq的工具更定不能满足所有人,我们也会希望对某个项目添加很多基于jq的工具,也是$.fun()去调用

开始吧!这个封装方法就是   

 $.extend({key:fun,key2:fun2});  我们很眼熟,上面对象类型合并就是他,他另一个用途就是添加工具扩展,基于类,这个类就是jquery

他的原理就是jquery.hanfun1=function(){},给jquery的方法名直接.一个属性

其实function的原型就是object类型,可以.添加属性和方法就可以理解了,这属于静态方法,静态就是通过jquery.hanfun1去调用,不用new实例去调用,解释完毕,看代码

工具开发jq代码  获取数组最大值

(function ($) {
$.extend({
han1:function(arr){
return Math.max.apply(null,arr) 
}
});
})(jQuery);

调用工具js代码

var arr=[45,897,548,789];
alert($.han1(arr));

会输出 897

完毕了!

 

© 著作权归作者所有

透笔度
粉丝 83
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
私信 提问
加载中

评论(1)

李元成
李元成
赞一个,良心贴~~~
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键...

给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动 博客分类: Javascript CSS jQuery插件系列 重置Alert模拟AlertJquery Alert插件开发Jquery插件开发 我们在...

wolf_su
2013/07/03
123
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/04
0
0
Jquery不同版本共用的解决方案(插件编写)

最近在为某公司做企业内部UI库,经过研究分析和评审,决定基于Jquery开发,结合Bootstrap插件那简洁,优雅,高效的思想进行插件编写。 但是在编写的过程中遇到一个头疼的问题,就是正在编写的...

Eric_HSBC
2013/05/15
3.7K
2
分享16个javascript&jQuery的MVC教程

日期:2011/12/19 来源:GBin1.com 2011即将过去我们将在几周后迎来新的一年。 这里我们将介绍10多个js和jQuery的MVC教程希望大家喜欢! jQuery MVC 1. AJAX - Spring MVC 3和jQuery的整合 ...

gbin1
2011/12/21
5.7K
5
Dojo 与 jQuery 综合比较分析

最近Dojo 和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD、相同的选择 器 引擎Sizzle等。作为业界知名的Javascript库,...

鉴客
2012/07/09
12.5K
21

没有更多内容

加载失败,请刷新页面

加载更多

Centos6.6 安装ffmpeg视频工具

1.安装前置工具 yum -y install gcc cc cl libmpc*//后续失败的话,自己补充自己的缺少的包 2.安装yasm 1)下载wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz...

小海bug
3分钟前
0
0
用什么来做用户行为分析?七个实用工具推荐给你

当企业进入数据化管理阶段之后,就不得不对用户进行行为数据分析,当然其他的包括用户画像、趋势分析等等,都是现在企业经常要进行的营销分析,因此选一个好的数据分析工具是很重要的。 而现...

朕想上头条
8分钟前
0
0
Java mysql连接

import java.sql.DriverManager; import java.sql.SQLException; import com.mysql.jdbc.Connection; public class T { public static void main(String[] args) throws SQLException, Insta......

林词
9分钟前
0
0
Select 选择器 的一些官网没有的用法

一、拼接字符串 <el-option v-for="(item, index) in reagentOptions" :key="index" :label="item.sjlxmc+' '+item.sjbm" :va......

沉迷代码我爱学习
9分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部