BlogJava-adamduan-随笔分类-JQuery

Jquery操作select

段旭 — Thu, 05 Apr 2012 06:00:00 GMT

摘要: 以下是操作下拉列表的常用功能：1.获取列表项中候选项的数目。2.获得选中项的索引值。3.获得当前选中项的值4.设定选择值5.设定选择项 1 //得到select项的个数 2 jQuery.fn.size = function(){ ... 阅读全文

段旭 2012-04-05 14:00 发表评论

常用正则式

段旭 — Wed, 22 Feb 2012 02:57:00 GMT

常用的数字正则（严格匹配）

正则含义

^[1-9]\d*$ 匹配正整数

^-[1-9]\d*$ 匹配负整数

^-?[1-9]\d*$ 匹配整数

^[1-9]\d*|0$ 匹配非负整数（正整数 + 0）

^-[1-9]\d*|0$ 匹配非正整数（负整数 + 0）

^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 匹配正浮点数

^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 匹配负浮点数

^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ 匹配浮点数

^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ 匹配非负浮点数（正浮点数 + 0）

^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ 匹配非正浮点数（负浮点数 + 0）

常用字符串正则

正则含义补充

^[A-Za-z]+$ 匹配由26个英文字母组成的字符串或 /^[a-z]+$/i

^[A-Z]+$ 匹配由26个英文字母的大写组成的字符串

^[a-z]+$ 匹配由26个英文字母的小写组成的字符串

^[A-Za-z0-9]+$ 匹配由数字和26个英文字母组成的字符串注意\w包含下划线_

^\w+$ 匹配由数字、26个英文字母或者下划线组成的字符串

匹配中文字符

普遍使用的正则是[\u4e00-\u9fa5]，但这个范围并不完整。例如：

/[\u4e00-\u9fa5]/.test( '⻏' ) // 测试部首⻏，返回false

根据Unicode 5.0版编码，要准确的判断一个中文字符要包括：

范围含义范围含义

2E80-2EFF CJK 部首补充 2F00-2FDF 康熙字典部首

3000-303F CJK 符号和标点 31C0-31EF CJK 笔画

3200-32FF 封闭式 CJK 文字和月份 3300-33FF CJK 兼容

3400-4DBF CJK 统一表意符号扩展 A 4DC0-4DFF 易经六十四卦符号

4E00-9FBF CJK 统一表意符号 F900-FAFF CJK 兼容象形文字

FE30-FE4F CJK 兼容形式 FF00-FFEF 全角ASCII、全角标点

因此，正确的匹配中文字符正则表达式为：

var rcjk = /[\u2E80-\u2EFF\u2F00-\u2FDF\u3000-\u303F\u31C0-\u31EF\u3200-\u32FF\u3300-\u33FF\u3400-\u4DBF\u4DC0-\u4DFF\u4E00-\u9FBF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF]+/g;

如果不希望匹配标点、符号，在正则中去掉对应的范围即可：

3000-303F CJK 符号和标点 FF00-FFEF 全角ASCII、全角标点

匹配双字节字符(包括汉字在内)

[^\x00-\xff]，可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1），代码示例如下：

console.info( "abc".replace( /[^\x00-\xff]/g,"aa" ).length ) // 3

console.info( "汉字".replace( /[^\x00-\xff]/g,"aa" ).length ) // 4

console.info( "abc汉字".replace( /[^\x00-\xff]/g,"aa").length ) // 7

段旭 2012-02-22 10:57 发表评论

JQuery总体架构

段旭 — Wed, 22 Feb 2012 02:43:00 GMT

(function( window, undefined ) {
// 构造jQuery对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
// 工具函数 Utilities
// 异步队列 Deferred
// 浏览器测试 Support
// 数据缓存 Data
// 队列 queue
// 属性操作 Attribute
// 事件处理 Event
// 选择器 Sizzle
// DOM遍历
// DOM操作
// CSS操作
// 异步请求 Ajax
// 动画 FX
// 坐标和大小
window.jQuery = window.$ = jQuery;
})(window);
从上边的注释看，jQuery的源码结构相当清晰、条理，不像代码那般晦涩和让人纠结。

段旭 2012-02-22 10:43 发表评论

自调用匿名函数 self-invoking anonymous function

段旭 — Wed, 22 Feb 2012 02:41:00 GMT

(function( window, undefined ) {

// jquery code

})(window);

1.这是一个自调用匿名函数。什么东东呢？在第一个括号内，创建一个匿名函数；第二个括号，立即执行

2.为什么要创建这样一个“自调用匿名函数”呢？

通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。这点非常有用也是一个JS框架必须支持的功能，jQuery被应用在成千上万的JavaScript程序中，必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。

3.匿名函数从语法上叫函数直接量，JavaScript语法需要包围匿名函数的括号，事实上自调用匿名函数有两种写法（注意标红了的右括号）：

(function() {

console.info( this );

console.info( arguments );

}( window )
);

(function() {

console.info( this );

console.info( arguments );

}
)( window );

4.为什么要传入window呢？

通过传入window变量，使得window由全局变量变为局部变量，当在jQuery代码块中访问window时，不需要将作用域链回退到顶层作用域，这样可以更快的访问window；这还不是关键所在，更重要的是，将window作为参数传入，可以在压缩代码时进行优化，看看jquery-1.6.1.min.js：

(function(a,b){})(window); // window 被优化为 a

5.为什么要在在参数列表中增加undefined呢？

在自调用匿名函数的作用域内，确保undefined是真的未定义。因为undefined能够被重写，赋予新的值。

undefined = "now it's defined";

alert( undefined );

浏览器测试结果：

浏览器	测试结果	结论
ie	now it's defined	可以改变
firefox	undefined	不能改变
chrome	now it's defined	可以改变
opera	now it's defined	可以改变

6. 注意到源码最后的分号了吗？

分号是可选的，但省略分号并不是一个好的编程习惯；为了更好的兼容性和健壮性，请在每行代码后加上分号并养成习惯。

段旭 2012-02-22 10:41 发表评论

jquery设置元素的readonly和disabled

段旭 — Tue, 21 Feb 2012 07:29:00 GMT

Jquery的api中提供了对元素应用disabled和readonly属性的方法，在这里记录下。如下：
1.readonly
  　　$('input').attr("readonly","readonly")//将input元素设置为readonly
  　　$('input').removeAttr("readonly");//去除input元素的readonly属性

　　 if($('input').attr("readonly")==true)//判断input元素是否已经设置了readonly属性

　　对于为元素设置readonly属性和取消readonly属性的方法还有如下两种：
　　$('input').attr("readonly",true)//将input元素设置为readonly
　　$('input').attr("readonly",false)//去除input元素的readonly属性

　　$('input').attr("readonly","readonly")//将input元素设置为readonly
　　$('input').attr("readonly","")//去除input元素的readonly属性
2.disabled

　　 $('input').attr("disabled","disabled")//将input元素设置为disabled
  　　$('input').removeAttr("disabled");//去除input元素的disabled属性

  　　if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性

　　对于为元素设置disabled属性和取消disabled属性的方法还有如下两种：
　　$('input').attr("disabled",true)//将input元素设置为disabled
　　$('input').attr("disabled",false)//去除input元素的disabled属性

　　$('input').attr("disabled","disabled")//将input元素设置为disabled
　　$('input').attr("disabled","")//去除input元素的disabled属性

段旭 2012-02-21 15:29 发表评论