<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>网站前端,web前端,前端脚本,前端优化&#124;时代前端</title>
	<atom:link href="http://www.52shidai.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.52shidai.com</link>
	<description>网站前端研究中心</description>
	<lastBuildDate>Tue, 27 Jul 2010 01:33:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>JavaScript的function内置对象，this的关系深度解析</title>
		<link>http://www.52shidai.com/javascript/587.html</link>
		<comments>http://www.52shidai.com/javascript/587.html#comments</comments>
		<pubDate>Tue, 27 Jul 2010 01:33:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[function]]></category>
		<category><![CDATA[this]]></category>
		<category><![CDATA[内置对象]]></category>
		<category><![CDATA[解析]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=587</guid>
		<description><![CDATA[函数是进行模块化程序设计的基础，编写复杂的Ajax应用程序，必须对函数有更深入的了解。 javascript中的函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前，先看一下函数的使用语法： 以下是引用片段： function func1(…){…}  var func2=function(…){…};  var func3=function func4(…){…};  var func5=new Function();   这些都是声明函数的正确语法。它们和其他语言中常见的函数或之前介绍的函数定义方式有着很大的区别。那么在JavaScript中为什么能这么写？它所遵循的语法是什么呢？下面将介绍这些内容。 认识函数对象（Function Object） 可以用function关键字定义一个函数，并为每个函数指定一个函数名，通过函数名来进行调用。在JavaScript解释执行时，函数都是被维护为一个对象，这就是要介绍的函数对象（Function Object）。 函数对象与其他用户所定义的对象有着本质的区别，这一类对象被称之为内部对象，例如日期对象（Date）、数组对象（Array）、字符串对象（String）都属于内部对象。这些内置对象的构造器是由JavaScript本身所定义的：通过执行new Array()这样的语句返回一个对象，JavaScript内部有一套机制来初始化返回的对象，而不是由用户来指定对象的构造方式。 在JavaScript中，函数对象对应的类型是Function，正如数组对象对应的类型是Array，日期对象对应的类型是Date一样，可以通过new Function()来创建一个函数对象，也可以通过function关键字来创建一个对象。为了便于理解，我们比较函数对象的创建和数组对象的创建。先看数组对象：下面两行代码都是创建一个数组对象myArray： 以下是引用片段： var myArray=[];  //等价于  var myArray=new Array();  同样，下面的两段代码也都是创建一个函数myFunction：  function myFunction(a,b){    return a+b;  }  //等价于  var myFunction=new Function(&#8220;a&#8221;,&#8221;b&#8221;,&#8221;return a+b&#8221;);   通过和构造数组对象语句的比较，可以清楚的看到函数对象本质，前面介绍的函数声明是上述代码的第一种方式，而在解释器内部，当遇到这种语法时，就会自动构造一个Function对象，将函数作为一个内部的对象来存储和运行。从这里也可以看到，一个函数对象名称（函数变量）和一个普通变量名称具有同样的规范，都可以通过变量名来引用这个变量，但是函数变量名后面可以跟上括号和参数列表来进行函数调用。 用new Function()的形式来创建一个函数不常见，因为一个函数体通常会有多条语句，如果将它们以一个字符串的形式作为参数传递，代码的可读性差。下面介绍一下其使用语法： 以下是引用片段： var funcName=new Function(p1,p2,&#8230;,pn,body);  参数的类型都是字符串，p1到pn表示所创建函数的参数名称列表，body表示所创建函数的函数体语句，funcName就是所创建函数的名称。可以不指定任何参数创建一个空函数，不指定funcName创建一个无名函数，当然那样的函数没有任何意义。 需要注意的是，p1到pn是参数名称的列表，即p1不仅能代表一个参数，它也可以是一个逗号隔开的参数列表，例如下面的定义是等价的： 以下是引用片段： new Function(&#8220;a&#8221;, &#8220;b&#8221;, &#8220;c&#8221;, [...]]]></description>
			<content:encoded><![CDATA[<p>函数是进行模块化程序设计的基础，编写复杂的Ajax应用程序，必须对函数有更深入的了解。</p>
<p>javascript中的函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前，先看一下函数的使用语法：</p>
<p>以下是引用片段：<br />
<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/function" title="查看 function 中所有日志" target="_blank">function</a></span> func1(…){…} <br />
var func2=<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/function" title="查看 function 中所有日志" target="_blank">function</a></span>(…){…}; <br />
var func3=<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/function" title="查看 function 中所有日志" target="_blank">function</a></span> func4(…){…}; <br />
var func5=new Function();  <br />
这些都是声明函数的正确语法。它们和其他语言中常见的函数或之前介绍的函数定义方式有着很大的区别。那么在JavaScript中为什么能这么写？它所遵循的语法是什么呢？下面将介绍这些内容。<br />
<strong>认识函数对象（Function Object）</strong></p>
<p>可以用function关键字定义一个函数，并为每个函数指定一个函数名，通过函数名来进行调用。在JavaScript解释执行时，函数都是被维护为一个对象，这就是要介绍的函数对象（Function Object）。</p>
<p>函数对象与其他用户所定义的对象有着本质的区别，这一类对象被称之为内部对象，例如日期对象（Date）、数组对象（Array）、字符串对象（String）都属于内部对象。这些<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e5%86%85%e7%bd%ae%e5%af%b9%e8%b1%a1" title="查看 内置对象 中所有日志" target="_blank">内置对象</a></span>的构造器是由JavaScript本身所定义的：通过执行new Array()这样的语句返回一个对象，JavaScript内部有一套机制来初始化返回的对象，而不是由用户来指定对象的构造方式。</p>
<p>在JavaScript中，函数对象对应的类型是Function，正如数组对象对应的类型是Array，日期对象对应的类型是Date一样，可以通过new Function()来创建一个函数对象，也可以通过function关键字来创建一个对象。为了便于理解，我们比较函数对象的创建和数组对象的创建。先看数组对象：下面两行代码都是创建一个数组对象myArray：</p>
<p>以下是引用片段：<br />
var myArray=[]; <br />
//等价于 <br />
var myArray=new Array(); <br />
同样，下面的两段代码也都是创建一个函数myFunction： <br />
function myFunction(a,b){ <br />
  return a+b; <br />
} <br />
//等价于 <br />
var myFunction=new Function(&#8220;a&#8221;,&#8221;b&#8221;,&#8221;return a+b&#8221;);  <br />
通过和构造数组对象语句的比较，可以清楚的看到函数对象本质，前面介绍的函数声明是上述代码的第一种方式，而在解释器内部，当遇到这种语法时，就会自动构造一个Function对象，将函数作为一个内部的对象来存储和运行。从这里也可以看到，一个函数对象名称（函数变量）和一个普通变量名称具有同样的规范，都可以通过变量名来引用这个变量，但是函数变量名后面可以跟上括号和参数列表来进行函数调用。</p>
<p>用new Function()的形式来创建一个函数不常见，因为一个函数体通常会有多条语句，如果将它们以一个字符串的形式作为参数传递，代码的可读性差。下面介绍一下其使用语法：</p>
<p>以下是引用片段：<br />
var funcName=new Function(p1,p2,&#8230;,pn,body); </p>
<p>参数的类型都是字符串，p1到pn表示所创建函数的参数名称列表，body表示所创建函数的函数体语句，funcName就是所创建函数的名称。可以不指定任何参数创建一个空函数，不指定funcName创建一个无名函数，当然那样的函数没有任何意义。</p>
<p>需要注意的是，p1到pn是参数名称的列表，即p1不仅能代表一个参数，它也可以是一个逗号隔开的参数列表，例如下面的定义是等价的：</p>
<p>以下是引用片段：<br />
new Function(&#8220;a&#8221;, &#8220;b&#8221;, &#8220;c&#8221;, &#8220;return a+b+c&#8221;) <br />
new Function(&#8220;a, b, c&#8221;, &#8220;return a+b+c&#8221;) <br />
new Function(&#8220;a,b&#8221;, &#8220;c&#8221;, &#8220;return a+b+c&#8221;) </p>
<p>JavaScript引入Function类型并提供new Function()这样的语法是因为函数对象添加属性和方法就必须借助于Function这个类型。</p>
<p>函数的本质是一个内部对象，由JavaScript解释器决定其运行方式。通过上述代码创建的函数，在程序中可以使用函数名进行调用。本节开头列出的函数定义问题也得到了解释。注意可直接在函数声明后面加上括号就表示创建完成后立即进行函数调用，例如：</p>
<p>以下是引用片段：<br />
var i=function (a,b){ <br />
  return a+b; <br />
}(1,2); <br />
alert(i);  <br />
这段代码会显示变量i的值等于3。i是表示返回的值，而不是创建的函数，因为括号“(”比等号“=”有更高的优先级。这样的代码可能并不常用，但当用户想在很长的代码段中进行模块化设计或者想避免命名冲突，这是一个不错的解决办法。<br />
需要注意的是，尽管下面两种创建函数的方法是等价的：</p>
<p>以下是引用片段：<br />
function funcName(){ <br />
  //函数体 <br />
} <br />
//等价于 <br />
var funcName=function(){ <br />
  //函数体 <br />
}  </p>
<p>但前面一种方式创建的是有名函数，而后面是创建了一个无名函数，只是让一个变量指向了这个无名函数。在使用上仅有一点区别，就是：对于有名函数，它可以出现在调用之后再定义；而对于无名函数，它必须是在调用之前就已经定义。例如：</p>
<p>以下是引用片段：<br />
＜script language=&#8221;JavaScript&#8221; type=&#8221;text/javascript&#8221;＞ <br />
＜!&#8211; <br />
func(); <br />
var func=function(){ <br />
  alert(1) <br />
} <br />
//&#8211;＞ <br />
＜/script＞  </p>
<p>这段语句将产生func未定义的错误，而：</p>
<p>以下是引用片段：<br />
＜script language=&#8221;JavaScript&#8221; type=&#8221;text/javascript&#8221;＞ <br />
＜!&#8211; <br />
func(); <br />
function func(){ <br />
  alert(1) <br />
} <br />
//&#8211;＞ <br />
＜/script＞  </p>
<p>则能够正确执行，下面的语句也能正确执行：</p>
<p>以下是引用片段：<br />
＜script language=&#8221;JavaScript&#8221; type=&#8221;text/javascript&#8221;＞ <br />
＜!&#8211; <br />
func(); <br />
var someFunc=function func(){ <br />
  alert(1) <br />
} <br />
//&#8211;＞ <br />
＜/script＞  </p>
<p>由此可见，尽管JavaScript是一门解释型的语言，但它会在函数调用时，检查整个代码中是否存在相应的函数定义，这个函数名只有是通过function funcName()形式定义的才会有效，而不能是匿名函数。</p>
<p><strong>函数对象和其他内部对象的关系</strong> </p>
<p>除了函数对象，还有很多内部对象，比如：Object、Array、Date、RegExp、Math、Error。这些名称实际上表示一个类型，可以通过new操作符返回一个对象。然而函数对象和其他对象不同，当用typeof得到一个函数对象的类型时，它仍然会返回字符串“function”，而typeof一个数组对象或其他的对象时，它会返回字符串“object”。下面的代码示例了typeof不同类型的情况：</p>
<p>以下是引用片段：<br />
alert(typeof(Function))); <br />
alert(typeof(new Function())); <br />
alert(typeof(Array)); <br />
alert(typeof(Object)); <br />
alert(typeof(new Array())); <br />
alert(typeof(new Date())); <br />
alert(typeof(new Object()));  </p>
<p>运行这段代码可以发现：前面4条语句都会显示“function”，而后面3条语句则显示“object”，可见new一个function实际上是返回一个函数。这与其他的对象有很大的不同。其他的类型Array、Object等都会通过new操作符返回一个普通对象。尽管函数本身也是一个对象，但它与普通的对象还是有区别的，因为它同时也是对象构造器，也就是说，可以new一个函数来返回一个对象，这在前面已经介绍。所有typeof返回“function”的对象都是函数对象。也称这样的对象为构造器（constructor），因而，所有的构造器都是对象，但不是所有的对象都是构造器。</p>
<p>既然函数本身也是一个对象，它们的类型是function，联想到C++、Java等面向对象语言的类定义，可以猜测到Function类型的作用所在，那就是可以给函数对象本身定义一些方法和属性，借助于函数的prototype对象，可以很方便地修改和扩充Function类型的定义，例如下面扩展了函数类型Function，为其增加了method1方法，作用是弹出对话框显示&#8221;function&#8221;：</p>
<p>以下是引用片段：<br />
Function.prototype.method1=function(){ <br />
  alert(&#8220;function&#8221;); <br />
} <br />
function func1(a,b,c){ <br />
  return a+b+c; <br />
} <br />
func1.method1(); <br />
func1.method1.method1();  </p>
<p>注意最后一个语句：func1.method1.mehotd1()，它调用了method1这个函数对象的method1方法。虽然看上去有点容易混淆，但仔细观察一下语法还是很明确的：这是一个递归的定义。因为method1本身也是一个函数，所以它同样具有函数对象的属性和方法，所有对Function类型的方法扩充都具有这样的递归性质。</p>
<p>Function是所有函数对象的基础，而Object则是所有对象（包括函数对象）的基础。在JavaScript中，任何一个对象都是Object的实例，因此，可以修改Object这个类型来让所有的对象具有一些通用的属性和方法，修改Object类型是通过prototype来完成的：</p>
<p>以下是引用片段：<br />
Object.prototype.getType=function(){ <br />
  return typeof(<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/this" title="查看 this 中所有日志" target="_blank">this</a></span>); <br />
} <br />
var array1=new Array(); <br />
function func1(a,b){ <br />
  return a+b; <br />
} <br />
alert(array1.getType()); <br />
alert(func1.getType());  </p>
<p>上面的代码为所有的对象添加了getType方法，作用是返回该对象的类型。两条alert语句分别会显示“object”和“function”。</p>
<p><strong>将函数作为参数传递</strong></p>
<p>在前面已经介绍了函数对象本质，每个函数都被表示为一个特殊的对象，可以方便的将其赋值给一个变量，再通过这个变量名进行函数调用。作为一个变量，它可以以参数的形式传递给另一个函数，这在前面介绍JavaScript事件处理机制中已经看到过这样的用法，例如下面的程序将func1作为参数传递给func2：</p>
<p>以下是引用片段：<br />
function func1(theFunc){ <br />
  theFunc(); <br />
} <br />
function func2(){ <br />
  alert(&#8220;ok&#8221;); <br />
} <br />
func1(func2);  </p>
<p>在最后一条语句中，func2作为一个对象传递给了func1的形参theFunc，再由func1内部进行theFunc的调用。事实上，将函数作为参数传递，或者是将函数赋值给其他变量是所有事件机制的基础。</p>
<p>例如，如果需要在页面载入时进行一些初始化工作，可以先定义一个init的初始化函数，再通过window.onload=init;语句将其绑定到页面载入完成的事件。这里的init就是一个函数对象，它可以加入window的onload事件列表。</p>
<p><strong>传递给函数的隐含参数：arguments</strong></p>
<p>当进行函数调用时，除了指定的参数外，还创建一个隐含的对象——arguments。arguments是一个类似数组但不是数组的对象，说它类似是因为它具有数组一样的访问性质，可以用arguments[index]这样的语法取值，拥有数组长度属性length。arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表，例如：</p>
<p>以下是引用片段：<br />
function func(a,b){ <br />
  alert(a); <br />
  alert(b); <br />
  for(var i=0;i＜arguments.length;i++){ <br />
  alert(arguments[i]); <br />
  } <br />
} <br />
func(1,2,3);  </p>
<p>代码运行时会依次显示：1，2，1，2，3。因此，在定义函数的时候，即使不指定参数列表，仍然可以通过arguments引用到所获得的参数，这给编程带来了很大的灵活性。arguments对象的另一个属性是callee，它表示对函数对象本身的引用，这有利于实现无名函数的递归或者保证函数的封装性，例如使用递归来计算1到n的自然数之和：</p>
<p>以下是引用片段：<br />
var sum=function(n){ <br />
  if(1==n)return 1; <br />
  else return n+sum(n-1); <br />
} <br />
alert(sum(100));  <br />
其中函数内部包含了对sum自身的调用，然而对于JavaScript来说，函数名仅仅是一个变量名，在函数内部调用sum即相当于调用一个全局变量，不能很好的体现出是调用自身，所以使用arguments.callee属性会是一个较好的办法：</p>
<p>以下是引用片段：<br />
var sum=function(n){ <br />
  if(1==n)return 1; <br />
  else return n+arguments.callee(n-1); <br />
} <br />
alert(sum(100));  </p>
<p>callee属性并不是arguments不同于数组对象的惟一特征，下面的代码说明了arguments不是由Array类型创建：</p>
<p>以下是引用片段：<br />
Array.prototype.p1=1; <br />
alert(new Array().p1); <br />
function func(){ <br />
  alert(arguments.p1); <br />
} <br />
func(); </p>
<p>运行代码可以发现，第一个alert语句显示为1，即表示数组对象拥有属性p1，而func调用则显示为“undefined”，即p1不是arguments的属性，由此可见，arguments并不是一个数组对象。</p>
<p>函数的apply、call方法和length属性</p>
<p>JavaScript为函数对象定义了两个方法：apply和call，它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数的方式有所区别：</p>
<p>以下是引用片段：<br />
Function.prototype.apply(thisArg,argArray); <br />
Function.prototype.call(thisArg[,arg1[,arg2…]]);  </p>
<p>从函数原型可以看到，第一个参数都被取名为thisArg，即所有函数内部的<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/this" title="查看 this 中所有日志" target="_blank">this</a></span>指针都会被赋值为thisArg，这就实现了将函数作为另外一个对象的方法运行的目的。两个方法除了thisArg参数，都是为Function对象传递的参数。下面的代码说明了apply和call方法的工作方式：</p>
<p>以下是引用片段：<br />
//定义一个函数func1，具有属性p和方法A <br />
function func1(){ <br />
  this.p=&#8221;func1-&#8221;; <br />
  this.A=function(arg){ <br />
  alert(this.p+arg); <br />
  } <br />
} <br />
//定义一个函数func2，具有属性p和方法B <br />
function func2(){ <br />
  this.p=&#8221;func2-&#8221;; <br />
  this.B=function(arg){ <br />
  alert(this.p+arg); <br />
  } <br />
} <br />
var obj1=new func1(); <br />
var obj2=new func2(); <br />
obj1.A(&#8220;byA&#8221;); //显示func1-byA <br />
obj2.B(&#8220;byB&#8221;); //显示func2-byB <br />
obj1.A.apply(obj2,["byA"]); //显示func2-byA，其中[“byA”]是仅有一个元素的数组，下同 <br />
obj2.B.apply(obj1,["byB"]); //显示func1-byB <br />
obj1.A.call(obj2,&#8221;byA&#8221;); //显示func2-byA <br />
obj2.B.call(obj1,&#8221;byB&#8221;); //显示func1-byB  </p>
<p>可以看出，obj1的方法A被绑定到obj2运行后，整个函数A的运行环境就转移到了obj2，即this指针指向了obj2。同样obj2的函数B也可以绑定到obj1对象去运行。代码的最后4行显示了apply和call函数参数形式的区别。</p>
<p>与arguments的length属性不同，函数对象还有一个属性length，它表示函数定义时所指定参数的个数，而非调用时实际传递的参数个数。例如下面的代码将显示2：</p>
<p>以下是引用片段：<br />
function sum(a,b){ <br />
  return a+b; <br />
} <br />
alert(sum.length);  </p>
<p><strong>深入认识JavaScript中的this指针</strong> </p>
<p>this指针是面向对象程序设计中的一项重要概念，它表示当前运行的对象。在实现对象的方法时，可以使用this指针来获得该对象自身的引用。</p>
<p>和其他面向对象的语言不同，JavaScript中的this指针是一个动态的变量，一个方法内的this指针并不是始终指向定义该方法的对象的，在上一节讲函数的apply和call方法时已经有过这样的例子。为了方便理解，再来看下面的例子：</p>
<p>以下是引用片段：<br />
＜script language=&#8221;JavaScript&#8221; type=&#8221;text/javascript&#8221;＞ <br />
＜!&#8211; <br />
//创建两个空对象 <br />
var obj1=new Object(); <br />
var obj2=new Object(); <br />
//给两个对象都添加属性p，并分别等于1和2 <br />
obj1.p=1; <br />
obj2.p=2; <br />
//给obj1添加方法，用于显示p的值 <br />
obj1.getP=function(){ <br />
  alert(this.p); //表面上this指针指向的是obj1 <br />
} <br />
//调用obj1的getP方法 <br />
obj1.getP(); <br />
//使obj2的getP方法等于obj1的getP方法 <br />
obj2.getP=obj1.getP; <br />
//调用obj2的getP方法 <br />
obj2.getP(); <br />
//&#8211;＞ <br />
＜/script＞  </p>
<p>从代码的执行结果看，分别弹出对话框显示1和2。由此可见，getP函数仅定义了一次，在不同的场合运行，显示了不同的运行结果，这是有this指针的变化所决定的。在obj1的getP方法中，this就指向了obj1对象，而在obj2的getP方法中，this就指向了obj2对象，并通过this指针引用到了两个对象都具有的属性p。</p>
<p>由此可见，JavaScript中的this指针是一个动态变化的变量，它表明了当前运行该函数的对象。由this指针的性质，也可以更好的理解JavaScript中对象的本质：一个对象就是由一个或多个属性（方法）组成的集合。每个集合元素不是仅能属于一个集合，而是可以动态的属于多个集合。这样，一个方法（集合元素）由谁调用，this指针就指向谁。实际上，前面介绍的apply方法和call方法都是通过强制改变this指针的值来实现的，使this指针指向参数所指定的对象，从而达到将一个对象的方法作为另一个对象的方法运行。</p>
<p>每个对象集合的元素（即属性或方法）也是一个独立的部分，全局函数和作为一个对象方法定义的函数之间没有任何区别，因为可以把全局函数和变量看作为window对象的方法和属性。也可以使用new操作符来操作一个对象的方法来返回一个对象，这样一个对象的方法也就可以定义为类的形式，其中的this指针则会指向新创建的对象。在后面可以看到，这时对象名可以起到一个命名空间的作用，这是使用JavaScript进行面向对象程序设计的一个技巧。例如：</p>
<p>以下是引用片段：<br />
var namespace1=new Object(); <br />
namespace1.class1=function(){ <br />
  //初始化对象的代码 <br />
} <br />
var obj1=new namespace1.class1();  </p>
<p>这里就可以把namespace1看成一个命名空间。</p>
<p>由于对象属性（方法）的动态变化特性，一个对象的两个属性（方法）之间的互相引用，必须要通过this指针，而其他语言中，this关键字是可以省略的。如上面的例子中：</p>
<p>以下是引用片段：<br />
obj1.getP=function(){ <br />
  alert(this.p); //表面上this指针指向的是obj1</p>
<h2  class="related_post_title">随机日志推荐</h2><ul class="related_post"></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/javascript/587.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>js入门学习：Javascript的学习笔记</title>
		<link>http://www.52shidai.com/javascript/585.html</link>
		<comments>http://www.52shidai.com/javascript/585.html#comments</comments>
		<pubDate>Tue, 27 Jul 2010 01:16:20 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[入门]]></category>
		<category><![CDATA[学习]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=585</guid>
		<description><![CDATA[网上看到一篇没有出处的javascript学习笔记，非常适合初学者，就转载过来给大家看看。 一、在页面中怎么添加javascript   &#60;script language=”javascript”&#62;   //这行是javascript脚本标记，斜杠后面的就是注释了   document.write(”在页面显示的javascript”) //在页面显示一句话   &#60;/script&#62; /*这也是注释*/ 二、javascript的数据类型 1、字符串（string）：字符串就是由一连串的字符组成的序列。包括字母、数字以及标点符号。当然还可以是汉字等。简单一点就是表示文本信息。 2、数字（number）：数字又分为两类：整型数字和浮点型数字。     整数包括正整数，零和负整数。     javascript中的数字可以使用十进制、八进制和十六进制来书写。方法如下：     十进制：15（直接写数字即可）     八进制：017（要以零做为引导数字）     十六进制：0xf（要以0x做为引导数字）     浮点型数字也叫实数，为了方便，也可以使用科学记数法来表示：     1.13e1、1.5e3（等价于1.5乘10的3次方）     javascript的数字范围大约为10的负308次方到10的308次方之间。     javascript中还有一个特殊的数字值NaN（not a number），javascript 用nan表示这个无意义的结果。 3、布尔值（boolean）：true和false，在计算机中一般用1表示true，用0表示false。 三、alert()方法的使用：   &#60;script language=”javascript”&#62;   alert(”在页面上显示警告对话框”);   &#60;/script&#62;   alert()是javascript产生一个带确认按钮的对话框，上面显示括号内的信息。 四、confirm()方法的使用：   &#60;script language=”javascript”&#62;   confirm(”在页面上显示确认对话框”);   &#60;/script&#62; [...]]]></description>
			<content:encoded><![CDATA[<p>网上看到一篇没有出处的javascript<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e5%ad%a6%e4%b9%a0" title="查看 学习 中所有日志" target="_blank">学习</a></span>笔记，非常适合初学者，就转载过来给大家看看。</p>
<p>一、在页面中怎么添加javascript<br />
  &lt;script language=”javascript”&gt;   //这行是javascript脚本标记，斜杠后面的就是注释了<br />
  document.write(”在页面显示的javascript”) //在页面显示一句话<br />
  &lt;/script&gt;<br />
/*这也是注释*/</p>
<p>二、javascript的数据类型<br />
1、字符串（string）：字符串就是由一连串的字符组成的序列。包括字母、数字以及标点符号。当然还可以是汉字等。简单一点就是表示文本信息。</p>
<p>2、数字（number）：数字又分为两类：整型数字和浮点型数字。<br />
    整数包括正整数，零和负整数。<br />
    javascript中的数字可以使用十进制、八进制和十六进制来书写。方法如下：<br />
    十进制：15（直接写数字即可）<br />
    八进制：017（要以零做为引导数字）<br />
    十六进制：0xf（要以0x做为引导数字）<br />
    浮点型数字也叫实数，为了方便，也可以使用科学记数法来表示：<br />
    1.13e1、1.5e3（等价于1.5乘10的3次方）<br />
    javascript的数字范围大约为10的负308次方到10的308次方之间。<br />
    javascript中还有一个特殊的数字值NaN（not a number），javascript 用nan表示这个无意义的结果。</p>
<p>3、布尔值（boolean）：true和false，在计算机中一般用1表示true，用0表示false。</p>
<p>三、alert()方法的使用：<br />
  &lt;script language=”javascript”&gt;<br />
  alert(”在页面上显示警告对话框”);<br />
  &lt;/script&gt;<br />
  alert()是javascript产生一个带确认按钮的对话框，上面显示括号内的信息。</p>
<p>四、confirm()方法的使用：<br />
  &lt;script language=”javascript”&gt;<br />
  confirm(”在页面上显示确认对话框”);<br />
  &lt;/script&gt;<br />
  confirm()和alert()差不多，不同的就是多了个取消按钮。按确定返回true，按取消返回false。<br />
  &lt;script language=”javascript”&gt;<br />
  var con;<br />
  con=confirm(”你们喜欢这样的教程吗？”);<br />
  if (con==true) alert(”喜欢”);<br />
  else alert(”不喜欢”);<br />
  &lt;/script&gt;</p>
<p>五、prompt()方法的使用：<br />
  &lt;script language=”javascript”&gt;<br />
    var name,age;<br />
    name=prompt(”请问您的名字？”);<br />
    alert(name);<br />
    age=prompt(”多大？”);<br />
    alert(age);<br />
   &lt;/script&gt;<br />
    它不但可以显示信息，而且可以输入信息。</p>
<p>六、javascript变量<br />
    用var加上为变量指定的名称来声明变量，变量类型可以通过给变量赋值来确定。由于javascript采用的是弱类型的样式，对数据类型要求不太严格，在程序执行的过程中，会根据需要自动转换。<br />
字符串变量，可以通过“变量名.length”来获得该变量中字符串的长度，如<br />
    var name;<br />
    name=”javascript”;<br />
    那么name.length的值就是10。<br />
    若在一行中创建多个变量时，记住用逗号来隔开变量名。各语句用分号隔开。(使用分号是个好习惯, 大家在<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e5%ad%a6%e4%b9%a0" title="查看 学习 中所有日志" target="_blank">学习</a></span>的时候尽量养成加分号的习惯)<br />
    类型转换：javascript允许在程序中改变变量的类型，最常见的两个类型转换符Number和String。<br />
    Number(x)是字符型值——〉数字值型。String与之相反。相对于javascript的自动类型转换，可以将这种转换成为强制类型转换。（强制类型转换需要在javascript1.2及以上版本才可以使用）</p>
<p>变量的命名：<br />
1.必须以字母或下划线开头，中间可以有字母数字和或下划线。不能使用空格、+、-等其他符号。<br />
    作为连字符外，变量名称不能有空格、（＋）、（－）、（，）或其它符号。<br />
2.不能使用<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/javascript" title="查看 JavaScript 中所有日志" target="_blank">JavaScript</a></span>中的关键字作为变量。<br />
  （javascript变量名是区分大小写的，name和Name是不一样的。）</p>
<p>对于变量还有一个重要性──那就是变量的作用域。在<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/javascript" title="查看 JavaScript 中所有日志" target="_blank">JavaScript</a></span>中同样有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。<br />
如果局部变量和全局变量重名，则局部变量优先。js没有块级作用域。函数中声明的所有的变量，作用域是相同的。</p>
<p>变量的类型规则<br />
javascript是无类型的，他的变量可以放任何数据类型的值。<br />
变量的声明<br />
在javascript程序中，在使用变量之前，必须先声明它。变量是使用关键字var声明的。而实际上，不一定要先声明变量，在某些情况下，变量声明是可选的。<br />
    var i；<br />
    var sum；<br />
也可以使用一个var关键字声明多个变量；<br />
    var i，sum；<br />
而且还可以将变量声明和变量初始化绑定在一起：<br />
    var message = ‘hello’；<br />
    var i = 0，j=0，k=0；<br />
    由var声明的变量是永久的，因为各浏览器对是否可以删除全局性的变量的态度是不同的，（都可以删除局部变量）为了安全，最好假设全局变量不可删除。<br />
    可以使用var多次声明同一个变量，当你给一个没有声明的变量赋值时，js会自动用哪个变量为你创建一个全局变量。如果你想在函数内部创建一个局部变量。那就必须用var在函数内部声明。</p>
<p>七、javascript表达式和运算符<br />
表达式：在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。<br />
1.算术运算符：+（加） 、-（减）、 *（乘）、 /（除）、 %（取模） -（取反）、++（递加1）、–（递减1）。<br />
例：11%2=1 ； 如果x=2   ++x+4=7     x+++4=6（++x是先执行加1，x++是执行完语句之后x在自加1)<br />
例子：<br />
&lt;script&gt;<br />
var i=0, j=0;<br />
alert(i++ + ” ” + ++j + ” ” + i);<br />
// 输出 “0 1 1”，可见i++是先输出了i，然后进行运算，而++j是先对j进行了自加运算，然后输出j的值<br />
&lt;/script&gt;<br />
2.比较运算符：&lt;(小于)、&gt;(大于)、&lt;=(小于等于)、&gt;=(大于等于)、==(等于)、!=(不等于)<br />
               （基本操作过程是，首先对它的操作数进行比较，然后再返回一个true或False值。）<br />
3.逻辑运算符：!（取反)、&amp;=（与之后赋值）、 &amp;（逻辑与）、 |=（或之后赋值）、 |（逻辑或）、^=（异或之后赋值）、 ^（逻辑异或）、 ?:（三目操作符）、||（或）、&amp;&amp; （与）==(等于)、|=(不等于)。<br />
4.字符串运算符：只有+   （”my“+”javascript“结果等于”my javascript“）<br />
5.赋值运算符：即=，将右边的值赋给左边的变量。<br />
6.条件运算符：（？：）例：status=(age&gt;=18)?”adult”:”child”;如果大于18，则表达式的值为adult。<br />
7.typeof()运算符：用来返回变量或数据的类型。</p>
<p>八、IF语句。<br />
if (条件)<br />
语句段１<br />
else<br />
语句段２<br />
功能：若表达式为true，则执行语句段１；否则执行语句段２。<br />
说明：<br />
if -else 语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。<br />
表达式中必须使用关系语句，来实现判断，它是作为一个布尔值来估算的。<br />
它将零和非零的数分别转化成false和true。<br />
若if后的语句有多行，则必须使用花括号将其括起来。</p>
<p>九、window.com()的用法<br />
1、基本语法<br />
  window.open(pageURL,name,parameters)<br />
  其中：<br />
    pageURL 为子窗口路径<br />
    name 为子窗口句柄<br />
    parameters 为窗口参数(各参数用逗号分隔)<br />
2. 窗口参数<br />
   其中yes/no也可使用1/0； value为具体的数值，单位象素。<br />
   toolbar=yes,no 是否显示工具条<br />
   location=yes,no 是否显示网址栏<br />
   directories=yes,no 是否显示导航条<br />
   status=yes,no 是否显示状态条<br />
   menubar=yes,no 是否显示菜单<br />
   scrollbars=yes,no 是否显示滚动条<br />
   resizable=yes,no 是否可以改变公告窗口大小<br />
   copyhistory=yes,no 是否显示历史按钮<br />
   width=value 公告窗口的宽<br />
   height=value 公告窗口的高<br />
   left=value 公告窗口的左上顶点距屏幕左边100像素<br />
   top=value 公告窗口的左上顶点距屏幕顶端100像素<br />
例：<br />
&lt;script language=”javascript”&gt;<br />
&lt;!–<br />
window.open(”00000.html”,”newwindow”,”toolbar=no,location=no,directories=no,status=no,menubar=no,<br />
scrollbars=no,resizable=no,copyhistory=no,width=500,height=500,left=100,top=100″)  //–&gt;<br />
&lt;/script&gt;</p>
<p>十、for循环。另外就是数据类型。既for  in<br />
将字符串转换为数值：<br />
javascript语言提供两个内置函数将表示数值的字符串转换为真实的数值：parseInt()和parseFloat()。<br />
为了使用这些函数，需要将进行转换的字符串作为参数传入函数，例：<br />
    parseInt(”42″)     //result=42<br />
    parseInt(”42.33″)   //result=42<br />
不过是浮点数还是整数，函数返回的值都是整数。不存在四舍五入，小数点和它后面的数字将被舍弃。<br />
而parseFloat()则返回浮点数（如果是整数就返回整数），例：<br />
    parseFloat(”42″)   //result=42<br />
    parseFloat(”42.33″) //result=42.33<br />
如果在某处需要进行字符串的转换，只需将函数插入该初即可。如：<br />
    3+3+parseInt(”3″)   //result=9</p>
<p>将数值转换为字符串：<br />
虽然当遇到表达式中含有混合数据类型时，js会倾向于字符串。但为了防止潜在的问题发生，最好先转换以下。在数值中加入空字符串就可以把数值转换为字符串了：<br />
(”&#8221;+2500)         //result=”2500″<br />
(”&#8221;+2500).length   //result=4</p>
<p>For循环:<br />
javascript中最常用的循环结构称之为for循环，关键词放在循环结构的开始位置。正式语法结构如下：<br />
for ([initial expression];[condition];[update expression]){<br />
  statement[s] inside loop<br />
}<br />
例：<br />
for(var i=0;i&lt;9;i++)<br />
{<br />
n+=i<br />
myfunc(n)<br />
}<br />
for…in循环:<br />
这个语句完全依照变量var所设定的值决定运行次数。你可以用for…in语句在一个对象或一个数组上建立循环<br />
for(var in [obj | array])<br />
{<br />
statements<br />
}<br />
例：<br />
&lt;script language=”javascript”&gt;<br />
document.write(”The properties of the document object”)<br />
for(var element in document){<br />
document.write(element+”=”+document[element])<br />
}<br />
&lt;/script&gt;</p>
<p>十一、鼠标事件<br />
主要内容就是基于鼠标的事件,有如下几种：<br />
1.mouseover（鼠标移至）<br />
2.mouseout（鼠标移出）<br />
3.mousemove（鼠标移动）<br />
4.mousedown（鼠标按下）<br />
5.mouseup（鼠标弹起）<br />
6.click（单击）<br />
7.dblclick（双击）<br />
例子：<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;test&lt;/title&gt;<br />
&lt;script language=”javascript”&gt;<br />
function text_onmouseover(){<br />
mytext.style.fontSize=”30pt”;<br />
mytext.style.color=”red”;<br />
mytext.style.fontStyle=”italic”;<br />
}<br />
function text_onmouseout(){<br />
mytext.style.fontSize=”20pt”;<br />
mytext.style.color=”blue”;<br />
mytext.style.fontStyle=”normal”;<br />
}<br />
&lt;/script&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;p id=mytext onmouseover=”text_onmouseover()” onmouseout=”text_onmouseout()”&gt;http://www.javascript.com.cn&lt;/p&gt;<br />
&lt;p&gt;看看字体样式有什么变化&lt;/p&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />
8.mouseDown事件和mouseUp事件<br />
    大家知道，mouseDown事件和mouseUp事件的组合就是click事件，但是如果在链接上按下鼠标，并移到链接之外在放开鼠标，那么就只有mouseDown事件了。这两个事件可以增加图标按钮的图像效果，<br />
    至于mouseDown和mouseUp的属性，它们是伴随着Click事件发生的，这和keyPress事件是keyDown事件和keyUp事件组合而成的机制是一样的，这3个鼠标事件也有modifier属性。<br />
    （注意：如果在onClick事件处理中使用return语句，它可以接收任何数值。只要这个值不是False，浏览器就可以完成提交。但如果浏览器得到的是False值，表单提交操作就会被取消。）<br />
9.Click事件和dbClick事件<br />
    onClick是单击事件，onDblClick是双击事件，而实际上很难分清连续的单击和双击。它们会互相干扰。而且在ie和其他浏览器的情况还有不同。有的浏览器是双击事件的每一次单击都会触发单击事件，而在ie中，只有双击事件的第一次单击会触发单击事件。不管怎么样，单击事件都不会自动的取消或被忽略。因此，如果想使用单击和双击一个链接时触发两个完全不同的过程，则必须通过编程来延迟单击的动作知道双击。<br />
&lt;script&gt;<br />
var timer=null;<br />
document.onclick=new Function(”timer=setTimeout(click,500)”)<br />
document.ondblclick=new Function(”clearTimeout(timer);dblclick()”)<br />
function click(){<br />
alert(”click”)<br />
}<br />
function dblclick(){<br />
alert(”dblclick”)<br />
}<br />
&lt;/script&gt;</p>
<p>十二、javascript函数.<br />
函数是有function加函数名和一对带有参数括号,以及大括号组成的，其中大括号里是主体javascript语句.<br />
例:<br />
function hanshuname(js) //hanshuname是函数名.<br />
{<br />
document.write(js,”&lt;br&gt;”); //是函数的主体语句.<br />
}<br />
函数可以嵌套,如下:<br />
function qiantao(a,b){<br />
function lqiantao(x){return x*x;}<br />
return Math.sqrt(lqiantao(a)+lqiantao(b));<br />
}<br />
函数还可以作为数据来应用,因此可以象处理其他数据那样来处理函数,如:赋值,存储,传递等.<br />
例:<br />
    function zhi(x){return x*x;}<br />
实际上,函数名没有什么意义,不过是保存函数的变量名而已.<br />
    a=zhi(6);//a存放的是数字36;<br />
    b=zhi;//现在b和zhi引用同一个函数.<br />
    c=b(5);//c存放的是数字25.<br />
在一个函数体内,标识符arguments总是具有特殊含义,它是调用对象的一个特殊属性,用来引用实际参数对象.这个实际参数对象具有大量有用的属性.除此之外,它还兼有数组的角色.<br />
尽管定义javascript函数时都有固定的参数，但调用这个函数时,传递给它的参数数目却可以是任意的，数组arguments[]允许完全存取那些实际参数值.另外,arguments有一个length属性,看如下例子:<br />
    function zhi(x,y,z)<br />
    {<br />
    if(arguments.length !=3){<br />
    alert(”function zhi called with”+arguments.length+”arguments,but it expects 3 arguments.”);<br />
    return null;<br />
    }<br />
    }<br />
数组arguments[ ]还为javascript函数开发了一项重要的可能性,既可以将函数编写为能够接受任意数目的实际参数.<br />
    function zhi()<br />
    {<br />
    var m=Number.NEGATIVE_INFINITY;<br />
    //遍历所有参数<br />
    //检索并记忆最大的一个.<br />
    for(var i=0;i&lt;arguments.length;i++)<br />
    if(arguments&gt;m)m=arguments;<br />
    //返回最大的参数值.<br />
    return m;<br />
    }<br />
    var lazgest=zhi(1,10,100,2,3,1000,4,5,10000,6);<br />
    也可以使用arguments[]数组来编写一个函数.</p>
<p>    调用js函数<br />
    &lt;a href=”#” onClick=”functionName()”&gt;Link text&lt;/a&gt;<br />
    &lt;a href=”javascript:functionName()”&gt;Link text&lt;/a&gt;</p>
<h2  class="related_post_title">您可能感兴趣的文章</h2><ul class="related_post"><li><a href="http://www.52shidai.com/javascript/583.html" title="学习JavaScript三件必须了解的事">学习JavaScript三件必须了解的事</a></li><li><a href="http://www.52shidai.com/javascript/556.html" title="JavaScript操作iframe里的dom">JavaScript操作iframe里的dom</a></li><li><a href="http://www.52shidai.com/javascript/323.html" title="javascript中的107个基础知识收集整理">javascript中的107个基础知识收集整理</a></li><li><a href="http://www.52shidai.com/javascript/62.html" title="JavaScript面向对象之静态与非静态类">JavaScript面向对象之静态与非静态类</a></li><li><a href="http://www.52shidai.com/javascript/56.html" title="JavaScript trim函数的十二种实现">JavaScript trim函数的十二种实现</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/javascript/585.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>学习JavaScript三件必须了解的事</title>
		<link>http://www.52shidai.com/javascript/583.html</link>
		<comments>http://www.52shidai.com/javascript/583.html#comments</comments>
		<pubDate>Mon, 26 Jul 2010 11:09:39 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[学习]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=583</guid>
		<description><![CDATA[JavaScript可算是世界上最流行的编程语言，如今也越来越被开发者们所重视，对任何JavaScript开发者而言，有三件必须了解的事。 首先开发者必须知道如何正确地使用JavaScript语言。很多开发者还不熟悉这个语言时，就开始使用它，所以会衍生很多问题。 对开发者而言，必须了解语言特性后，再开始运用它。因为JavaScript是非常强大的语言，开发过程要处理很多工作，只有真正了解语言特性，才可以拥有更多生产力，开发者才能更快乐。   JavaScript是一种函数语言(Functional Language)，可用来控制动态对象，也提供开发者熟悉的语法，这反映出它的功能特殊性，从对象角度来看，其实JavaScript语言比Java、C++或C#语言更优秀。 但是很多人痛恨JavaScript，其实是因为不了解JavaScript所工作的环境，这正是开发者必须知道的第二件事。开发者之所以痛恨JavaScript，其实他们痛恨的是浏览器提供的DOM组件。DOM的确是一种恐怖的API，若将任何开发语言的标准函式换成DOM以后，任谁都会痛恨这个语言，这就是JavaScript的处境。 浏览器是JavaScript的工作环境，开发者唯有了解浏览器的特性，才能顺利掌握它。新一代的JavaScript标准ECMAScript 5已经初露锋芒了，旨在用更合理的API来取代DOM。 最后一项重点是JavaScript的安全知识。对浏览器应用程序而言，安全永远是最重要的。因为不论用户是否清楚网页程序的确切用途，浏览器都会执行程序，而网页程序很容易加载用户所不知道的程序片段。 我们总是在功能强大和危险之间挣扎，浏览器的功能有限是好事。这样就能区分出程序到底考虑用户还是网站的利益，这是浏览器的重要创新。可是，浏览器只能分辨出使用者、网站或浏览器本身的意图，无法分辨出其他程序的意图，例如浏览器无法预料跨站脚本攻击(XSS)可以透过混搭程序渗透到网页中。 在混搭的网络应用中， 每一个外挂组件代表了不同的利益和意图。软件界过去几十年一直在寻找这类组件，JavaScript和浏览器是第一个成功者。但是，浏览器最大问题是让每一个组件取得所有权限，所以混搭组件会衍生出跨站脚本攻击。 您可能感兴趣的文章js入门学习：Javascript的学习笔记JavaScript操作iframe里的domjavascript中的107个基础知识收集整理JavaScript面向对象之静态与非静态类JavaScript trim函数的十二种实现]]></description>
			<content:encoded><![CDATA[<p><span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/javascript" title="查看 JavaScript 中所有日志" target="_blank">JavaScript</a></span>可算是世界上最流行的编程语言，如今也越来越被开发者们所重视，对任何<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/javascript" title="查看 JavaScript 中所有日志" target="_blank">JavaScript</a></span>开发者而言，有三件必须了解的事。</p>
<p>首先开发者必须知道如何正确地使用JavaScript语言。很多开发者还不熟悉这个语言时，就开始使用它，所以会衍生很多问题。</p>
<p>对开发者而言，必须了解语言特性后，再开始运用它。因为JavaScript是非常强大的语言，开发过程要处理很多工作，只有真正了解语言特性，才可以拥有更多生产力，开发者才能更快乐。<br />
 <br />
JavaScript是一种函数语言(Functional Language)，可用来控制动态对象，也提供开发者熟悉的语法，这反映出它的功能特殊性，从对象角度来看，其实JavaScript语言比Java、C++或C#语言更优秀。</p>
<p>但是很多人痛恨JavaScript，其实是因为不了解JavaScript所工作的环境，这正是开发者必须知道的第二件事。开发者之所以痛恨JavaScript，其实他们痛恨的是浏览器提供的DOM组件。DOM的确是一种恐怖的API，若将任何开发语言的标准函式换成DOM以后，任谁都会痛恨这个语言，这就是JavaScript的处境。</p>
<p>浏览器是JavaScript的工作环境，开发者唯有了解浏览器的特性，才能顺利掌握它。新一代的JavaScript标准ECMAScript 5已经初露锋芒了，旨在用更合理的API来取代DOM。</p>
<p>最后一项重点是JavaScript的安全知识。对浏览器应用程序而言，安全永远是最重要的。因为不论用户是否清楚网页程序的确切用途，浏览器都会执行程序，而网页程序很容易加载用户所不知道的程序片段。</p>
<p>我们总是在功能强大和危险之间挣扎，浏览器的功能有限是好事。这样就能区分出程序到底考虑用户还是网站的利益，这是浏览器的重要创新。可是，浏览器只能分辨出使用者、网站或浏览器本身的意图，无法分辨出其他程序的意图，例如浏览器无法预料跨站脚本攻击(XSS)可以透过混搭程序渗透到网页中。</p>
<p>在混搭的网络应用中， 每一个外挂组件代表了不同的利益和意图。软件界过去几十年一直在寻找这类组件，JavaScript和浏览器是第一个成功者。但是，浏览器最大问题是让每一个组件取得所有权限，所以混搭组件会衍生出跨站脚本攻击。</p>
<h2  class="related_post_title">您可能感兴趣的文章</h2><ul class="related_post"><li><a href="http://www.52shidai.com/javascript/585.html" title="js入门学习：Javascript的学习笔记">js入门学习：Javascript的学习笔记</a></li><li><a href="http://www.52shidai.com/javascript/556.html" title="JavaScript操作iframe里的dom">JavaScript操作iframe里的dom</a></li><li><a href="http://www.52shidai.com/javascript/323.html" title="javascript中的107个基础知识收集整理">javascript中的107个基础知识收集整理</a></li><li><a href="http://www.52shidai.com/javascript/62.html" title="JavaScript面向对象之静态与非静态类">JavaScript面向对象之静态与非静态类</a></li><li><a href="http://www.52shidai.com/javascript/56.html" title="JavaScript trim函数的十二种实现">JavaScript trim函数的十二种实现</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/javascript/583.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>处理图片的JS脚本-Phototype</title>
		<link>http://www.52shidai.com/prototype/581.html</link>
		<comments>http://www.52shidai.com/prototype/581.html#comments</comments>
		<pubDate>Fri, 23 Jul 2010 01:56:38 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[prototype]]></category>
		<category><![CDATA[JS脚本]]></category>
		<category><![CDATA[Phototype]]></category>
		<category><![CDATA[处理图片]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=581</guid>
		<description><![CDATA[phototype 是一个基于prototype的一个处理图片的js扩展脚本，支持旋转、缩放、翻转以及一些特殊等效果。目前是GPL协议，可以点击这里 下载下面为一些例子： 原图如下： 缩放功能的代码及效果如下： l_oPhoto = new Photo( ) ; l_oPhoto.resize ( { width:200 } ) ; document.body .appendChild ( l_oPhoto.fetch ( ) ) ; 翻转功能的代码及效果如下： l_oPhoto = new Photo( ) ; l_oPhoto.resize ( { width:200 } ) ; l_oPhoto.flipV ( ) ; // Flip vertical, use flipH to flip horizontal document.body .appendChild ( [...]]]></description>
			<content:encoded><![CDATA[<div id="news_content">
<p><strong>phototype</strong> 是一个基于prototype的一个<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e5%a4%84%e7%90%86%e5%9b%be%e7%89%87" title="查看 处理图片 中所有日志" target="_blank">处理图片</a></span>的js扩展脚本，支持旋转、缩放、翻转以及一些特殊等效果。目前是GPL协议，可以点击<a href="http://ajaxorized.com/phototype/phototype.zip" target="_blank">这里</a> 下载下面为一些例子：</p>
<p>原图如下：</p>
<p><img src="http://ajaxorized.com/phototype/1.png" alt="" /></p>
<p>缩放功能的代码及效果如下：</p>
<ol>
<li>l_oPhoto = new Photo( ) ;</li>
<li>l_oPhoto.resize ( { width:200 } ) ;</li>
<li>document.body .appendChild ( l_oPhoto.fetch ( ) ) ;</li>
</ol>
<p><img src="http://ajaxorized.com/phototype/2.png" alt="" /></p>
<p>翻转功能的代码及效果如下：</p>
<ol>
<li>l_oPhoto = new Photo( ) ;</li>
<li>l_oPhoto.resize ( { width:200 } ) ;</li>
<li>l_oPhoto.flipV ( ) ; // Flip vertical, use flipH to flip horizontal</li>
<li>document.body .appendChild ( l_oImage.fetch ( ) ) ;</li>
</ol>
<p><img src="http://ajaxorized.com/phototype/3.png" alt="" /></p>
<p>旋转功能的代码及效果如下：</p>
<ol>
<li>l_oPhoto = new Photo( ) ;</li>
<li>l_oPhoto.resize ( { width:200 } ) ;</li>
<li>l_oPhoto.flipV ( ) ;</li>
<li>l_oPhoto.rotate ( 3 ) ; // rotate 3 degrees</li>
<li>document.body .appendChild ( l_oPhoto.fetch ( ) ) ;</li>
</ol>
<p><img src="http://ajaxorized.com/phototype/4.png" alt="" /></p>
<p>模糊化功能的代码及效果如下：</p>
<ol>
<li>l_oPhoto = new Photo( ) ;</li>
<li>l_oPhoto.resize ( { width:200 } ) ;</li>
<li>l_oPhoto.flipV ( ) ;</li>
<li>l_oPhoto.rotate ( 3 ) ;</li>
<li>l_oPhoto.dropShadow ( ) ;</li>
<li>l_oPhoto.makeSketchy ( ) ;</li>
<li>document.body .appendChild ( l_oPhoto.fetch ( ) ) ;</li>
</ol>
<p><img src="http://ajaxorized.com/phototype/5.png" alt="" /></p>
<p>灰色调功能的代码及效果如下：</p>
<ol>
<li>l_oPhoto = new Photo( ) ;</li>
<li>l_oPhoto.resize ( { width:200 } ) ;</li>
<li>l_oPhoto.flipV ( ) ;</li>
<li>l_oPhoto.rotate ( 3 ) ;</li>
<li>l_oPhoto.dropShadow ( ) ;</li>
<li>l_oPhoto.toGreyScale ( ) ;</li>
<li>document.body .appendChild ( l_oPhoto.fetch ( ) ) ;</li>
</ol>
<p><img src="http://ajaxorized.com/phototype/6.png" alt="" /></p>
<p>添加文字功能的代码及效果如下：</p>
<ol>
<li>l_oPhoto = new Photo( ) ;</li>
<li>l_oPhoto.resize ( { width:200 } ) ;</li>
<li>l_oPhoto.rotate ( 3 ) ;</li>
<li>l_oPhoto.dropShadow ( ) ;</li>
<li>l_oPhoto.addCaption ( &#8216;Get ajaxorized!&#8217; , &#8217;1942.ttf&#8217; ) ;</li>
<li>document.body .appendChild ( l_oPhoto.fetch ( ) ) ;</li>
</ol>
<p><img src="http://ajaxorized.com/phototype/7.png" alt="" /></p>
<p>添加图形对象功能的代码及效果如下：</p>
<ol>
<li>l_oPhoto = new Photo( ) ;</li>
<li>l_oPhoto.resize ( { width:200 } ) ;</li>
<li>l_oPhoto.rotate ( 3 ) ;</li>
<li>l_oPhoto.dropShadow ( ) ;</li>
<li>l_oPhoto.addCaption ( &#8216;Cheers, Chuck&#8217; , &#8217;1942.ttf&#8217; ) ;</li>
<li>l_oPhoto.addChuckNorris ( ) ; // every library should have this function imo</li>
<li>document.body .appendChild ( l_oPhoto.fetch ( ) ) ;</li>
</ol>
<p><img src="http://ajaxorized.com/phototype/8.png" alt="" /></p>
<p>另外，<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/phototype-2" title="查看 Phototype 中所有日志" target="_blank">Phototype</a></span>支持链式方法调用。如下：</p>
<ol>
<li> </li>
<li>l_oPhoto = new Photo( ) .load ( &#8220;test.jpg&#8221; ) .dropShadow ( ) .flipH ( ) .makeSketchy ( ) ;</li>
<li>document.body .appendChild ( l_oPhoto.fetch ( ) ) ;</li>
<li> </li>
</ol>
<p> </p>
<p>原文链接：</p>
<p><a rel="bookmark" href="http://ajaxorized.com/phototype-image-manipulation-with-javascript/">Phototype: image manipulation with Javascript</a></p>
</div>
<h2  class="related_post_title">随机日志推荐</h2><ul class="related_post"></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/prototype/581.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>不规则的Tab标签切换-JavaScript</title>
		<link>http://www.52shidai.com/javascript/577.html</link>
		<comments>http://www.52shidai.com/javascript/577.html#comments</comments>
		<pubDate>Thu, 22 Jul 2010 06:15:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tab标签]]></category>
		<category><![CDATA[不规则]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=577</guid>
		<description><![CDATA[如上图样式的JavaScript+CSS实现的不规则Tab标签切换效果，非常实用，调用简单。 javascript代码： &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62; &#60;title&#62;JavaScript实现的不规则的Tab标签切换 - 时代前端 52shidai.com&#60;/title&#62; &#60;meta name=&#34;Copyright&#34; content=&#34;JavaScript分享网 http://www.52shidai.com/&#34; /&#62; &#60;meta name=&#34;description&#34; content=&#34;JavaScript实现的不规则的Tab标签切换,JavaScript分享网&#34; /&#62; &#60;meta content=&#34;JavaScript,分享,JavaScript代码,Ajax&#34; name=&#34;keywords&#34; /&#62; &#60;style type=&#34;text/css&#34;&#62; &#60;!-- body,td{font-size: 12px;} .tab{margin-top:100px} #TabTab03Con1{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;} #TabTab03Con2{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;} [...]]]></description>
			<content:encoded><![CDATA[<p><img alt="" src="http://www.sharejs.com/code/table/tab2/demo.jpg" title="JavaScript实现的不规则的Tab标签切换" class="alignnone" width="364" height="147" /></p>
<p>
如上图样式的JavaScript+CSS实现的<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e4%b8%8d%e8%a7%84%e5%88%99" title="查看 不规则 中所有日志" target="_blank">不规则</a></span>Tab标签切换效果，非常实用，调用简单。
</p>
<p>javascript代码：</p>
<div class="runcode">
<p><textarea name="runcode" style="height:300px;width:620px;font-size:12px" class="runcode_text" id="runcode_s9Ocxn">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;JavaScript实现的不规则的Tab标签切换 - 时代前端 52shidai.com&lt;/title&gt;
&lt;meta name=&quot;Copyright&quot; content=&quot;JavaScript分享网 http://www.52shidai.com/&quot; /&gt;
&lt;meta name=&quot;description&quot; content=&quot;JavaScript实现的不规则的Tab标签切换,JavaScript分享网&quot; /&gt;
&lt;meta content=&quot;JavaScript,分享,JavaScript代码,Ajax&quot; name=&quot;keywords&quot; /&gt;
&lt;style type=&quot;text/css&quot;&gt;
&lt;!--
body,td{font-size: 12px;}
.tab{margin-top:100px}
#TabTab03Con1{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#TabTab03Con2{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#TabTab03Con3{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
.xixi1{width:346px;height:27px;line-height:27px;background-image:url(http://www.sharejs.com/code/table/tab2/images/01.jpg);cursor:pointer;}
.xixi2{width:346px;height:27px;line-height:27px;background-image:url(http://www.sharejs.com/code/table/tab2/images/02.jpg);cursor:pointer;}
.xixi3{width:346px;height:27px;line-height:27px;background-image:url(http://www.sharejs.com/code/table/tab2/images/03.jpg);cursor:pointer;}
.tab1{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;}
.tab2{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
.tab3{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body style=&quot;text-align:center&quot;&gt;
&lt;script type=text/javascript&gt;
	function setTab03Syn ( i )
	{
		selectTab03Syn(i);
	}
	function selectTab03Syn ( i )
	{
		switch(i){
			case 1:
			document.getElementById(&quot;TabTab03Con1&quot;).style.display=&quot;block&quot;;
			document.getElementById(&quot;TabTab03Con2&quot;).style.display=&quot;none&quot;;
			document.getElementById(&quot;TabTab03Con3&quot;).style.display=&quot;none&quot;;
			document.getElementById(&quot;font1&quot;).style.color=&quot;#000000&quot;;
			document.getElementById(&quot;font2&quot;).style.color=&quot;#ffffff&quot;;
			document.getElementById(&quot;font3&quot;).style.color=&quot;#ffffff&quot;;
			break;
			case 2:
			document.getElementById(&quot;TabTab03Con1&quot;).style.display=&quot;none&quot;;
			document.getElementById(&quot;TabTab03Con2&quot;).style.display=&quot;block&quot;;
			document.getElementById(&quot;TabTab03Con3&quot;).style.display=&quot;none&quot;;
			document.getElementById(&quot;font1&quot;).style.color=&quot;#ffffff&quot;;
			document.getElementById(&quot;font2&quot;).style.color=&quot;#000000&quot;;
			document.getElementById(&quot;font3&quot;).style.color=&quot;#ffffff&quot;;
			break;
			case 3:
			document.getElementById(&quot;TabTab03Con1&quot;).style.display=&quot;none&quot;;
			document.getElementById(&quot;TabTab03Con2&quot;).style.display=&quot;none&quot;;
			document.getElementById(&quot;TabTab03Con3&quot;).style.display=&quot;block&quot;;
			document.getElementById(&quot;font1&quot;).style.color=&quot;#ffffff&quot;;
			document.getElementById(&quot;font2&quot;).style.color=&quot;#ffffff&quot;;
			document.getElementById(&quot;font3&quot;).style.color=&quot;#000000&quot;;
			break;
		}
	}
&lt;/script&gt;
&lt;div class=&quot;tab&quot;&gt;
	&lt;div id=&quot;bg&quot; class=&quot;xixi1&quot;&gt;
		&lt;div id=&quot;font1&quot; class=&quot;tab1&quot; onMouseOver=&quot;setTab03Syn(1);document.getElementById('bg').className='xixi1'&quot;&gt;查询广告企业&lt;/div&gt;
		&lt;div id=&quot;font2&quot; class=&quot;tab2&quot; onMouseOver=&quot;setTab03Syn(2);document.getElementById('bg').className='xixi2'&quot;&gt;查询媒体刊例&lt;/div&gt;
		&lt;div id=&quot;font3&quot; class=&quot;tab3&quot; onMouseOver=&quot;setTab03Syn(3);document.getElementById('bg').className='xixi3'&quot;&gt;查询供求商情&lt;/div&gt;
	&lt;/div&gt;
    &lt;div id=TabTab03Con1&gt;52shidai.com JavaScript分享网&lt;/div&gt;
	&lt;div id=TabTab03Con2 style=&quot;display:none&quot;&gt;52shidai.com（&lt;a href=&quot;http://www.52shidai.com/&quot; target=&quot;_blank&quot;&gt;JavaScript分享网&lt;/a&gt;）&lt;/div&gt;
    &lt;div id=TabTab03Con3 style=&quot;display:none&quot;&gt;52shidai.com&lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;&lt;br&gt;
&lt;div align=&quot;center&quot;&gt;
&lt;br&gt;&lt;br&gt;
获取更多JavaScript代码，请登录JavaScript分享网 &lt;a href=&quot;http://www.52shidai.com&quot;&gt;http://www.52shidai.com&lt;/a&gt;
&lt;br&gt;
转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="运行" class="runcode_button" onclick="runcode_open_new('runcode_s9Ocxn');"/> <input type="button" value="复制" class="runcode_button" onclick="runcode_copy('runcode_s9Ocxn');"/> <input type="button" value="另存代码" class="runcode_button" onclick="saveCode('runcode_s9Ocxn','runcode_s9Ocxn');"/> 提示：你可以先修改部分代码再运行。</p>
</div>
<h2  class="related_post_title">随机日志推荐</h2><ul class="related_post"></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/javascript/577.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>上下拉幕横幅广告效果-基于jQuery</title>
		<link>http://www.52shidai.com/jquery/573.html</link>
		<comments>http://www.52shidai.com/jquery/573.html#comments</comments>
		<pubDate>Thu, 22 Jul 2010 05:56:50 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[广告效果]]></category>
		<category><![CDATA[拉幕]]></category>
		<category><![CDATA[横幅]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=573</guid>
		<description><![CDATA[基于jQuery实现，伸缩前，广告图片尺寸：980&#215;400；伸缩后，广告图片尺寸：980&#215;80。替换对应图片即可！ &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62; &#60;title&#62;基于jQuery的拉幕横幅广告效果 - 时代前端52shidai.com&#60;/title&#62; &#60;meta name=&#34;Copyright&#34; content=&#34;JavaScript分享网 http://www.52shidai.com/&#34; /&#62; &#60;meta name=&#34;description&#34; content=&#34;基于jQuery的拉幕横幅广告效果,JavaScript分享网&#34; /&#62; &#60;meta content=&#34;JavaScript,分享,JavaScript代码,Ajax&#34; name=&#34;keywords&#34; /&#62; &#60;style type=&#34;text/css&#34;&#62; img{border:0} &#60;/style&#62; &#60;SCRIPT src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&#34; type=text/javascript&#62;&#60;/SCRIPT&#62; &#60;/head&#62; &#60;body style=&#34;text-align:center&#34;&#62; &#60;SCRIPT language=javascript type=text/javascript &#62; // JScript 文件 function TopAd() { var strTopAd=&#34;&#34;; [...]]]></description>
			<content:encoded><![CDATA[<p>基于jQuery实现，伸缩前，广告图片尺寸：980&#215;400；伸缩后，广告图片尺寸：980&#215;80。替换对应图片即可！</p>
<div class="runcode">
<p><textarea name="runcode" style="height:300px;width:620px;font-size:12px" class="runcode_text" id="runcode_nHLmlV">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;基于jQuery的拉幕横幅广告效果 - 时代前端52shidai.com&lt;/title&gt;
&lt;meta name=&quot;Copyright&quot; content=&quot;JavaScript分享网 http://www.52shidai.com/&quot; /&gt;
&lt;meta name=&quot;description&quot; content=&quot;基于jQuery的拉幕横幅广告效果,JavaScript分享网&quot; /&gt;
&lt;meta content=&quot;JavaScript,分享,JavaScript代码,Ajax&quot; name=&quot;keywords&quot; /&gt;
&lt;style type=&quot;text/css&quot;&gt;
	img{border:0}
&lt;/style&gt;
&lt;SCRIPT src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot; type=text/javascript&gt;&lt;/SCRIPT&gt;
&lt;/head&gt;
&lt;body style=&quot;text-align:center&quot;&gt;
&lt;SCRIPT language=javascript  type=text/javascript &gt;
// JScript 文件
function TopAd()
{
    var strTopAd=&quot;&quot;;
	//定义小图片内容
    var topSmallBanner=&quot;&lt;div&gt;&lt;a href=\&quot;http://www.52shidai.com/\&quot; target=_blank&gt;&lt;img src=\&quot;http://www.sharejs.com/code/gg/lamu/images/top_090901_s.gif\&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&quot;;
	//判断在那些页面上显示大图变小图效果，非这些地址只显示小图（或FLASH）
    if (location == &quot;http://www.52shidai.com&quot; || location == &quot;http://52shidai.com&quot; || true)
    {
		//定义大图内容
        strTopAd=&quot;&lt;div id=adimage style=\&quot;width:980px\&quot;&gt;&quot;+
                    &quot;&lt;div id=adBig&gt;&lt;a href=\&quot;http://www.52shidai.com/\&quot; &quot; +
                    &quot;target=_blank&gt;&lt;img title=2010年平湖在线首届家居建材团购会 &quot;+
                    &quot;src=\&quot;http://www.sharejs.com/code/gg/lamu/images/top_sharejs_b.jpg\&quot; &quot; +
                    &quot;border=0&gt;&lt;/A&gt;&lt;/div&gt;&quot;+
                    &quot;&lt;div id=adSmall style=\&quot;display: none\&quot;&gt;&quot;;
        //strTopAd+=  topFlash;
		strTopAd+=  topSmallBanner;
        strTopAd+=  &quot;&lt;/div&gt;&lt;/div&gt;&quot;;
    }
    else
    {
        //strTopAd+=topFlash;
		strTopAd+=  topSmallBanner;
    }
    strTopAd+=&quot;&lt;div style=\&quot;height:7px; clear:both;overflow:hidden\&quot;&gt;&lt;/div&gt;&quot;;
    return strTopAd;
}
document.write(TopAd());
$(function(){
	//过两秒显示 showImage(); 内容
    setTimeout(&quot;showImage();&quot;,2000);
    //alert(location);
});
function showImage()
{
    $(&quot;#adBig&quot;).slideUp(1000,function(){$(&quot;#adSmall&quot;).slideDown(1000);});
}
&lt;/SCRIPT&gt;
&lt;br&gt;&lt;br&gt;
&lt;div align=&quot;center&quot;&gt;
&lt;br&gt;
无效果请刷新即可看到效果！
&lt;br&gt;
获取更多JavaScript代码，请登录&lt;strong&gt;时代前端&lt;/strong&gt; &lt;a href=&quot;http://www.52shidai.com&quot;&gt;http://www.52shidai.com&lt;/a&gt;
&lt;br&gt;
转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="运行" class="runcode_button" onclick="runcode_open_new('runcode_nHLmlV');"/> <input type="button" value="复制" class="runcode_button" onclick="runcode_copy('runcode_nHLmlV');"/> <input type="button" value="另存代码" class="runcode_button" onclick="saveCode('runcode_nHLmlV','runcode_nHLmlV');"/> 提示：你可以先修改部分代码再运行。</p>
</div>
<h2  class="related_post_title">随机日志推荐</h2><ul class="related_post"></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/jquery/573.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>javascript 实现45种缓动效果</title>
		<link>http://www.52shidai.com/javascript/570.html</link>
		<comments>http://www.52shidai.com/javascript/570.html#comments</comments>
		<pubDate>Wed, 21 Jul 2010 04:54:42 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[js缓冲]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=570</guid>
		<description><![CDATA[&#60;!doctype html&#62; &#60;html dir=&#34;ltr&#34; lang=&#34;zh-CN&#34;&#62; &#60;head&#62; &#60;meta charset=&#34;utf-8&#34;/&#62; &#60;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=8&#34;&#62; &#60;style type=&#34;text/css&#34;&#62; .taxiway{ width:800px; height:100px; background:#E8E8FF; } .move{ width:100px; height:100px; background:#a9ea00; } #panel { float:left; width:810px } #panel div{ float:left; width:88px; border:1px solid #333; height:20px; font-size:11px; } div.transition { margin-top: 30px; width: 200px; height: 200px; position: relative; margin-bottom:10px; } div.transition div { position: absolute; [...]]]></description>
			<content:encoded><![CDATA[<div class="runcode">
<p><textarea name="runcode" style="height:300px;width:620px;font-size:12px" class="runcode_text" id="runcode_Vg0u9r">
&lt;!doctype html&gt;
&lt;html dir=&quot;ltr&quot; lang=&quot;zh-CN&quot;&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;/&gt;
        &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot;&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            .taxiway{
                width:800px;
                height:100px;
                background:#E8E8FF;
            }
            .move{
                width:100px;
                height:100px;
                background:#a9ea00;
            }
            #panel {
                float:left;
                width:810px
            }
            #panel div{
                float:left;
                width:88px;
                border:1px solid #333;
                height:20px;
                font-size:11px;
            }
            div.transition {
                margin-top: 30px;
                width: 200px;
                height: 200px;
                position: relative;
                margin-bottom:10px;
            }
            div.transition div {
                position: absolute;
                height: 1px;
                width: 1px;
                background: #000;
            }
            div.transition span {
                display: block;
                position: absolute;
                border-bottom: 1px solid #dadada;
                font-size: 10px;
                color: #888;
                width: 200px;
                left: 0px;
            }
            div.transition div#indicator {
                position:absolute;
                background-color:#a9ea00;
                height: 200px;
                top: 0px;
                left: 0px;
            }
            div.transition div#marker {
                background-color: #f00;
                height: 6px;
                width: 6px;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                left: 0px;
                margin-bottom: -3px;
                margin-left: -3px;
            }
            div.transition div#label {
                background: transparent;
                color: #ABD474;
                font-size: 20px;
                height: 20px;
                width: 200px;
                text-align: center;
                top: 80px;
                left: 0px;
                z-index: -1;
            }
        &lt;/style&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            var getCoords = function(el){
                var box = el.getBoundingClientRect(),
                doc = el.ownerDocument,
                body = doc.body,
                html = doc.documentElement,
                clientTop = html.clientTop || body.clientTop || 0,
                clientLeft = html.clientLeft || body.clientLeft || 0,
                top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop,
                left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft
                return { 'top': top, 'left': left };
            };
            var getStyle = function(el, style){
                if(!+&quot;\v1&quot;){
                    style = style.replace(/\-(\w)/g, function(all, letter){
                        return letter.toUpperCase();
                    });
                    var value = el.currentStyle[style];
                    (value == &quot;auto&quot;)&amp;&amp;(value = &quot;0px&quot; );
                    return value;
                }else{
                    return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
                }
            }
            var tween = {
                easeInQuad: function(pos){
                    return Math.pow(pos, 2);
                },
                easeOutQuad: function(pos){
                    return -(Math.pow((pos-1), 2) -1);
                },
                easeInOutQuad: function(pos){
                    if ((pos/=0.5) &lt; 1) return 0.5*Math.pow(pos,2);
                    return -0.5 * ((pos-=2)*pos - 2);
                },
                easeInCubic: function(pos){
                    return Math.pow(pos, 3);
                },
                easeOutCubic: function(pos){
                    return (Math.pow((pos-1), 3) +1);
                },
                easeInOutCubic: function(pos){
                    if ((pos/=0.5) &lt; 1) return 0.5*Math.pow(pos,3);
                    return 0.5 * (Math.pow((pos-2),3) + 2);
                },
                easeInQuart: function(pos){
                    return Math.pow(pos, 4);
                },
                easeOutQuart: function(pos){
                    return -(Math.pow((pos-1), 4) -1)
                },
                easeInOutQuart: function(pos){
                    if ((pos/=0.5) &lt; 1) return 0.5*Math.pow(pos,4);
                    return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);
                },
                easeInQuint: function(pos){
                    return Math.pow(pos, 5);
                },
                easeOutQuint: function(pos){
                    return (Math.pow((pos-1), 5) +1);
                },
                easeInOutQuint: function(pos){
                    if ((pos/=0.5) &lt; 1) return 0.5*Math.pow(pos,5);
                    return 0.5 * (Math.pow((pos-2),5) + 2);
                },
                easeInSine: function(pos){
                    return -Math.cos(pos * (Math.PI/2)) + 1;
                },
                easeOutSine: function(pos){
                    return Math.sin(pos * (Math.PI/2));
                },
                easeInOutSine: function(pos){
                    return (-.5 * (Math.cos(Math.PI*pos) -1));
                },
                easeInExpo: function(pos){
                    return (pos==0) ? 0 : Math.pow(2, 10 * (pos - 1));
                },
                easeOutExpo: function(pos){
                    return (pos==1) ? 1 : -Math.pow(2, -10 * pos) + 1;
                },
                easeInOutExpo: function(pos){
                    if(pos==0) return 0;
                    if(pos==1) return 1;
                    if((pos/=0.5) &lt; 1) return 0.5 * Math.pow(2,10 * (pos-1));
                    return 0.5 * (-Math.pow(2, -10 * --pos) + 2);
                },
                easeInCirc: function(pos){
                    return -(Math.sqrt(1 - (pos*pos)) - 1);
                },
                easeOutCirc: function(pos){
                    return Math.sqrt(1 - Math.pow((pos-1), 2))
                },
                easeInOutCirc: function(pos){
                    if((pos/=0.5) &lt; 1) return -0.5 * (Math.sqrt(1 - pos*pos) - 1);
                    return 0.5 * (Math.sqrt(1 - (pos-=2)*pos) + 1);
                },
                easeOutBounce: function(pos){
                    if ((pos) &lt; (1/2.75)) {
                        return (7.5625*pos*pos);
                    } else if (pos &lt; (2/2.75)) {
                        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
                    } else if (pos &lt; (2.5/2.75)) {
                        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
                    } else {
                        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
                    }
                },
                easeInBack: function(pos){
                    var s = 1.70158;
                    return (pos)*pos*((s+1)*pos - s);
                },
                easeOutBack: function(pos){
                    var s = 1.70158;
                    return (pos=pos-1)*pos*((s+1)*pos + s) + 1;
                },
                easeInOutBack: function(pos){
                    var s = 1.70158;
                    if((pos/=0.5) &lt; 1) return 0.5*(pos*pos*(((s*=(1.525))+1)*pos -s));
                    return 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos +s) +2);
                },
                elastic: function(pos) {
                    return -1 * Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1;
                },
                swingFromTo: function(pos) {
                    var s = 1.70158;
                    return ((pos/=0.5) &lt; 1) ? 0.5*(pos*pos*(((s*=(1.525))+1)*pos - s)) :
                        0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos + s) + 2);
                },
                swingFrom: function(pos) {
                    var s = 1.70158;
                    return pos*pos*((s+1)*pos - s);
                },
                swingTo: function(pos) {
                    var s = 1.70158;
                    return (pos-=1)*pos*((s+1)*pos + s) + 1;
                },
                bounce: function(pos) {
                    if (pos &lt; (1/2.75)) {
                        return (7.5625*pos*pos);
                    } else if (pos &lt; (2/2.75)) {
                        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
                    } else if (pos &lt; (2.5/2.75)) {
                        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
                    } else {
                        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
                    }
                },
                bouncePast: function(pos) {
                    if (pos &lt; (1/2.75)) {
                        return (7.5625*pos*pos);
                    } else if (pos &lt; (2/2.75)) {
                        return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75);
                    } else if (pos &lt; (2.5/2.75)) {
                        return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375);
                    } else {
                        return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375);
                    }
                },
                easeFromTo: function(pos) {
                    if ((pos/=0.5) &lt; 1) return 0.5*Math.pow(pos,4);
                    return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);
                },
                easeFrom: function(pos) {
                    return Math.pow(pos,4);
                },
                easeTo: function(pos) {
                    return Math.pow(pos,0.25);
                },
                linear:  function(pos) {
                    return pos
                },
                sinusoidal: function(pos) {
                    return (-Math.cos(pos*Math.PI)/2) + 0.5;
                },
                reverse: function(pos) {
                    return 1 - pos;
                },
                mirror: function(pos, transition) {
                    transition = transition || tween.sinusoidal;
                    if(pos&lt;0.5)
                        return transition(pos*2);
                    else
                        return transition(1-(pos-0.5)*2);
                },
                flicker: function(pos) {
                    var pos = pos + (Math.random()-0.5)/5;
                    return tween.sinusoidal(pos &lt; 0 ? 0 : pos &gt; 1 ? 1 : pos);
                },
                wobble: function(pos) {
                    return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
                },
                pulse: function(pos, pulses) {
                    return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
                },
                blink: function(pos, blinks) {
                    return Math.round(pos*(blinks||5)) % 2;
                },
                spring: function(pos) {
                    return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
                },
                none: function(pos){
                    return 0
                },
                full: function(pos){
                    return 1
                }
            }
            var _ = function(id){
                return document.getElementById(id);
            }
            var transition = function(el){
                el.style.position = &quot;absolute&quot;;
                var options = arguments[1] || {},
                begin =  options.begin,//开始位置
                change = options.change,//变化量
                duration = options.duration || 500,//缓动效果持续时间
                field = options.field,//必须指定，基本上对top,left,width,height这个属性进行设置
                ftp = options.ftp || 50,
                onEnd = options.onEnd || function(){},
                ease = options.ease,//要使用的缓动公式
                end = begin + change,//结束位置
                startTime = new Date().getTime();//开始执行的时间
                (function(){
                    setTimeout(function(){
                        var newTime = new Date().getTime(),//当前帧开始的时间
                        timestamp = newTime - startTime,//逝去时间
                        delta = ease(timestamp / duration);
                        el.style[field] = Math.ceil(begin + delta * change) + &quot;px&quot;
                        if(duration &lt;= timestamp){
                            el.style[field] = end + &quot;px&quot;;
                            onEnd();
                        }else{
                            setTimeout(arguments.callee,1000/ftp);
                        }
                    },1000/ftp)
                })()
            }
            if (typeof Array.prototype['max'] == 'undefined') {
                Array.prototype.map = function(fn, thisObj) {
                    var scope = thisObj || window;
                    var a = [];
                    for ( var i=0, j=this.length; i &lt; j; ++i ) {
                        a.push(fn.call(scope, this[i], i, this));
                    }
                    return a;
                };
                Array.prototype.max = function(){
                    return Math.max.apply({},this)
                }
                Array.prototype.min = function(){
                    return Math.min.apply({},this)
                }
            }
            var range = function(start,end){
                var _range = []
                for(var i = start,l=end-start;i&lt;l;i++){
                    _range.push(i)
                }
                return _range
            }
            var draw = function(ease){
                var demo = _(&quot;transition&quot;);
                demo.innerHTML = &quot;&quot;;//还原！
                //***********绘制控制台********************
                var values = range(0,200).map(function(v){
                    return  tween[ease](v/200) * 200;
                }),
                max = Math.max(200, values.max()),
                min = Math.min(0, values.min());
                if (min==max) {
                    min = 0;
                    max = 200;
                }
                var factor = 200/(max-min),
                grid = '&lt;span style=&quot;bottom:'+Math.round((0-min)*factor)+'px&quot;&gt;0&lt;/span&gt;'+
                    '&lt;span style=&quot;bottom:'+Math.round((200-min)*factor)+'px&quot;&gt;1&lt;/span&gt;',
                graph = range(0,200).map(function(v){
                    return '&lt;div style=&quot;left:'+v+'px;bottom:'+Math.round((values[v]-min)*factor)+'px;height:1px&quot;&gt;&lt;/div&gt;';
                }).join('') + '&lt;div id=&quot;indicator&quot; style=&quot;display:none&quot;&gt;'
                    +'&lt;/div&gt;&lt;div id=&quot;marker&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;&lt;div id=&quot;label&quot;&gt;&lt;/div&gt;';
                demo.innerHTML = grid + graph;
                var indicator = _(&quot;indicator&quot;),
                marker = _(&quot;marker&quot;),
                label = _(&quot;label&quot;),
                demoTransition = function(pos){
                    var value = tween[ease](pos);
                    indicator.style.display = &quot;block&quot;;
                    marker.style.display = &quot;block&quot;;
                    marker.style.left = Math.round((pos*200))+'px';
                    marker.style.bottom = Math.round(((value*200)-min)*factor)+'px';
                    label.innerHTML = Math.round((pos*200))+'px';
                    return value;
                }
                transition(indicator,{field:&quot;left&quot;,begin:parseFloat(getCoords(demo).left),change:200,
                    ease:demoTransition})
            }
            window.onload = function(){
                var panelHTML = function(){
                    var builder = [];
                    var _temp = 'Back Circ Cubic Expo Quad Quart Quint Sine'.split(' ');
                    var ease = _temp.map(function(v){
                        return 'easeIn'+v;
                    });
                    ease = ease.concat(_temp.map(function(v){
                        return 'easeOut'+v;
                    }));
                    ease = ease.concat(_temp.map(function(v){
                        return 'easeInOut'+v;
                    }));
                    ease = ease.concat('blink bounce bouncePast easeFrom easeFromTo easeOutBounce easeTo elastic'.split(' '));
                    ease = ease.concat('flicker full linear mirror none pulse reverse sinusoidal spring swingTo swingFrom swingFromTo wobble'.split(' '))
                    for(var i =0,l=ease.length;i&lt;l;i++){
                        builder.push(&quot;&lt;div onclick='draw(this.innerHTML)'&gt;&quot;);
                        builder.push(ease[i]);
                        builder.push(&quot;&lt;/div&gt;&quot;);
                    }
                    return builder.join('');
                }
                var panel = document.createElement(&quot;div&quot;);
                panel.id = &quot;panel&quot;
                panel.innerHTML = panelHTML();
                _(&quot;transition&quot;).parentNode.insertBefore(panel,_(&quot;transition&quot;).nextSibling);
            }
        &lt;/script&gt;
        &lt;title&gt;缓动BY司徒正美&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;taxiway&quot;&gt;
            &lt;div class=&quot;move&quot; onclick=&quot;transition(this,{field:'left',begin:parseFloat(getCoords(this).left),change:700,ease:tween.bouncePast})&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;taxiway&quot;&gt;
            &lt;div class=&quot;move&quot; onclick=&quot;transition(this,{field:'width',begin:parseFloat(getStyle(this,'width')),change:300,ease:tween.spring})&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
&lt;span class=&quot;clear&quot;&gt;&lt;/span&gt;
&lt;h2&gt;请点击下表的格子&lt;/h2&gt;
        &lt;div id=&quot;transition&quot; class=&quot;transition&quot;&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="运行" class="runcode_button" onclick="runcode_open_new('runcode_Vg0u9r');"/> <input type="button" value="复制" class="runcode_button" onclick="runcode_copy('runcode_Vg0u9r');"/> <input type="button" value="另存代码" class="runcode_button" onclick="saveCode('runcode_Vg0u9r','runcode_Vg0u9r');"/> 提示：你可以先修改部分代码再运行。</p>
</div>
<h2  class="related_post_title">随机日志推荐</h2><ul class="related_post"></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/javascript/570.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Monster-Chrome浏览器的扩展插件（前端检测）</title>
		<link>http://www.52shidai.com/seo/566.html</link>
		<comments>http://www.52shidai.com/seo/566.html#comments</comments>
		<pubDate>Tue, 13 Jul 2010 10:32:59 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[SEO]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Monster]]></category>
		<category><![CDATA[插件]]></category>
		<category><![CDATA[检测]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=566</guid>
		<description><![CDATA[前端工程师的福音来了，又多了一个前端优化的好工具，怎么说这话感觉心里有种莫名的伤感，哎！前端开发者就是辛苦呀，天天要测试要分析的太多太多，要支持的要考虑的一天比一天多。 Monster是Alipay UED推出的网站代码分析、质量检测及评分的浏览器扩展，它能智能分析CSS、JS、HTML内容并生动形象展示网页得分情况(类似YSlow)。它是一个开源项目，您可以在GoogleCode中心检出MonsterForChrome项目源代码。不久会推出Firefox版扩展。 下载及演示 下载Monster 视频演示(低质量) Monster主要检测规则： 检测是否有重复ID的标签； 检测是否使用内联标签嵌套块级标签，如a嵌套div； 检测https协议页面，是否使用了http协议的图片、JS、CSS等； 检测compatMode、doctype是否出错； 检测是否使用了HTML5不再支持的标记，如font,s,u等； 检测标签是否正确关闭； 检测CSS、JS、background-image文件是否为404； 检测CSS、JS文件是否重复调用； 检测是否引用过多外部JS、CSS文件； 检测CSS、JS、HTML是否压缩； 检测CSS样式表是否使用了CSS expression； 检测Cookie是否超过30KB； 检测是否有form标签嵌套form标签； 检测是否直接在标签里定义JS事件，如&#60;a href=”#” onclick=”…”&#62;link&#60;/a&#62;； 检测&#60;meta charset=”utf-8″ /&#62;是否为&#60;head&#62;第一个子标签； 检测一个&#60;form&#62;标签内部是否出现二个input[type=submit]标签； 检测是否在&#60;form&#62;标签中使用了 id=”submit” 的标签； 检测是否将&#60;style&#62;块放置在&#60;/head&#62;前面； 检测是否将&#60;script&#62;块放置在&#60;/body&#62;前面； 检测&#60;img&#62;标签是否指定alt属性； 检测是否为input[text]指定label； 检测网页编码是否为gbk或utf-8； 检测是否使用了@import导入样式表； 如果CSS、JS指定 类似于“?t=20100405”时间戳，则自动输出最后修改时间，方便对比； 如果background-image超过6个，则提示所有背景图片及大小，超过30KB，标红显示； Monster评分规则： Monster是根据问题解决难易程度、性能提升程度、可用性提升程度以及维护性提升程度来综合评分的。具体，请下载 Monster评分算法.xls 这是Monster的第一版，欢迎抓虫，如果您有更好的改进建议，请反馈给我们。 您可能感兴趣的文章wp-Syntax 插件使用方法wordpress采集插件—wp-o-matic使用详解WP幻灯片插件Featured Content Gallery（FCG）汉化版五款漂亮实用的wordpress幻灯片插件给博客添加内链的2个很好的插件推荐5个漂亮的jquery主流图表插件利用301重定向改变WordPress永久链接Permalinks Migration非常漂亮的js日期控件2009年度最佳jQuery插件整理Wordpress投稿插件-在线投稿]]></description>
			<content:encoded><![CDATA[<p><span class='wp_keywordlink'><a href="http://www.52shidai.com" title="时代前端" target="_blank">前端</a></span>工程师的福音来了，又多了一个前端优化的好工具，怎么说这话感觉心里有种莫名的伤感，哎！前端开发者就是辛苦呀，天天要测试要分析的太多太多，要支持的要考虑的一天比一天多。</p>
<p><span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/monster" title="查看 Monster 中所有日志" target="_blank">Monster</a></span>是Alipay UED推出的网站代码分析、质量<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%a3%80%e6%b5%8b" title="查看 检测 中所有日志" target="_blank">检测</a></span>及评分的浏览器扩展，它能智能分析CSS、JS、HTML内容并生动形象展示网页得分情况(类似YSlow)。它是一个开源项目，您可以在GoogleCode中心检出<a href="https://code.google.com/p/monsterforchrome/">MonsterForChrome</a>项目源代码。不久会推出Firefox版扩展。</p>
<h3>下载及演示</h3>
<ul>
<li><a href="https://chrome.google.com/extensions/detail/dcnccmmdjdapgpnjhdakbjdncokmgonf" target="_blank">下载Monster</a></li>
<li><a href="http://v.youku.com/v_show/id_XMTcwNDg2Mjgw.html" target="_blank">视频演示(低质量)</a></li>
</ul>
<p><a href="http://ued.alipay.com/wp-content/uploads/2010/05/MonsterUI.png"></a></p>
<p><a href="http://ued.alipay.com/wp-content/uploads/2010/05/MonsterUI.png"><img title="MonsterUI" src="http://ued.alipay.com/wp-content/uploads/2010/05/MonsterUI.png" alt="" width="500" height="357" /></a></p>
<h3><span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/monster" title="查看 Monster 中所有日志" target="_blank">Monster</a></span>主要<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%a3%80%e6%b5%8b" title="查看 检测 中所有日志" target="_blank">检测</a></span>规则：</h3>
<ol>
<li>检测是否有重复ID的标签；</li>
<li>检测是否使用内联标签嵌套块级标签，如a嵌套div；</li>
<li>检测https协议页面，是否使用了http协议的图片、JS、CSS等；</li>
<li>检测compatMode、doctype是否出错；</li>
<li>检测是否使用了HTML5不再支持的标记，如font,s,u等；</li>
<li>检测标签是否正确关闭；</li>
<li>检测CSS、JS、background-image文件是否为404；</li>
<li>检测CSS、JS文件是否重复调用；</li>
<li>检测是否引用过多外部JS、CSS文件；</li>
<li>检测CSS、JS、HTML是否压缩；</li>
<li>检测CSS样式表是否使用了CSS expression；</li>
<li>检测Cookie是否超过30KB；</li>
<li>检测是否有form标签嵌套form标签；</li>
<li>检测是否直接在标签里定义JS事件，如&lt;a href=”#” onclick=”…”&gt;link&lt;/a&gt;；</li>
<li>检测&lt;meta charset=”utf-8″ /&gt;是否为&lt;head&gt;第一个子标签；</li>
<li>检测一个&lt;form&gt;标签内部是否出现二个input[type=submit]标签；</li>
<li>检测是否在&lt;form&gt;标签中使用了 id=”submit” 的标签；</li>
<li>检测是否将&lt;style&gt;块放置在&lt;/head&gt;前面；</li>
<li>检测是否将&lt;script&gt;块放置在&lt;/body&gt;前面；</li>
<li>检测&lt;img&gt;标签是否指定alt属性；</li>
<li>检测是否为input[text]指定label；</li>
<li>检测网页编码是否为gbk或utf-8；</li>
<li>检测是否使用了@import导入样式表；</li>
<li>如果CSS、JS指定 类似于“?t=20100405”时间戳，则自动输出最后修改时间，方便对比；</li>
<li>如果background-image超过6个，则提示所有背景图片及大小，超过30KB，标红显示；</li>
</ol>
<h3>Monster评分规则：</h3>
<p>Monster是根据问题解决难易程度、性能提升程度、可用性提升程度以及维护性提升程度来综合评分的。具体，请下载 <a href="http://code.google.com/p/monsterforchrome/source/browse/trunk/Monster%E8%AF%84%E5%88%86%E7%AE%97%E6%B3%95.xls" target="_blank">Monster评分算法.xls</a></p>
<p>这是Monster的第一版，欢迎抓虫，如果您有更好的改进建议，请反馈给我们。</p>
<h2  class="related_post_title">您可能感兴趣的文章</h2><ul class="related_post"><li><a href="http://www.52shidai.com/wordpress/531.html" title="wp-Syntax 插件使用方法">wp-Syntax 插件使用方法</a></li><li><a href="http://www.52shidai.com/wordpress/506.html" title="wordpress采集插件—wp-o-matic使用详解">wordpress采集插件—wp-o-matic使用详解</a></li><li><a href="http://www.52shidai.com/wordpress/489.html" title="WP幻灯片插件Featured Content Gallery（FCG）汉化版">WP幻灯片插件Featured Content Gallery（FCG）汉化版</a></li><li><a href="http://www.52shidai.com/wordpress/487.html" title="五款漂亮实用的wordpress幻灯片插件">五款漂亮实用的wordpress幻灯片插件</a></li><li><a href="http://www.52shidai.com/seo/417.html" title="给博客添加内链的2个很好的插件">给博客添加内链的2个很好的插件</a></li><li><a href="http://www.52shidai.com/jquery/372.html" title="推荐5个漂亮的jquery主流图表插件">推荐5个漂亮的jquery主流图表插件</a></li><li><a href="http://www.52shidai.com/wordpress/326.html" title="利用301重定向改变WordPress永久链接Permalinks Migration">利用301重定向改变WordPress永久链接Permalinks Migration</a></li><li><a href="http://www.52shidai.com/javascript/286.html" title="非常漂亮的js日期控件">非常漂亮的js日期控件</a></li><li><a href="http://www.52shidai.com/jquery/255.html" title="2009年度最佳jQuery插件整理">2009年度最佳jQuery插件整理</a></li><li><a href="http://www.52shidai.com/wordpress/109.html" title="Wordpress投稿插件-在线投稿">Wordpress投稿插件-在线投稿</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/seo/566.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>WordPress3.0主题最新模板下载</title>
		<link>http://www.52shidai.com/wordpress/562.html</link>
		<comments>http://www.52shidai.com/wordpress/562.html#comments</comments>
		<pubDate>Mon, 12 Jul 2010 16:06:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[wordpress]]></category>
		<category><![CDATA[WordPress3.0]]></category>
		<category><![CDATA[主题]]></category>
		<category><![CDATA[模板]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=562</guid>
		<description><![CDATA[ 这个皮肤是用WordPress3.0的官方默认模板，现在的wordpress粉丝都在摩拳擦掌，这不 没等到 中文版出来就开始制作皮肤了，这款皮肤很简单就是在原始的默认皮肤上改改css和图片，不过效果非常清新，简洁大方。 请从这里下载 http://www.cv1.cn/2010/06/wordpress-30-beta1-to-wordpress-3-0-rc1.html 您可能感兴趣的文章国人原创的WordPress杂志主题wp-cmsWordPress3.0中文标签链接打不开解决办法WordPress后台自定义主题名称信息最受欢迎最漂亮的50个免费wordpress模板 提供下载地址20个最漂亮的企业网站设计基于WordPress25个简洁的Wordpress主题下载100个最漂亮&#124;免费的wordpress模板]]></description>
			<content:encoded><![CDATA[<div id="attachment_563" class="wp-caption alignnone" style="width: 670px"><a href="http://www.52shidai.com/wp-content/uploads/2010/07/wordpress3.0pifu.gif"><img class="size-full wp-image-563" title="wordpress3.0pifu" src="http://www.52shidai.com/wp-content/uploads/2010/07/wordpress3.0pifu.gif" alt="wordpress3.0皮肤模板" width="660" height="240" /></a><p class="wp-caption-text">wordpress3.0皮肤模板</p></div>
<p> 这个皮肤是用<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/wordpress3-0" title="查看 WordPress3.0 中所有日志" target="_blank">WordPress3.0</a></span>的官方默认<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%a8%a1%e6%9d%bf" title="查看 模板 中所有日志" target="_blank">模板</a></span>，现在的wordpress粉丝都在摩拳擦掌，这不 没等到 中文版出来就开始制作皮肤了，这款皮肤很简单就是在原始的默认皮肤上改改css和图片，不过效果非常清新，简洁大方。</p>
<p>请从这里下载<br />
<a rel="nofollow" href="http://www.cv1.cn/2010/06/wordpress-30-beta1-to-wordpress-3-0-rc1.html" target="_blank">http://www.cv1.cn/2010/06/wordpress-30-beta1-to-wordpress-3-0-rc1.html</a></p>
<h2  class="related_post_title">您可能感兴趣的文章</h2><ul class="related_post"><li><a href="http://www.52shidai.com/wordpress/342.html" title="国人原创的WordPress杂志主题wp-cms">国人原创的WordPress杂志主题wp-cms</a></li><li><a href="http://www.52shidai.com/wordpress/560.html" title="WordPress3.0中文标签链接打不开解决办法">WordPress3.0中文标签链接打不开解决办法</a></li><li><a href="http://www.52shidai.com/wordpress/504.html" title="WordPress后台自定义主题名称信息">WordPress后台自定义主题名称信息</a></li><li><a href="http://www.52shidai.com/wordpress/262.html" title="最受欢迎最漂亮的50个免费wordpress模板 提供下载地址">最受欢迎最漂亮的50个免费wordpress模板 提供下载地址</a></li><li><a href="http://www.52shidai.com/wordpress/260.html" title="20个最漂亮的企业网站设计基于WordPress">20个最漂亮的企业网站设计基于WordPress</a></li><li><a href="http://www.52shidai.com/wordpress/111.html" title="25个简洁的Wordpress主题下载">25个简洁的Wordpress主题下载</a></li><li><a href="http://www.52shidai.com/wordpress/42.html" title="100个最漂亮&#124;免费的wordpress模板">100个最漂亮&#124;免费的wordpress模板</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/wordpress/562.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>WordPress3.0中文标签链接打不开解决办法</title>
		<link>http://www.52shidai.com/wordpress/560.html</link>
		<comments>http://www.52shidai.com/wordpress/560.html#comments</comments>
		<pubDate>Mon, 12 Jul 2010 15:51:14 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[wordpress]]></category>
		<category><![CDATA[WordPress3.0]]></category>
		<category><![CDATA[中文标签]]></category>
		<category><![CDATA[打不开]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=560</guid>
		<description><![CDATA[WordPress3 中文标签链接打不开（显示 错误 404 – 文件未找到）的解决方法 WordPress是世界上最受欢迎的，最流行的博客系统，不过WordPress在中文支持上还存在不少问题，为此许多国内技术高手专门开发了基 于中文的WordPress插件。但是，WordPress在中文支持方面还是有许多问题没有解决。 比如WordPress中文标签链接打不开，提示“错误 404 – 文件未找到”。 产生中文TAG标签链接无法打开的原因在于WordPress不支持中文的编码。 那我们就需要让WordPress能支持中文的编码形式，也就是UTF-8和GBK编码。 操作步骤： 打开wp-include中的classes.php文件，找到以下两处代码进行修改。 第153行原代码： $pathinfo = $_SERVER['PATH_INFO']; 替换为： $pathinfo = mb_convert_encoding($_SERVER['PATH_INFO'], &#8220;UTF-8&#8243;, &#8220;GBK&#8221;); 第158行原代码： $req_uri = $_SERVER['REQUEST_URI']; 替换为： $req_uri = mb_convert_encoding($_SERVER['REQUEST_URI'], &#8220;UTF-8&#8243;, &#8220;GBK&#8221;); 修改好了之后，保存，然后将保存后的classes.php文件上传到服务器并覆盖原文件即可。 再点击中文标签看看，是不是不在提示404，就可以打开了？ 您可能感兴趣的文章WordPress3.0主题最新模板下载]]></description>
			<content:encoded><![CDATA[<div>
<p>WordPress3 <span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e4%b8%ad%e6%96%87%e6%a0%87%e7%ad%be" title="查看 中文标签 中所有日志" target="_blank">中文标签</a></span>链接<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%89%93%e4%b8%8d%e5%bc%80" title="查看 打不开 中所有日志" target="_blank">打不开</a></span>（显示 错误 404 – 文件未找到）的解决方法</p>
<p>WordPress是世界上最受欢迎的，最流行的博客系统，不过WordPress在中文支持上还存在不少问题，为此许多国内技术高手专门开发了基 于中文的WordPress插件。但是，WordPress在中文支持方面还是有许多问题没有解决。</p>
<p>比如WordPress<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e4%b8%ad%e6%96%87%e6%a0%87%e7%ad%be" title="查看 中文标签 中所有日志" target="_blank">中文标签</a></span>链接<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%89%93%e4%b8%8d%e5%bc%80" title="查看 打不开 中所有日志" target="_blank">打不开</a></span>，提示“错误 404 – 文件未找到”。</p>
<p>产生中文TAG标签链接无法打开的原因在于WordPress不支持中文的编码。</p>
<p>那我们就需要让WordPress能支持中文的编码形式，也就是UTF-8和GBK编码。</p>
<p>操作步骤：</p>
<p>打开wp-include中的classes.php文件，找到以下两处代码进行修改。</p>
<p>第153行原代码：</p>
<p>$pathinfo = $_SERVER['PATH_INFO'];</p>
<p>替换为：</p>
<p>$pathinfo = mb_convert_encoding($_SERVER['PATH_INFO'], &#8220;UTF-8&#8243;, &#8220;GBK&#8221;);</p>
<p>第158行原代码：</p>
<p>$req_uri = $_SERVER['REQUEST_URI'];</p>
<p>替换为：</p>
<p>$req_uri = mb_convert_encoding($_SERVER['REQUEST_URI'], &#8220;UTF-8&#8243;, &#8220;GBK&#8221;);</p>
<p>修改好了之后，保存，然后将保存后的classes.php文件上传到服务器并覆盖原文件即可。</p>
<p>再点击<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e4%b8%ad%e6%96%87%e6%a0%87%e7%ad%be" title="查看 中文标签 中所有日志" target="_blank">中文标签</a></span>看看，是不是不在提示404，就可以打开了？</p>
</div>
<h2  class="related_post_title">您可能感兴趣的文章</h2><ul class="related_post"><li><a href="http://www.52shidai.com/wordpress/562.html" title="WordPress3.0主题最新模板下载">WordPress3.0主题最新模板下载</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/wordpress/560.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
