给jquery对象添加自定义方法和扩展jquery类

http://blog.sina.com.cn/s/blog_944b24ef0101epr5.html

一、给jQuery对象添加自定义方法

 

方法一、$.fn.xxx

方法二、jQuery.fn.extend({

xxx:function(){

alert($(this).val());

}

});

 

    方法一示例:

$.fn.setCursorPosition = function(position){
            if(this.lengh == 0) return this;
            return $(this).setSelection(position, position);
    }
       
    $.fn.setSelection = function(selectionStart, selectionEnd) {
            if(this.lengh == 0) return this;
            input = this[0];
       
            if (input.createTextRange) {
                    var range = input.createTextRange();
                    range.collapse(true);
                    range.moveEnd(‘character‘, selectionEnd);
                    range.moveStart(‘character‘, selectionStart);
                    range.select();
            } else if (input.setSelectionRange) {
                    input.focus();
                    input.setSelectionRange(selectionStart, selectionEnd);
            }
       
            return this;
    }
       
    $.fn.focusEnd = function(){
            this.setCursorPosition(this.val().length);
    }

    

    方法二示例:

$.fn.extend({
            setCursorPosition:function(position){
                    if(this.lengh == 0) return this;
                    return $(this).setSelection(position, position);
            },
            setSelection:function(selectionStart, selectionEnd) {
                    if(this.lengh == 0) return this;
                    input = this[0];
               
                    if (input.createTextRange) {
                            var range = input.createTextRange();
                            range.collapse(true);
                            range.moveEnd(‘character‘, selectionEnd);
                            range.moveStart(‘character‘, selectionStart);
                            range.select();
                    } else if (input.setSelectionRange) {
                            input.focus();
                            input.setSelectionRange(selectionStart, selectionEnd);
                    }
               
                    return this;
            },
            focusEnd:function(){
                    this.setCursorPosition(this.val().length);
            }
    });

    以上定义都可如此调用:

$(‘.num‘).click(function(){
            $(‘.num‘).focusEnd();

});

二、扩展jQuery类本身  为类添加新的方法

 

方法一、jQuery.extend(object);

方法二、jQuery.xxx=function(){};

    

    方法一示例:

$.extend({
        add:function(a,b){return a+b;},
        a:‘2 chi gege ‘
    });
    alert($.add(3,4)); //7
    alert($.a); //2 chi gege

    方法二示例:

$.add2 = function(a,b){
            return a-b;
    }
    alert($.add2(4,3)); //1

参考代码:

$.hx = {};
$.hx.data = {
isEmpty: function (value) {
var item = $.trim(value);
return item.length === 0;
},
isNumber: function (value) {
return !isNaN(item);
}
};

$.hx.regex = {
expression: {
email: /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/, //e.g. [email protected]
password: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{7,20}$/,//e.g. admin888
cabin: /^[a-zA-Z]{1}$/,
cabins: /^([a-zA-Z]{1}\/){1,30}$/,
airline: /^(([A-Za-z]{2})|([A-Za-z]\d)|(\d[A-Za-z])){1}$/,
mainAirportCode: /^([a-zA-Z]{3}\/){1,10}$/,//e.g. pvg/PVG/pVg/
airportCode: /^([a-zA-Z]{3}\/){1,300}$/,//e.g. pvg/PVG/pVg/ 最大改成了300个机场,原先的一些最大数在控件中使用maxlength做了限制 update by wss on20150511
unsignedInteger: /^\d+$/,
integer: /^(-){0,1}\d+$/,
flightNo: /^((\d{1,4}-\d{1,4}\/)|(\d{1,4}\/)){0,10}$/, //e.g. 1/2/6666-8888/9000-9999/
date: /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/,
currencyCode: /^[a-zA-Z]{3}$/,
double: /^(-)?\d+(\.\d+)?$/,
decimal: /^((\d|[1-9]\d+)(\.\d{1,2}){0,1}){1}$/,
cityCode: /^[A-Za-z]{3}(\/{1}[A-Za-z]{3}){0,}?$/,
invoiceAirline: /^[0-9A-Za-z]{2}(\/[0-9A-Za-z]{2}){0,}?$/,
CabinLevel: /^[A-Za-z]{1}(\/[A-Za-z]{1}){0,}?$/,
Airport: /^[a-zA-Z]{3}$/,
airlines: /^((([A-Za-z]{2})|([A-Za-z]\d)|(\d[A-Za-z]))\/){1,100}$/

},
matchReg: function (source, reg) {
source.match(reg);
},
matchEmail: function (source) {
return source.match(this.expression.email);
},
matchPassword: function (source) {
return source.match(this.expression.password);
},
matchCabin: function (source) {
return source.match(this.expression.cabin);
},
matchCabins: function (source, autoAppend) {
var result = source;
if (autoAppend && result.lastIndexOf("/") != result.length - 1) {
result = result + "/";
}
return result.match(this.expression.cabins);
},
matchAirline: function (source) {
return source.match(this.expression.airline);
},
matchMainAirportCode: function (source, autoAppend) {
var result = source;
if (autoAppend && result.lastIndexOf("/") != result.length - 1) {
result = result + "/";
}
return result.match(this.expression.mainAirportCode);
},
matchAirportCode: function (source, autoAppend) {
var result = source;
if (autoAppend && result.lastIndexOf("/") != result.length - 1) {
result = result + "/";
}
return result.match(this.expression.airportCode);
},
matchUnsignedInteger: function (source) {
return source.match(this.expression.unsignedInteger);
},
matchFlightNo: function (source, autoAppend) {
var result = source;
if (autoAppend && result.lastIndexOf("/") != result.length - 1) {
result = result + "/";
}
return result.match(this.expression.flightNo);
},
matchDate: function (source) {
return source.match(this.expression.date);
},
matchInteger: function (source) {
return source.match(this.expression.integer);
},
matchIntegerRange: function (source, min, max) {
if (!source.match(this.expression.integer)) {
return false;
}
if (Number(source) < min || Number(source) > max) {
return false;
}
return true;
},
matchCurrencyCode: function (source) {
return source.match(this.expression.currencyCode);
},
matchDouble: function (source) {
return source.match(this.expression.double);
},
matchDecimal: function (source) {
return source.match(this.expression.decimal);
},
matchCityCode: function (source) {
return source.match(this.expression.cityCode);
},
matchInvoiceAirline: function (source) {
return source.match(this.expression.invoiceAirline);
},
matchCabinLevel: function (source) {
return source.match(this.expression.CabinLevel);
},
matchAirport: function (source) {
return source.match(this.expression.Airport);
},
matchAirlines: function (source) {
var result = source;
if (result.lastIndexOf("/") != result.length - 1) {
result = result + "/";
}
return result.match(this.expression.airlines);
}
};

