分类: JavaScript

JS中的怪胎继承方法

没有评论

2012 年 12 月 31 日 at 上午 11:03分类:JavaScript

最近做个东西需要用到JS的继承,之前不是很了解,今天看了资料 整理下 ,方便自己查阅。
js继承有几种实现方式:
1、call()方法方式

call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

function test(str){ 
    alert(this.name + " " + str); 
} 
var object = new Object(); 
object.name = "zhangsan"; 
test.call(object,"langsin");//此时,第一个参数值object传递给了test类(即方法)中出现的this,而第二个参数"langsin"则赋值给了test类(即方法)的str 

function Parent(username){ 
    this.username = username; 
    this.hello = function(){ 
      alert(this.username); 
    } 
} 
function Child(username,password){ 
    Parent.call(this,username); 
    
    this.password = password; 
    this.world = function(){ 
      alert(this.password); 
    } 
} 
var parent = new Parent("zhangsan"); 
var child = new Child("lisi","123456"); 
parent.hello(); 
child.hello(); 
child.world(); 

2、apply()方法方式
apply方法接受2个参数,
A、第一个参数与call方法的第一个参数一样,即赋值给类(即方法)中出现的this
B、第二个参数为数组类型,这个数组中的每个元素依次赋值给类(即方法)所接受的参数

function Parent(username){ 
    this.username = username; 
    this.hello = function(){ 
      alert(this.username); 
    } 
} 
function Child(username,password){ 
    Parent.apply(this,new Array(username)); 
    this.password = password; 
    this.world = function(){ 
      alert(this.password); 
    } 
} 
var parent = new Parent("zhangsan"); 
var child = new Child("lisi","123456"); 
parent.hello(); 
child.hello(); 
child.world();

3、原型链方式,即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child,从而实现了继承

  
function Person(){ 
} 
Person.prototype.hello = "hello"; 
Person.prototype.sayHello = function(){ 
    alert(this.hello); 
} 
  
function Child(){ 
 } 
Child.prototype = new Person();//这行的作用是:将Parent中将所有通过prototype追加的属性和方法都追加到Child,从而实现了继承 
Child.prototype.world = "world"; 
Child.prototype.sayWorld = function(){ 
    alert(this.world); 
} 
  
var c = new Child(); 
c.sayHello(); 
c.sayWorld(); 

4、混合方式,混合了call方式、原型链方式

function Parent(hello){ 
    this.hello = hello; 
} 
Parent.prototype.sayHello = function(){ 
    alert(this.hello); 
} 

function Child(hello,world){ 
    Parent.call(this,hello);//将父类的属性继承过来 
    this.world = world;//新增一些属性 
} 

Child.prototype = new Parent();//将父类的方法继承过来 

Child.prototype.sayWorld = function(){//新增一些方法 
    alert(this.world); 
} 

var c = new Child("zhangsan","lisi"); 
c.sayHello(); 
c.sayWorld();

JavaScript eval处理JSON数据 为什么要加括号

没有评论

2011 年 12 月 01 日 at 下午 4:32分类:JavaScript | jQuery

