存档

‘JavaScript’ 分类的存档

Jquery无限级目录树

2009年3月28日 admin 没有评论

很实用的一个JQUERY插件, 结合数据使用,效果特别棒.

作者官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

名:jQuery plugin: Treeview成份:Jquery.js                  //jquery框架文件
   jquery.treeview/jquery.treeview.js    //插件源码,8K,可读性强
   jquery.treeview/jquery.treeview.pack.js //插件压缩源码,功能同上,2K,体积下,但可读性弱
   jquery.treeview/images          //相关图片
   jquery.treeview/demo.html        //演示文件

 

功能:生成无限级目录树,可自行修改显示样式

文档:http://docs.jquery.com/Plugins/Treeview

Demo:http://jquery.bassistance.de/treeview/demo/

截图如下:

tree

Popularity: 28% [?]

jQuery UI 1.7 发布

2009年3月11日 admin 没有评论

继jQuery 1.3.1发布之后,UI包一直没跟上,3月6日,兼容jQuery 1.3.1的UI包终于发布了。大家可以来这里下载jquery-ui-1.7.custom.zip,svn方式:http://jquery-ui.googlecode.com/svn/tags/1.7/

这次改动主要如下:

  • 和jQuery1.3兼容。
  • 修补和优化以前的UI插件。
  • 崭新的CSS框架。
    jQuery UI 1.7建立在一个崭新的强大的css框架上,这个框架不仅仅用于jQuery UI的插件,还可以用于定制插件,任何开发者都能很容易地基于ThemeRoller(jQuery UI 的换肤插件)为插件创建皮肤。更多关于CSS框架
  • 新版的ThemeRoller(V2)。
  • 健全的演示和文档。
  • 完全离线的帮助文档。
  • 重构了download builder,即使javascript被禁用,这个插件仍然能运作。
  • 皮肤打包。
    点击这里可以立即下载所有皮肤: jquery-ui-themes-1.7.zip,svn: http://jquery-ui.googlecode.com/svn/tags/1.7/themes/
  • 为jQuery UI新建了一个网站http://www.jqueryui.com/
    这个网站和主站分开,专注于UI研发。

Popularity: 15% [?]

jQuery1.3 正式版发布

2009年1月16日 admin 没有评论

英文文档:http://docs.jquery.com/Release:jQuery_1.3

jQuery 1.3  经过几个Beta测试以后,今天正式发布了。

较之1.2.6,它做要有这样一些更新。

一、更为强大的选择器。

jQuery 1.3 的选择器较之以前的更为强健,更具备可扩展性,并且完全独立(虽然可扩展性会牺牲一些性能)

根据jQuery官方的说明文档,这本版本较之上一版本又提高了49%的性能。

性能提高图释

二、Live 事件
新版的jQ可以无缝将某一个事件绑定到现在后以后的所有元素上。这个问题其实之前的重复绑定问题,你是否还记得当你append()后的元素无法使用,迫不得已在bind一下或者是在代码上写onclick的尴尬?呵呵,live()出马,一个顶N啊!

比如以前是这样写的。

[-]?View Code JAVASCRIPT
$(document).ready(function(){
	$("p").bind("click", addF);
	function addF(){
		$(this).append("<p>hello</p>");
	}
});

那么现在我们就可以这样写了

[-]?View Code JAVASCRIPT
$(document).ready(function(){
    $("p").live("click", function(){
      $(this).append("<p>hello</p>");
    });
});

如果你想看更多的关于live和die请看下面的两个链接:
live:http://docs.jquery.com/Events/live
die:http://docs.jquery.com/Events/die

当然jQ肯定也不会忘记提一下我们的性能又提高啦(哈哈)

三、Event对象
主要是根据W3c规范,做了一个标准的对象。当然,因此有了一些变化。

四、注入效率的提升
插入的效率得到了提高,看来以后我们append等事情能更快了。
插入函数的效率得到了提高图释

五、重写了Offset()
据官方说跨浏览器更好了,速度更快了。
offset()图释

六、取消了浏览器监听
改成jQuery.support,具体看它下面跟的“Change”。。

对了,JQ现在用YUI压缩了,呵呵,还是YUI好。

