编写jquery扩展插件

转载 2011年01月17日 09:07:00

第一步:创建一个js文件


第二步:编写有关代码

jQuery.fn.extend({
    ///这个函数是全部选择所有的元素
    check: function() {
        return this.each(function() { this.checked = true; }); //必须return回一个jquery对象
    },
    uncheck: function() {
        return this.each(function() { this.checked = false; });
    }
});

 

第三步:在页面中使用该扩展方法

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>

<!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 runat="server">
    <title></title>
    <script type="text/javascript" src="jquery-1.3.2-vsdoc.js"></script>
    <script type="text/javascript" src="Myjqueryplunin.js"></script>
    <script language="javascript" type="text/javascript">

        function CheckAll() {
            $("input:checkbox").check();
        }

        function UnCheckAll() {
            $("input:checkbox").uncheck();
        }

    </script>
</head>
<body>

    <div>
    <button onclick="CheckAll();">选择全部</button>
    <button onclick="UnCheckAll();">清除全部</button>
    <hr />
    <input type="checkbox"  id="c1" /><label for="c1">测试</label><br />
    <input type="checkbox"  id="Checkbox1" /><label for="c1">测试</label><br />
    <input type="checkbox"  id="Checkbox2" /><label for="c1">测试</label><br />
    <input type="checkbox"  id="Checkbox3" /><label for="c1">测试</label><br />
    <input type="checkbox"  id="Checkbox4" /><label for="c1">测试</label><br />
    <input type="checkbox"  id="Checkbox5" /><label for="c1">测试</label><br />
    <input type="checkbox"  id="Checkbox6" /><label for="c1">测试</label><br />
    </div>
</body>
</html>

这里有一个细节:div是不可以放在runat=server的form里面的

 

第四步:在浏览器中查看效果

 

 

下面这个博客也提供了另外一些介绍 http://ioryioryzhan.javaeye.com/blog/232971

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

jQuery.fn.extend(object);

jQuery.extend(object);

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

jQuery.fn.extend(object);给jQuery对象添加方法。

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

jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//.... 

   //......

};

原来 jQuery.fn = jQuery.prototype.对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.    alertWhileClick:function(){    
  3.        $(this).click(function(){    
  4.             alert($(this).val());    
  5.         });    
  6.     }    
  7. });    
  8. $("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>

$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

聊聊jQuery的扩展(插件)

编写jQuery扩展当我们使用jQuery对象的方法时,由于jQuery对象可以操作一组DOM,而且支持链式操作,所以用起来非常方便。但是jQuery内置的方法永远不可能满足所有的需求。比如,我们想要...
  • github_38383183
  • github_38383183
  • 2017年06月23日 17:15
  • 412

编写jquery扩展插件

该篇文章是我于2009年6月10日通过自己编写的工具,批量从位于在博客园的博客站点(http://chenxizhang.cnblogs.com)同步而来。文章中的图片地址仍然是链接到博客园的。特此说...
  • chen_xizhang
  • chen_xizhang
  • 2009年06月12日 00:52
  • 527

【jquery扩展】jquery扩展方法extend(),以及扩展插件

这段时间看关于jquery自定义插件,扩展自己的插件看到了两篇感觉特别好的文章,于是转载过来. 第一篇 转载地址,博客园的前辈写的:http://www.cnblogs.com/RascallySna...
  • a5534789
  • a5534789
  • 2015年01月11日 14:44
  • 1235

自己编写JQuery扩展分页插件

背景公司分页插件用到了kkpager https://github.com/pgkk/kkpager 缺点:不是绑定Dom节点的初始化方式,单页面只能使用一个分页插件,假如一个页面有多个分页需求就...
  • wu6660563
  • wu6660563
  • 2016年07月30日 12:11
  • 1393

jQuery扩展插件

当我们使用jQuery对象的方法时,由于jQuery对象可以操作一组DOM,而且支持链式操作,所以用起来非常方便。 但是jQuery内置的方法永远不可能满足所有的需求。比如,我们想要高亮显示某些...
  • aaa333qwe
  • aaa333qwe
  • 2017年03月22日 15:44
  • 93

jquery扩展插件

jquery扩展插件 div{width:100px;height: 100px;background-color: red;position: absolute;} 扩展插件就...
  • itzhengmaolin
  • itzhengmaolin
  • 2017年08月05日 14:59
  • 164

jQuery 扩展插件

一:扩展对象方法    jQuery.fn.extend({           test:function(){               alert('test');          ...
  • justflyhigh
  • justflyhigh
  • 2012年05月27日 22:53
  • 105

jquery blockUI 扩展插件 Dialog

对jQuery blockUI插件进行了小的封装扩展,支持confirm、alert、dialog弹出窗口提示信息,支持按钮回调事件。可以自定义css样式、覆盖blockUI的样式等 首先要到j...
  • IBM_hoojo
  • IBM_hoojo
  • 2012年01月05日 17:34
  • 3188

jQuery扩展插件封装

(function($) {     $.fn.extend({         ztree: function(options) {             var $this = this; ...
  • qq285679784
  • qq285679784
  • 2017年11月29日 17:15
  • 43

IE(微软)浏览器扩展开发初探

最近开发浏览器插件有点上瘾,先开发了一个FF(火狐)浏览器插件,后来又开发了一个谷歌浏览器的插件,还是不觉得不过瘾,这次要尝试开发一个粗糙的IE浏览器插件,最终实现在一键实现订餐,一键取消订餐操作。 ...
  • ugg
  • ugg
  • 2011年09月08日 17:15
  • 11401
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:编写jquery扩展插件
举报原因:
原因补充:

(最多只允许输入30个字)