由于Ajax的兴起,JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来,进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象。利用eval函数无疑是一种简单而直接的方法。在转化的时候需要将JSON字符串的外面包装一层圆括号:
var jsonObject = eval(“(” + jsonFormat + “)”);
为什么要加括号?
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。
举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的:
alert(eval(“{}”); // return undefined
alert(eval(“({})”);// return object[Object]

SWFUPLOAD上传插件使用方法

没有评论

2011 年 09 月 24 日 at 下午 5:14分类:JavaScript | PHP

详细使用方法:
点击查看详细

实现图片异步延迟加载技术

一条评论

2011 年 07 月 25 日 at 下午 10:57分类:JavaScript | jQuery

看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验。减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..
什么是ImageLazyLoad技术
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad 技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
怎么实现ImageLazyLoad
一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小)
在线压缩js http://closure-compiler.appspot.com/home
虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下:
1.导入JS插件

<script src="http://banu.blog.163.com/blog/jquery.js" type="text/javascript"></script> 
<script src="http://banu.blog.163.com/blog/jquery.lazyload.js" type="text/javascript"></script> 

2.在你的页面中加入如下的javascript:

$("img").lazyload(); 

这将会使所有的图片都延迟加载。
当然插件还有几个配置项可供设置。
1.改变threshold

$(“img”).lazyload({ threshold : 200 }); 

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。
2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
复制代码
代码如下:

$("img").lazyload({ 
placeholder : "img/grey.gif", 
event : "click" 
}); 

3.可以通过定义effect 参数来定义一些图片显示效果
复制代码
代码如下:

 
$("img").lazyload({ 
placeholder : "img/grey.gif", 
effect : "fadeIn" 
}); 

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致;
缺陷:
1.与Ajax技术的冲突;
2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题;
3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad
大家可以直接采用淘宝的延迟加载技术:(2kb大小)

http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js 

调用方法也是很简单的:

<script src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js" 
type="text/javascript"></script> <script type="text/javascript">// <![CDATA[KISSY.ImageLazyload();// ]]></script> 
注:该脚本依赖 yahoo-dom-event, 页面中需要加载 yui 2.x,你也可以直接引用下面的地址: 
<script src="http://kissy.googlecode.com/svn/trunk/third-party/yui2/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script> 

配置参数如下:
复制代码
代码如下:

<script type="text/javascript"> 
KISSY.ImageLazyload({ 
mod: "manual", // 延迟模式。默认为 auto 
diff: 200 // 当前屏幕下多远处的图片开始延迟加载。默认两屏外的图片才延迟加载 
}); 
</script> 

manual 模式时,需要手动将页面中需要延迟加载的图片的 src 属性名更改为 data-lazyload-src. 比如 SRP 页面,宝贝列表的后20个图片延迟加载。 输出时,html 代码为:

<img data-lazy-src="http://banu.blog.163.com/blog/path/to/img" alt="something" /> 

如果您是Jquery,Prototype等这些JS框架的粉丝,他们都有定制的LazyLoad Plugin提供;
可查看http://www.appelsiini.net/projects/lazyload.

判断滚动条到底部代码

一条评论

2011 年 06 月 23 日 at 上午 7:41分类:HTML | JavaScript | jQuery

废话不说,看代码:


    $(function(){
	$(window).scroll(function(){
		var bodyTop = document.documentElement.scrollTop + document.body.scrollTop;
                //当滚动条滚到一定距离时,执行代码
		if(bodyTop>10){
			alert(bodyTop);
		}
                //===============================================
		//滚动到底部时出发函数
		//滚动的当前位置+窗口的高度 >= 整个body的高度
		if(bodyTop+$(window).height() >= $(document.body).height()){
			alert('adqfadqs');
		}
               //===============================================
               //判断div内的滚动条是否到底部了
	      $("#div1").scroll(function(){
                   if($("#div1").height()==$("#div1").scrollTop())
                       alert("滚动条到底了");   
	       });
	});
	
         //判断div内的滚动条是否到底部了
	$(document).ready(function (){
              var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
              var nScrollTop = 0;   //滚动到的当前位置
              var nDivHight = $("#div1").height();
             $("#div1").scroll(function(){
                     nScrollHight = $(this)[0].scrollHeight;
                     nScrollTop = $(this)[0].scrollTop;
                    if(nScrollTop + nDivHight >= nScrollHight)
                         alert("滚动条到底部了");
                    });
             });
        })

JS获取style属性

没有评论

2011 年 05 月 05 日 at 下午 5:36分类:CSS | HTML | JavaScript

<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>currentStyle</title>
    <!-- <style type="text/css">
    </style>-->
    <link rel="Stylesheet" href="StyleSheet.css" type="text/css" />
</head>
<body>
    <div id="qq" class="divtitle">
        测试样式
    </div>
    <script type="text/javascript"> 
//document.defaultView.getComputedStyle 这是w3c标准方法,取得元素的样式信息,因为有些样式是在外部css文件定义的,所以用element.style是取不到的 如果是IE,可以用 element.currentStyle["name"]
   function GetCurrentStyle (obj, prop) 
   { 
      if (obj.currentStyle) //IE
      { 
          return obj.currentStyle[prop]; 
      }
      else if (window.getComputedStyle) //非IE
      { 
          propprop = prop.replace (/([A-Z])/g, "-$1"); 
          propprop = prop.toLowerCase (); 
          return document.defaultView.getComputedStyle(obj,null)[propprop]; 
      } 
     return null;
   } 
   var dd=document.getElementById("qq"); 
   alert(GetCurrentStyle(dd,"color")); 
    </script>
</body>
</html>
外部样式:StyleSheet
.divtitle
        {
            background: blue;
            color: #cdcdcd;
            width: 200px;
        }

JS函数

var getCss = function(o,key){
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; 
};

用oncontextmenu事件单禁用右键菜单

没有评论

2011 年 05 月 05 日 at 下午 4:13分类:JavaScript

onconTextmenu=window.event.returnValue=false;右键菜单禁用,用这个可以禁止复制。
在中加入属性代码:
oncontextmenu=”return false”
onselectstart=”return false” 禁止选中网页上的内容
oncopy=”return false” 防复制用户在网页上选中的内容
防止用户另存网页:
利用

标签,能防止网页的直接另存,但不能防止网页被人使用工具下载
*为通配符。

<html> 
<head> 
<title>OnContextMenu事件</title>
<script language="JavaScript"> 
<!--
function uFunction()

{     document.all.infoDiv.innerHTML='你按下了鼠标右键,但是右键菜单不能 显示!';}

function uFunction2()

{    document.all.infoDiv.innerHTML='你按下了Ctrl+鼠标右键,可以 显示右键菜单。';}

//-->
</script> 
</head>
<body oncontextmenu="if(!event.ctrlKey){uFunction();return false}else{uFunction2()}">
<div id="infoDiv">你按下了鼠标右键,但是右键菜单不能 显示!<br>你按下了Ctrl+鼠标右键,可以显示右键菜单。 
</div></body> 
</html>

************************************************************
附:
JS中判断鼠标按键的问题。
IE
左键是 window.event.button = 1
右键是 window.event.button = 2
中键是 window.event.button = 4
没有按键动作window.event.button = 0

Firefox
左键是 event.button = 0
右键是 event.button = 2
中键是 event.button = 1
没有按键动作 event.button = 0

Opera 7.23/7.54
鼠标左键是 window.event.button = 1
没有按键动作 window.event.button = 1
右键和中键无法获取

Opera 7.60/8.0
鼠标左键是 window.event.button = 0
没有按键动作 window.event.button = 0
右键和中键无法获取

另外:屏蔽右键的是window.event.button = 3

************************************************************
Window.event对象代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
Window.event对象只在事件发生的过程中才有效。
Window.event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。
如果事件触发后,鼠标移出窗口外,则返回的值为 -1 ,这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

Event对象的属性有:
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

详情:点击

js中正则对象的方法说明

没有评论

2011 年 05 月 05 日 at 下午 1:36分类:JavaScript

exec 方法
用正则表达式模式在字符串中运行查找,并返回包含该查找结果的一个数组。
rgExp.exec(str)
参数 rgExp : 必选项。包含正则表达式模式和可用标志的正则表达式对象。
str : 必选项。要在其中执行查找的 String 对象或字符串文字。
说明
如果 exec 方法没有找到匹配,则它返回 null。如果它找到匹配,则 exec 方法返回一个数组,并且更新全局 RegExp 对象的属性,以反映匹配结果。数组的0元素包含了完整的匹配,而第1到n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志 (g) 的 match 方法。
如果为正则表达式设置了全局标志,exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志,exec 忽略 lastIndex 的值,从字符串的起始位置开始搜索。
exec 方法返回的数组有三个属性,分别是 input、index 和 lastIndex。Input 属性包含了整个被查找的字符串。Index 属性中包含了整个被查找字符串中被匹配的子字符串的位置。LastIndex 属性中包含了匹配中最后一个字符的下一个位置。
示例
下面的例子举例说明了 exec 方法的用法:

function RegExpTest(){
  var ver = Number(ScriptEngineMajorVersion() + "." + ScriptEngineMinorVersion())
  if (ver >= 5.5){                 // 测试 JScript 的版本。
    var src = "The rain in Spain falls mainly in the plain.";
    var re = /\w+/g;               // 创建正则表达式模式。
    var arr;
    while ((arr = re.exec(src)) != null)
       document.write(arr.index + "-" + arr.lastIndex + "\t" + arr);
  }
  else{
    alert("请使用 JScript 的更新版本");
  }
} 

match 方法
使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回。
stringObj.match(rgExp)

function MatchDemo(){
   var r, re;         // 声明变量。
   var s = "The rain in Spain falls mainly in the plain";
   re = /ain/ig;      // 创建正则表达式模式。
   r = s.match(re);   // 尝试去匹配搜索字符串。
   return(r);         // 返回的数组包含了所有 "ain" 
                      // 出现的四个匹配。
}

search 方法
返回与正则表达式查找内容匹配的第一个子字符串的位置。
stringObj.search(rgExp)
参数 stringObj 必选项。要在其上进行查找的 String 对象或字符串文字。
rgExp 必选项。包含正则表达式模式和可用标志的正则表达式对象。
说明
search 方法指明是否存在相应的匹配。如果找到一个匹配,search 方法将返回一个整数值,指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配,则返回 -1。
示例

function SearchDemo(){  
 var r, re;                   // 声明变量。  
 var s = "The rain in Spain falls mainly in the plain.";
 var re = /falls/i;            
// 创建正则表达式模式。 
  r = s.search(re);            
// 查找字符串。  
   return(r);                 
  // 返回 Boolean 结果。
}

test 方法
返回一个 Boolean 值,它指出在被查找的字符串中是否存在模式。
rgexp.test(str)
参数 rgexp 必选项。包含正则表达式模式或可用标志的正则表达式对象。
str 必选项。要在其上测试查找的字符串。
说明
test 方法检查在字符串中是否存在一个模式,如果存在则返回 true,否则就返回 false。
全局 RegExp 对象的属性不由 test 方法来修改。

function TestDemo(re, s){  
 var s1; 
// 检查字符串是否存在正则表达式。
   if (re.test(s))                 
         s1 = " contains ";           // s 包含模式。   
  else      s1 = " does not contain ";   // s 不包含模式。   
  return("'" + s + "'" + s1 + "'"+ re.source + "'"); // 返回字符串。
}

split 方法
将一个字符串分割为子字符串,然后将结果作为字符串数组返回。
stringObj.split([separator[, limit]])
参数 stringObj 必选项。要被分解的 String 对象或文字。该对象不会被 split 方法修改。
separator 可选项。字符串或 正则表达式 对象,它标识了分隔字符串时使用的是一个还是多个字符。如果忽略该选项,返回包含整个字符串的单一元素数组。
limit 可选项。该值用来限制返回数组中的元素个数。
说明
split 方法的结果是一个字符串数组,在 stingObj 中每个出现 separator 的位置都要进行分解。separator 不作为任何数组元素的部分返回。

function SplitDemo(){   var s, ss;  
 var s = "The rain in Spain falls mainly in the plain.";   // 在每个空格字符处进行分解。 
  ss = s.split(" ");   return(ss);
}

JS判断浏览器类型

没有评论

2011 年 05 月 05 日 at 上午 11:11分类:JavaScript

你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。
几天前,浏览器家族有刚诞生了一位小王子,就是Google推出的Chrome浏览器。由于Chrome出生名门,尽管他还是个小家伙,没有人敢小看他。以后,咱们常说浏览器的“四大才子”就得改称为“五朵金花”了。
在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子。虽然说现在有一些WEB技术(AJAX、ExtJS等)已经帮我们处理不同浏览器的兼容问题,但是有时候自己来解决岂不是更好,浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。
JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下,值判断出浏览器类型之后,还需判断浏览器版本才能处理兼容性问题,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。
我们先来分析一下各种浏览器的特征及其userAgent。
IE
只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数。只要判断window对象存在 ActiveXObject函数,就可以明确判断出当前浏览器是IE。而IE各个版本典型的userAgent如下:
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
其中,版本号是MSIE之后的数字。
Firefox
Firefox中的DOM元素都有一个getBoxObjectFor函数,用来获取该DOM元素的位置和大小(IE对应的中是 getBoundingClientRect函数)。这是Firefox独有的,判断它即可知道是当前浏览器是Firefox。Firefox几个版本的 userAgent大致如下:
Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
其中,版本号是Firefox之后的数字。
Opera
Opera提供了专门的浏览器标志,就是window.opera属性。Opera典型的userAgent如下:
Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0
其中,版本号是靠近Opera的数字。
Safari
Safari浏览器中有一个其他浏览器没有的openDatabase函数,可做为判断Safari的标志。Safari典型的userAgent如下:
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
其版本号是Version之后的数字。
Chrome
Chrome有一个MessageEvent函数,但Firefox也有。不过,好在Chrome并没有Firefox的getBoxObjectFor 函数,根据这个条件还是可以准确判断出Chrome浏览器的。目前,Chrome的userAgent是:
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
其中,版本号在Chrome只后的数字。
有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧。
只要了解了以上信息,我们就可以根基这些特征来判断浏览器类型及其版本了。我们会将判断的结果保存在Sys名字空间中,成为前端框架的基本标志信息,供今后的程序来读取。如果判断出谋种浏览器,Sys名字空间将有一个该浏览器名称的属性,其值为该浏览器的版本号。例如,如果判断出IE 7.0,则Sys.ie的值为7.0;如果判断出Firefox 3.0,则Sys.firefox的值为3.0。下面是判断浏览器的代码:

    <script type="text/javascript">
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        if (window.ActiveXObject)
            Sys.ie = ua.match(/msie ([\d.]+)/)[1]
        else if (document.getBoxObjectFor)
            Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
        else if (window.MessageEvent && !document.getBoxObjectFor)
            Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
        else if (window.opera)
            Sys.opera = ua.match(/opera.([\d.]+)/)[1]
        else if (window.openDatabase)
            Sys.safari = ua.match(/version\/([\d.]+)/)[1];
        
        //以下进行测试
        if(Sys.ie) document.write('IE: '+Sys.ie);
        if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
        if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
        if(Sys.opera) document.write('Opera: '+Sys.opera);
        if(Sys.safari) document.write('Safari: '+Sys.safari);
    </script>

我们把对IE的判断放在第一,因为IE的用户最多,其次是判断Firefox。按使用者多少的顺序来判断浏览器类型,可以提高判断效率,少做无用功。之所以将Chrome放在第三判断,是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中,在分析浏览器版本时,用到了正则表达式来析取其中的版本信息。
如果你的JavaScript玩得很高,你还可以将前面的判断代码写成这样:

 <script type="text/javascript">
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] :
        document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] :
        window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] :
        window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] :
        window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0;
        
        //以下进行测试
        if(Sys.ie) document.write('IE: '+Sys.ie);
        if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
        if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
        if(Sys.opera) document.write('Opera: '+Sys.opera);
        if(Sys.safari) document.write('Safari: '+Sys.safari);
    </script>