下载链接:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.min.js&downloadBtn=%3CSPAN%3EDownload%3C%2FSPAN%3E

英文文档:http://docs.jquery.com/Release:jQuery_1.3

2009-1-14,jQuery 1.3发布正式版,尽管之前版本的jQ已经让我们感受到了诸多便利,但是1.3还是给了我们额外的惊喜。
大家可以参考jQuery对于这个版本发布的官方文档:http://docs.jquery.com/Release:jQuery_1.3
在官方的文档里你可以看到更详细的数据,不过在本篇里你可以看到更细节的分析。
==Sizzle,独立的css选择器引擎==
jQuery在之前的版本里已经逐渐酝酿出css选择器模块的独立。因为Sizzle的独立性,jQuery和Dojo开发组也有意通过Sizzle来开展长期合作(也就是共享部分代码)。
Sizzle也兼容之前版本的jQuery,那些依赖于低版本的jQuery的代码并无重写之忧。
Sizzle在最常见的使用场景中,也有了不同程度的性能提高。(什么是最常见使用的场景呢?可以参考http://ejohn.org/blog/selectors-that-people-actually-use/)
==Live,持久化事件绑定==
通常我们在使用jQuery的过程中,新构造的DOMElement也需要重新完成其事件绑定的逻辑。而jQuery 1.3 里的live函数可以让我们用类似于css behavior的方式来为未来要产生的DOMElement绑定事件。(当然你要拿它当css用,也无妨)
随之对应的,解除这种持久化事件绑定的方式可以用die来完成。
在sizzle.js的源码开头的几行,我们可以看到实现的思路。
document.addEventListener(”DOMAttrModified”, invalidate, false);
document.addEventListener(”DOMNodeInserted”, invalidate, false);
document.addEventListener(”DOMNodeRemoved”, invalidate, false);
==Event对象重封装==
jQuery.Event的主要功能被封装。(jQ有分拆IPO的倾向)
==html注入重写==
性能大幅提高(about 6x faster overall)。
还提供了新用法$(”<script/>”) 以代替$(document.createElement(”script”))
==Offset重写==
性能大幅提高(almost 3x jump)
==jQuery.support,浏览器识别==
jQuery.browser是用useragent来识别浏览器,新增的jQuery.support以js的功能来识别浏览器。
==更新==
jQuery UI and the Validation plugin会同步更新。
如果你有依赖低版本的jQuery的代码的话,请阅读potentially-breaking changes
==Downloading==
jQuery Minified (18kb Gzipped)
jQuery Regular (114kb)
也可以用 http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js for a quickly-loading jQuery
==不兼容的Changes==
[@attr]不再需要写@了。(个人感觉这是一个很坏的change)
使用trigger( event, [data] )触发的事件现在会造成冒泡。(言下之意就是以前不会,以前没在意这个细节)
ready()不会等待所有的.css文件下载完毕才执行。(页面上的css引用要写在js前面了)
isFunction被简化。
(原来 !!fn && typeof fn != “string” && !fn.nodeName && fn.constructor != Array && /^[\s[]?function/.test( fn + “” )
现在 toString.call(obj) === “[object Function]” ,有很多你想不到的东西的typeof会是”Function”)
逗号选择器的顺序有可能改变(因为Browsers that support querySelectorAll (Safari, Firefox 3.1+, Opera 10+, IE 8+),而它们返回的顺序和jQuery现有逻辑不同)
trigger 和 triggerHandler 原来提供的data形参可以接受一个数组,现在必须是类似于options的对象
(原来按以下对象属性的数组也可以被接受,{type: type,target: elem,preventDefault: function(){},stopPropagation: function(){},timeStamp: now()})
“extra”函数被去除(原来就没有写进文档里),如果trigger 和 triggerHandler 里data参数里提供了多余的成员,如{fa:function(){},fb:function(){},fc:function(){},type: type,target: elem,preventDefault: function(){},stopPropagation: function(){},timeStamp: now()},如果该成员isFunction的话,也会随trigger 和 triggerHandler被执行。
interal jQuery.event.trigger不再返回最后一个hander的返回值,只返回true or false(需要的话可以用jQuery.Event 来作为返回值的句柄)
需要在标准模式下运行jQuery,因为有一些函数在quirks mode运行不正确(Safari下甚至如此重要的一些选择器函数都会出错)
==增强特性==
(FEATURES)
===Core===
New queueing methods which you can use to manage existing queues (such as the animation queue) or construct new ones to manage completely separate workflows.(不是很理解有什么个特法)
jQuery 实例对象新增了两个属性selector and .context 。(以唤回你在构造这些对象时的记忆,jQuery( expression, context ) )
===Selector===
新增支持 复杂的not表达式。如 $(”:not(a, b)”) and $(”:not(div a)”)
not表达式其实是反向选择器,老实说我觉得这是一个很重要的特性
===Attributes===
jQuery实例对象新增成员函数toggleClass( String class, Boolean switch )
===Traversing===
jQuery实例对象新增成员函数 .closest( selector ) 以定位位置最接近的符合selector的ancestor element(祖先元素)。(会递归匹配parentNode,我原以为parent( [expr] ) 是做这个用的,后来发现parent( [expr] )只是很直白的选出以expr构造出的jQuery实例对象或者jQuery实例对象this的parentNode)
jQuery实例对象成员函数is()可以支持复杂选择器
===Manipulation===
$(”<script/>”)相当于原来的$(document.createElement(”script”)),前面介绍过了
===CSS===
Offset 重写了,性能提高,前面介绍过了
===Events===
Live Events
jQuery Event Object
.trigger()冒泡
(前面都介绍过了)
===Effects===
.hide() and .show() 重写,性能提高。
animate更加平滑,因为原来只控制width, height,opacity,现在连margin and padding控制了
未提供duration参数的animate调用不会有渐变,而是直接被同步化(因为原来animate的渐变都是异步的)的设为最终值
.toggle( Boolean switch ) 所有类似于toggle的函数(如toggleClass)都增加了switch这个参数支持,把toggle类的对象分为正反两种状态的话(如采用和不 采用,显示和隐藏),if(switch)则为正状态,反之亦然。
参考下面的代码:
var flip = 0;
$(”button”).click(function () {
$(”p”).toggle( flip++ % 2 == 0 );
});
原来无switch参数的时候相当于总是( flip++ % 2 == 0 ),现在我们可以自己控制了。
这是一个很好的新增特性。
jQuery.fx.off=true用来禁止所有animate
===Ajax===
jQuery.ajax( options )
options新增了{Function(data, type) dataFilter},可以用来在jQuery.ajax返回data前再处理一下data(比如过滤)
options新增了{Function() xhr},以xhr返回值作为XMLHttpRequest对象。这是一个很有用的增强,在跨域ajax时,一种做法是制造一个假的XMLHttpRequest。
load( url, [data], [callback] )的参数data可以是String了
===Utilities===
新增了jQuery.isArray( obj )函数
===Internals===
不再使用ua来作为识别浏览器的判断
YUI Compressor作为默认jQuery压缩工具
jQuery不再使用.constructor and instanceof(Will help to give jQuery better cross-frame support.)
==TESTING==
brabra
==PERFORMANCE==
css选择器,delegate过滤器,DOM修改操作(尤其是插入),.offset(),.hide()/.show() 都获得了不同程度的性能改进

Popularity: 32% [?]

分类: JavaScript 标签:

parseInt函数

2008年10月27日 admin 1 条评论

今天遇到了一个问题,parseInt(010) 结果等于 8,郁闷。

在网上搜了一下,原来 parseInt函数 还有个参数,用来分辨进制的,

parseInt(’010′,10) 结果为:10 意思为 把 “010”转换为10进制数,哈哈。

Popularity: 22% [?]

JavaScript自定义对象

2008年10月20日 admin 没有评论

JavaScript自定义对象,收集于互联网,供大家学习。

一,概述

在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类、Hashtable类等等。

目前在Javascript中,已经存在一些标准的类,例如Date、Array、RegExp、String、Math、Number等等,这为我们编程提供了许多方便。但对于复杂的客户端程序而言,这些还远远不够。

与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很少,许多编程需求需要我们自己去实现,例如Javascript没有哈西表Hashtable,这样的话在处理键值方面就很不方便。

因此,我个人认为一个完整的Javascript对象视图应该如下:

二,基本概念

1,自定义对象。
根据JS的对象扩展机制,用户可以自定义JS对象,这与Java语言有类似的地方。
与自定义对象相对应的是JS标准对象,例如Date、Array、Math等等。
2,原型(prototype)
在JS中,这是一种创建对象属性和方法的方式,通过prototype可以为对象添加新的属性和方法。
通过prototype我们可以为JS标准对象添加新的属性和方法,例如对于String对象,我们可以为其添加一个新的方法trim()。
与严格的编程语言(例如Java)不同,我们可以在运行期间为JS对象动态添加新的属性。

三,语法规则

1,对象创建方式

1)对象初始化器方式

格式:objectName = {property1:value1, property2:value2,…, propertyN:valueN}
property是对象的属性
value则是对象的值,值可以是字符串、数字或对象三者之一
例如: var user={name:“user1”,age:18};
var user={name:“user1”,job:{salary:3000,title:programmer}
以这种方式也可以初始化对象的方法,例如:
var user={name:“user1”,age:18,getName:function(){
return this.name;
}
}
后面将以构造函数方式为重点进行讲解,包括属性和方法的定义等等,也针对构造函数的方式进行讲解。

2)构造函数方式

编写一个构造函数,并通过new方式来创建对象,构造函数本可以带有构造参数
例如:
function User(name,age){
this.name=name;
this.age=age;
this.canFly=false;
}
var use=new User();

2,定义对象属性

1)JS中可以为对象定义三种类型的属性:私有属性、实例属性和类属性,与Java类似,私有属性只能在对象内部使用,实例属性必须通过对象的实例进行引用,而类属性可以直接通过类名进行引用。

