jquery 插件扩展

编写jquery扩展插件

第一步:创建一个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 的插件。

时间: 2025-01-06 21:54:03

jquery 插件扩展的相关文章

jQuery插件扩展方法

jQuery为扩展插件提拱了两个方法,分别是: jQuery.extend(object) -- 给jQuery对象添加方法. jQuery.fn.extend(object) -- 为扩展jQuery类本身.为类添加新的方法: fn表示什么呢?下面代码是jQuery源代码中定义的fn: jQuery.fn = jQuery.prototype = { init: function( selector, context ) { //-- }; 从上面代码我们不难看出 jQuery.fn = jQ

jquery 插件扩展2

jQuery autocomplete 自扩展插件.自动补全示例 jquery-lib版本是 1.3.2的,该插件是简单的扩展插件,代码也比较简单的封装.所以看起来也比较简单不是很费力,当然封装得也不是很好. 不过做了浏览器方面的兼容,经测试兼容IE6+.Firefox3.5+ 首先看看autocomplete.js: ;(function ($) { var index = -1; var timeId; var cssOptions = { "border": "1px

jQuery插件扩展与多库共存

查看扩展写法 1.工具类扩展 2.对象方法扩展 /* 扩展jQuery的工具方法 : $.extend(object) min(a, b) : 返回较小的值 max(c, d) : 返回较大的值 leftTrim() : 去掉字符串左边的空格 rightTrim() : 去掉字符串右边的空格 */ //正则 /* ^ 匹配字符串开始 \s 匹配空格 + 匹配一次或者多次 $ 匹配字符串的末尾 */ //扩展$ $.extend({ min: function (a, b) { return (a

JQuery时间格式化插件--扩展JQuery

(function($){ $.formatDate = function(pattern,date){ //如果不设置,默认为当前时间 if(!date) date = new Date(); if(typeof(date) ==="string"){ if(date=="") date = new Date(); else date = new Date(date.replace(/-/g,"/")); } /*补00*/ var toFix

jQuery的noConflict以及插件扩展

一.noConflict函数 JavaScript有很多插件,如果jQuery对象的$与其他插件冲突,我们可以使用noConflict()方法去掉$或者使用其他的符号代替 注:noConflict()函数不能调用两次,上面代码是方便向读者展示 二.jQuery的插件扩展 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery 的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQu

利用jQuery来扩展一个瀑布流插件

  简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰的理解我将需求写成了注释 扩展代码如下 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 1 (function($){ 2 3 $.fn.WaterFall = function () { 4 5 /* 6 * 瀑布流插件 7 * 容器的宽度固定 8

第七章(插件的使用和写法)(7.6 编写 jQuery 插件)

7.6.1 插件的种类 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率. jQuery 的插件主要分为3种类型. 1 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的 jQuery 对象进行操作,是最常见的一种插件. 据不完全统计,95%以上的 jQuery 插件都是封装对象方法的插件,此类插件可以发挥出 jQuery 选择器的强大优势.有相当一部分的 jQuery 的方法,都是在 jQuery 脚本库内部通过这种

Jquery插件使用方法

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

原创jquery插件treeTable(转)

由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. 在网上找到了很多资料,发现treeTable方面的组件质量都不高,有些还不错样式不符合,性能也比较差.想想树表也挺简单的,不就是通过隐藏或者展现某些tr来实现嘛.于是乎,自己写一个. 2011年5月4号恰好放假一个下午,于是在家里风风火火开始构造自己的树表插件. 样式我就用了http://www.h