这样可以使JavaScript代码更精简些。当然,可读性稍差一些,就看你是重视效率还是重视可维护性了。
使用不同特征来判断浏览器的方法,虽然在速度上比用正则表达式分析userAgent要来的快,不过这些特征可能会随浏览器版本而变化。比如,一种浏览器本来独有的特性取得了市场上的成功,其他浏览器也就可能跟着加入该特性,从而使该浏览器的独有特征消失,导致我们的判断失败。因此,相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况,反正判断版本信息也需要解析浏览器的userAgent的。
通过分析各类浏览器的userAgent信息,不难得出分辨各类浏览器及其版本的正则表达式。而且,对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是,我们可以写出下面的代码:

<script type="text/javascript">
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

        //以下进行测试
        if (Sys.ie) document.write('IE: ' + Sys.ie);
        if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
        if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
        if (Sys.opera) document.write('Opera: ' + Sys.opera);
        if (Sys.safari) document.write('Safari: ' + Sys.safari);
    </script>

其中,采用了“… ? … : …”这样的判断表达式来精简代码。判断条件是一条赋值语句,既完成正则表达式的匹配及结果复制,又直接作为条件判断。而随后的版本信息只需从前面的匹配结果中提取即可,这是非常高效的代码。
以上的代码都是为了打造前端框架所做的预研,并在五大浏览器上测试通过。今后,判断某种浏览器只需用if(Sys.ie)或 if(Sys.firefox)等形式,而判断浏览器版本只需用if(Sys.ie == ’8.0′)或if(Sys.firefox == ’3.0′)等形式,表达起来还是非常优雅的。
前端框架项目已经启动,一切就看过程和结果了…