2)私有属性定义
私有属性只能在构造函数内部定义与使用。
语法格式:var propertyName=value;
例如:
function User(age){
this.age=age;
var isChild=age<12;
this.isLittleChild=isChild;
}
var user=new User(15);
alert(user.isLittleChild);//正确的方式
alert(user.isChild);//报错:对象不支持此属性或方法

3)实例属性定义,也存在两种方式:
prototype方式,语法格式:functionName.prototype.propertyName=value
this方式,语法格式:this.propertyName=value,注意后面例子中this使用的位置
上面中value可以是字符创、数字和对象。
例如:
function User(){ }
User.prototype.name=“user1”;
User.prototype.age=18;
var user=new User();
alert(user.age);
—————————————–
function User(name,age,job){
this.name=“user1”;
this.age=18;
this.job=job;
}
alert(user.age);

3)类属性定义
语法格式:functionName.propertyName=value
例如:
function User(){ }
User.MAX_AGE=200;
User.MIN_AGE=0;
alert(User.MAX_AGE);
参考JS标准对象的类属性:
Number.MAX_VALUE //最大数值 Math.PI //圆周率

4)对于属性的定义,除了上面较为正规的方式外,还有一种非常特别的定义方式,语法格式: obj[index]=value
例子:
function User(name){
this.name=name;
this.age=18;
this[1]=“ok”;
this[200]=“year”;
}
var user=new User(“user1”);
alert(user[1]);
在上面例子中,要注意:不同通过this[1]来获取age属性,也不能通过this[0]来获取name属性,即通过index方式定义的必须使用index方式来引用,而没有通过index方式定义的,必须以正常方式引用