$.hx.style = {
addError: function (o) {
o.addClass("error");
o.focus();
},
removeError: function (o) {
o.removeClass("error");
},
addSubmitting: function (o) {

}
};

$.hx.compare = {
date: function (start, end) {
var startTime = new Date(start.replace(/-/gi, "/"));
var endTime = new Date(end.replace(/-/gi, "/"));
if (endTime < startTime) {
return false;
}
return true;
}
};

时间: 2024-10-10 13:50:36

给jquery对象添加自定义方法和扩展jquery类的相关文章

jQuery中实现自定义方法的扩展

JQuery包装器提供了大量的方法,可以再页面中直接使用.但是,没有 任何一个库可以满足所有的需求,所以,JQuery库提供了丰富的扩展功能 .以禁用一组表单元素为例,看看怎么简单有效的在JQuery库中添加自定 义的功能扩展.(JQuery没有禁用表单元素的方法哦) 上代码: 1: <!DOCTYPE> 2: <html lang="en"> 3: <head> 4: <title>Custom Method!</title>

Jquery 对象集合的迭代扩展forEach

1 if (jQuery && !jQuery.fn.forEach) { 2 $(function () { 3 (function ($) { 4 $.fn.extend({ 5 forEach: function (predicate) { 6 7 if (this == null) { 8 throw new TypeError(' this is null or not defined'); 9 } 10 11 // 1. Let O be the result of calli

jQuery的noConflict以及插件扩展

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

为Jquery类和Jquery对象扩展方法

jquery.fn.extend与jquery.extend jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. JavaScript代码 jQuery

jQuery对象合并、jQuery添加静态方法、jQuery添加DOM实例方法

实例效果: 代码演示: <!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=&q

jQuery源码分析-02构造jQuery对象

源码结构.核心函数和工具函数 1.源码结构 (function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // jQuery对象原型 jQuery.fn = jQuery.prototype = {

javascript-jquery-更改jquery对象

在许多情况下,jquery代码所做的事情变成了:生成jquery对象A,操作对jquery象A:更改为jquery对象B,操作jquery对象B:更改为jqueryC,操作jquery对象C......: jquery的链式操作: 链式操作概述:生成一个jquery对象后,既要对它进行一次或多次的普通操作,同时还要对它进行更改操作.于是有必要把生成jquery对象储存在一个变量中,满足多次调用的需要. 例如: $(function(){ $("div").click(function(

一步一步学习 JQuery (一) JQuery 对象

jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 JQuery:Hello World <html> <head> <meta charset="UTF-8"> <title>Insert title here</title&

DOM对象和js对象以及jQuery对象的区别

一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系. 通过DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素. HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. DOM对象,即是我们用