笔试：如何开发一个JQuery插件（集锦7篇）由网友“leo1874”投稿提供，下面是小编为大家整理后的笔试：如何开发一个JQuery插件，仅供大家参考借鉴，希望大家喜欢，并能积极分享!
篇1：笔试：如何开发一个JQuery插件
笔试：如何开发一个JQuery插件
JQuery有两种开发插件的方法：
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object);方法为扩展jQuery类本身.并为类添加新的方法，
jQuery.fn.extend(object)方法是给jQuery对象添加方法。
jQuery.fn = jQuery.prototype.
虽然 javascript 没有明确的类的概念，但是用类来理解它，会更方便。
jQuery便是一个封装得非常好的类，比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法，可以理解为添加静态方法。如：
$.extend({
add:function(a,b){return a+b;}
});
便为 jQuery 添加一个为 add 的 “静态方法”，之后便可以在引入 jQuery 的地方，使用这个方法了，
$.add(3,4); //return 7
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的.实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容，
可以这么做：
Java代码
1. $.fn.extend({
2.
3. alertWhileClick:function{
4.
5. $(this).click(function(){
6.
7. alert($(this).val());
8. });
9.
10. }
11.
12. });
13.
14. $(“#input1″).alertWhileClick(); //页面上为：
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$(“#input1″).alertWhileClick(); //页面上为：
$(“#input1″) 为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。
jQuery提拱了丰富的操作文档，事件，CSS ,Ajax、效果的方法，结合这些方法，便可以开发出更加 Niubility 的插件。
篇2：最佳jQuery插件网页设计
jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关，本文是 webdesignledger.com 网站推选的度最佳 jQuery 插件。
拉洋片在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，20，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。
AnythingSlider由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。
Easy Slider这个 Content Slider 插件既包含传统“前后”导航模式，又包含页码式导航。
Coda-Slider 2.0Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。
图片库那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。
Galleria这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。
jQuery Panel Gallery一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。
slideViewerslideViewer 会检查你的图片列表中的编号，动态创建各个图片的页码浏览导航。
Supersized一个令人惊讶的图片循环展示插件，包含各种变换效果和预加载选项，会对图片自动改变尺寸以适应浏览器窗口，
导航我们相信，作为网站的导航系统，应该越简单，越易用越好，然而，假如你确实希望实现一些更炫的效果，jQuery 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。
jquery mb.menuHorizontal Scroll Menu with jQueryAutoSprites表单和表格在 Web 设计中，表单和表格都是不是很讨人喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery 插件帮你完成这些任务。
Password Strength这个插件帮你评估用户输入的密码是否足够强壮。
Ajax Fancy Capcha顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。
Chromatable这个插件可以帮助你在表格上实现滚动条。
jqTransform一个式样插件，帮助你对表单中的控件进行式样控制。
Uploadify实现多个文件同时上传。
jExpand一个很轻量的 jQuery 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。
本文来源：webdesignledger.com/resources/the-best-jquery-plugins-of-
中文翻译来源：COMSHARP CMS 企业网站内容管理系统官方站
篇3：基于jQuery实现网页进度显示插件
这篇文章主要介绍了基于jQuery实现网页进度显示插件的实现方法以及源码下载，十分的详细，并自带2种皮肤，这里推荐给小伙伴们，
相信大家都见过类似的网站功能，这种形式的进度显示可以很方便的让用户去理解和操作，
以下是插件的测试截图 ，提供了两个皮肤
使用js编写 可以灵活的生成进度条 方便进对一些工作进度进行图形显示
1、简单的调用
//所有步骤的数据
var stepListJson=[{StepNum:1,StepText:“第一步”},
{StepNum:2,StepText:“第二步”},
{StepNum:3,StepText:“第三步”},
{StepNum:4,StepText:“第四步”},
{StepNum:5,StepText:“第五步”},
{StepNum:6,StepText:“第六步”},
{StepNum:7,StepText:“第七步”}];
//当前进行到第几步
var currentStep=5;
//new一个工具类
var StepTool = new Step_Tool_dc(“test”,“mycall”);
//使用工具对页面绘制相关流程步骤图形显示
StepTool.drawStep(currentStep,stepListJson);
//回调函数
function mycall(restult){
// alert(“mycall”+result.value+“:“+result.text);
StepTool.drawStep(result.value,stepListJson);
//TODO…这里可以填充点击步骤的后加载相对应数据的代码
}
2、自定义皮肤修改
插件提供了两套皮肤科共选择如果不能满足您的要求，则自己编写CSS代码即可
html代码
代码如下:
无标题文档
当前步骤：第步
javascript代码
代码如下:
/**
* @auther DangChengcheng 请保留作者
* @mailTo dc200@163.com
*/
var Step_Tool_dc =function(ClassName,callFun){
this.ClassName=ClassName,
this.callFun=callFun,
this.Steps = new Array(),
this.stepAllHtml=“”;
}
Step_Tool_dc.prototype={
/**
* 绘制到目标位置
*/
createStepArray:function(currStep,stepListJson){
this.currStep=currStep;
for (var i=0; i
var Step_Obj =new Step( this.currStep,stepListJson[i].StepNum,stepListJson[i].StepText,stepListJson.length);
Step_Obj.createStepHtml();
this.Steps.push(Step_Obj);
}
},
drawStep:function(currStep,stepListJson){
this.clear();
this.createStepArray(currStep,stepListJson);
if(this.Steps.length>0){
this.stepAllHtml+=“”;
for (var i=0; i
this.stepAllHtml+=this.Steps[i].htmlCode;
}
this.stepAllHtml+=“”;
jQuery(“.”+this.ClassName).html(this.stepAllHtml);
this.createEvent();
} else{
jQuery(“.”+this.ClassName).html(“没有任何步骤”);
}
},createEvent:function(){
var self=this;
jQuery(“.”+this.ClassName+“ ul li a”).click(function(){
var num=jQuery(this).attr(“data-value”);
var text=jQuery(this).attr(“data-text”);
result={value:num,text:text} ;
eval(self.callFun+“(result)”);
});
}
,clear:function(){
this.Steps=new Array();
jQuery(“.”+this.ClassName).html(“”);
this.stepAllHtml=“”;
}
}
var Step=function(currStep,StepNum,StepText,totalCount){
this.currStep=currStep,
this.StepNum=StepNum ,
this.StepText=StepText,
this.totalCount=totalCount,
this.htmlCode=“”;
}
Step.prototype={
createStepHtml:function(){
var stepHtml=“\”+this.StepNum+“\”;
stepHtml=stepHtml+“\”+this.StepText+“\”;
if(this.currStep>this.totalCount){
this.currStep=this.totalCount;
}else if(this.currStep<=0){this.currStep=1;}
if(this.currStep>this.StepNum&&this.StepNum==1){
classSype=“firstFinshStep”;
} else if(this.currStep==this.StepNum&&this.StepNum==1){
classSype=“firstFinshStep_curr1”;
}
else if(this.currStep==this.StepNum&&this.currStep!=this.totalCount){//当前步骤,下一个未进行,并且不是最后一个
classSype=“coressStep”;
}else if(this.currStep==this.StepNum&&this.StepNum==this.totalCount){//当前步骤 并且是最后一步
classSype=“finshlast”;
}else if(this.currStep classSype=“last”; } else if(this.currStep classSype=“loadStep”; } else if(this.currStep>this.StepNum){//已进行的步骤 classSype=“finshStep”; } stepHtml=“\ this.htmlCode=stepHtml; } } 附上源码下载 xiazai.jb51.net/03/yuanma/step-jquery-dc(jb51.net).rar 以上就是本文的全部内容了，希望大家能够喜欢，
篇4：jquery编辑器插件tinyMCE的使用方法
jquery编辑插件tinyMCE是一个非常容易集成到您系统的一个html编辑插件，它不像FckEditor那样需要针对专门的后台语言集成，tinyMCE既能做到轻松集成asp.net，php，java又能非常容易的进行扩展和二次开发
修改简化文件大小后的案例下载：下载文件到本地 也可以到 下载最新的基于jquery的 www.jb51.net/codes/44180.html
1 html
2 js引用
首先引用tiny_mce.js和jquery-1.4.2.min.js
tinyMCE的调用：
复制代码
代码如下:参数详解：
mode：textareas或者exact
elements：配合mode中exact使用，它的值为html中要使用的textaear的id或name名称
theme：所使用的样式
skin：找到相应的skin目录下样式
skin_variant：skin目录下的文件css选择，如：skin_variant : “black”表示：skins\o2k7\ui_black.css
plugins：plugins文件夹下插件的选择使用
theme_advanced_buttons1:第一行的功能按钮显示，一下以此类推theme_advanced_buttons2等等
3 扩展
向输入框中通过js追加一个图片并显示，js代码如下：
tinyMCE.execCommand(‘mceInsertContent’,false,“
”);
通过js获取输入框内容，代码如下：
tinyMCE.getInstanceById(‘txtcontent’).getBody().innerHTML
篇5：开发一个比价插件 firefox扩展网页设计
这段时间准备攒台牛机，首选京东的装机大师，当把某显卡去51buy一搜，发现比京东便宜50块，50块，10瓶可乐呢，
曾经用过个有道购物助手，很强大，强大到直接在你的所有页面注入代码，且就注入到别人页面的body下，还是个div，有没有公德心啊，把别人的js变量，css样式冲了怎么办，或别人的css权重冲了你的怎么办，别人的dom树别破坏行不。莫名的在body下多了一个div，这样的xpath是不存在的，如果是这样在我们的预计系统里就会报警了，算是被网络运营商注入广告了，还算是被 xss攻击了。关键的还不是这些，注入脚本，https的你别注入行不。我登陆的我的淘宝别注入行不，gmail里别注入行不……。
好吧。准备自己开发个比价的插件，先做最拿手的firefox。
分析：
取当前页面title通过分词去其它商城搜。分析各大商城的dom结构，统一返回JSON格式给后续处理。在document.docuemntElement下注入iframe，这样与别人的页面不会冲突。配置化比价，只有用户在他配置的页面才会注入。准备：
通过Firefox扩展在线生成向导生成一个扩展。通过新浪云计算的分词做个服务。解板各大商城的dom开发：
商品的title要稍微正则一下，把一些无用的内容过滤掉，如:【行情报价价格评测】等.易讯的title要gbk编码过去，ifm.contentWindow.document.documentElement绑事件，通过事件冒泡来完成工作。成果：
下载：
猛击这里总结：
好吧，我承认这不是一个插件，只是一个扩展QA：
你们UED还要开发插件是的，为了保证程序员套出来的HTML，我们要开发HTMLQA插件，在发布前检查。为了保证线上的图片是最优化的，我们要开发图片压缩率检查插件，为了保证各业务的js写的是优化的，我们要开发js性能分析插件。为了用户行为分析，我们要开发用户点击行为插件来显示各元素被点的次数等。。。感谢您对ctripUed的支持！祝您上网愉快！你们还缺人不缺。相当的缺。感谢您对ctripUed的支持！祝您上网愉快！声明：
本插件均为胡乱敲击键盘鼠标所致，纯为测试键盘和鼠标机械性能。篇6：jQuery开发之DOM操作二
接上篇文章
3，插入节点
插入节点的方法如下图：
4，删除节点<?www.2cto.com/kf/ware/vc/“ target=”_blank“ class=”keylink“>vc3Ryb25nPiA8YnI+CigxKSByZW1vdmUoKbe9t6ggPGJyPgrX99PDyse000RPTdbQyb6z/cv509DGpcXktcTUqsvYoaPKvsD9tPrC68jnz8KjujwvcD4KCgoKPHByZSBjbGFzcz0=”brush:java;“>var $li =$(”ul li:eq(1)“).remove; //获取第二个
节点后，将它从网页中删除，
注意：当某个节点用remove()删除后，该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向被删除节点的引用，因此可以在以后继续使用这些元素。
(2) detach()方法
detach() 和remove()方法一样，也是从DOM中去掉匹配的元素，但需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件，附加的数据都会保留下来。
示例代码如下：
var $li =$(”ul li:eq(1)“).detach(); //获取第二个节点后，将它从网页中删除。
(3) empty()方法
严格来说empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
示例代码如下：
var $li = $(”ul li:eq(1)“).empty(); //获取第二个节点后，清空元素里的内容。
5，复制节点
选择最喜欢的水果
苹果橘子菠萝