3,定义对象方法

1)JS中可以为对象定义三种类型的方法:私有方法、实例方法和类方法,与Java类似:
私有方法只能在对象内部使用
实例方法必须在对象实例化后才能使用
类方法可以直接通过类名去使用
注意:方法的定义不能通过前面所说的index方式进行。
2)定义私有方法
私有方法必须在构造函数体内定义,而且只能在构造函数体内使用。
语法格式:function methodName(arg1,…,argN){ }
例如:
function User(name){
this.name=name;
function getNameLength(nameStr){
return nameStr.length;
}
this.nameLength=getNameLength(this.name);
}
3)定义实例方法,目前也可以使用两种方式:
prototype方式,在构造函数外使用,语法格式:
functionName.prototype.methodName=method;
或者
functionName.prototype.methodName=function(arg1,…,argN){};
this方式,在构造函数内部使用,语法格式:
this.methodName=method;
或者
this.methodName=function(arg1,…,argN){};
上面的语法描述中,method是外部已经存在的一个方法,methodName要定义的对象的方法,意思就是将外部的一个方法直接赋给对象的某个方法。
以function(arg1,…,argN){}的方式定义对象方法是开发人员应该掌握的。

定义实例方法的一些例子:例子1
function User(name){
this.name=name;
this.getName=getUserName;
this.setName=setUserName;
}
function getUserName(){
return this.name;
}
Function setUserName(name){
this.name=name;
}