Jquery中的this与$(this)

没有评论

2011 年 04 月 21 日 at 下午 4:15分类:JavaScript | jQuery

$(this)生成的是什么

$()生成的是什么呢?实际上$()=jquery(),那么也就是说返回的是一个jquery的对象。
题外话:通常我们为了简便直接使用$(),实际上,该函数省略了一个参数context,即$(selector)=$(selector,document).如果指定context,可以指定context为一个dom元素集或者jquery对象。
那么依照,$()返回的是jquery对象这一结论,我们可以得出$(this)得到的是一个jquery对象.我们可以使用万能的alert()方法打印出一个对象:
alert($(‘#btn’));显示的结果:是一个object,不用考虑,该object自然是jquery的对象咯。也即是说我们用通过$(‘#btn’)来调用jquery的方法和属性等。

this代表什么?

this,编程的人都知道this表示上下文所处的这个对象,这个自然是不错的,可是这个对象到底是个什么对象呢?加入js里面也有getType的话返回的值会是什么呢?其实js里面不需要使用getType,因为我们有万能的alert.请看看下面的代码:

$('#btn').bind("click",function(){
alert(this);
alert($(this));
});

根据我们的经验(因为$()生成的是jquery的对象嘛),this自然是一个jquery的对象咯。可是我们看看返回的结果:
返回的是什么?【object HTMLInputElement】——伟大的html对象,嘿嘿。所以我们通常在直接使用this.val()或者直接通过this来调用jquery所特有的方法或属性的时候会报错误: 为什么呢?明知故问!html对象当然“不包含属性或方法”了。那么为什么在一个jquery对象的上下文中调用this返回的是一个html对象而不是jquery对象 呢?翻遍jquery的api文档,貌似jquery中并未对this这一关键字进行过特殊“处理”,也就是说这里this是js中的,而不是jquery重新定义了的。so…当然这仅仅是我自己的想法,如果有对此更了解的朋友可以留言更正。而我们再看一下以上代码中alert($(this));的返回,自然是jquery的对象了,在此调用jquery特有的方法和属性,完全没有问题。
结论:
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性,方法
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。