定义实例方法的一些例子:例子2
function User(name){
this.name=name;
this.getName=function(){
return this.name;
};
this.setName=function(newName){
this.name=newName;
};
}

定义实例方法的一些例子:例子3
function User(name){
this.name=name;
}
User.prototype.getName=getUserName;
User.prototype.setName=setUserName();
function getUserName(){
return this.name;
}
Function setUserName(name){
this.name=name;
}

定义实例方法的一些例子:例子4
function User(name){
this.name=name;
}
User.prototype.getName=function(){
return this.name;
};
User.prototype.setName=function(newName){
this.name=newName;
};

4)定义类方法
类方法需要在构造函数外面定义,可以直接通过构造函数名对其进行引用。
语法格式:
functionName.methodName=method;
或者
functionName.methodName=function(arg1,…,argN){};
例子:
function User(name){
this.name=name;
}
User.getMaxAge=getUserMaxAge;
function getUserMaxAge(){
return 200;
}
或者
User.getMaxAge=function(){return 200;};
alert(User.getMaxAge());

4,属性与方法的引用

1)从可见性上说:
私有属性与方法,只能在对象内部引用。
实例属性与方法,可以在任何地方使用,但必须通过对象来引用。
类属性与方法,可以在任何地方使用,但不能通过对象的实例来引用(这与Java不同,在Java中静态成员可以通过实例来访问)。
2)从对象层次上说:
与Java bean的引用类似,可以进行深层次的引用。
几种方式:
简单属性:obj.propertyName
对象属性:obj.innerObj.propertyName
索引属性:obj.propertyName[index]
对于更深层次的引用与上面类似。
3)从定义方式上说:
通过index方式定义的属性,必须通过index方式才能引用。
通过非index方式定义的属性,必须通过正常的方式才能引用。
另外注意:对象的方法不能通过index方式来定义。

5,属性与方法的动态增加和删除
1)对于已经实例化的对象,我们可以动态增加和删除它的属性与方法,语法如下(假定对象实例为obj):
动态增加对象属性
obj.newPropertyName=value;
动态增加对象方法
obj.newMethodName=method或者=function(arg1,…,argN){}
动态删除对象属性
delete obj.propertyName
动态删除对象方法
delete obj.methodName

2)例子:
function User(name){
this.name=name;
this.age=18;
}
var user=new User(“user1”);
user.sister=“susan”;
alert(user.sister);//运行通过
delete user.sister;
alert(user.sister);//报错:对象不支持该属性

user.getMotherName=function(){return “mary”;}
alert(user.getMotherName());//运行通过
delete user.getMotherName;
alert(user.getMotherName());//报错:对象不支持该方法

四,总结

1,自定义对象机制,是JS最为吸引人的机制之一,对于C++和Java程序员而言,这简直太棒了!
2,对象创建存在两种方式:对象初始化器和构造函数。
3,对象属性和方法,具有可见性的约束,不同可见性的属性和方法,其定义方式也不一样。

五,应用案例

下面将采用一个应用案例:网上购物商城
应用案例的实现步骤:
1,场景设计

1)登录场景

2)购物场景

3)结算场景

2,界面设计

1)登录页面

2)购物页面

3)结算页面

3,类图设计

4,代码实现

1)Product类

2)ShoppingCart类


3)ShoppingSession类

4)ShoppingCartParser类

Popularity: 22% [?]